YPZZBWG/pc/src/pages/App/MainM/Tab1/index.module.scss

.Tab1 {
  position: relative;
  background-color: #554a3e;

  :global {
    .tab1Btn {
      position: absolute;
      left: 10px;
      bottom: 6px;
      z-index: 10;

      .tab1BtnRow {
        width: 50px;
        height: 50px;
        margin-bottom: 4px;
        background-size: 100% 100%;

        &:nth-of-type(1) {
          background-image: url('../../../../assets/img/main/2.png');
        }

        &:nth-of-type(2) {
          background-image: url('../../../../assets/img/main/3.png');
        }
      }

      .tab1BtnRowAc {
        position: none;

        &:nth-of-type(1) {
          background-image: url('../../../../assets/img/main/2Ac.png');
        }

        &:nth-of-type(2) {
          background-image: url('../../../../assets/img/main/3Ac.png');
        }
      }
    }

    .tab1ImgBox {
      position: relative;
      height: 100%;
      width: 100%;
      overflow-x: auto;

      .tab1ImgBoxSon {
        width: auto;
        height: 100%;
        position: relative;
        display: inline-block;

        .tab1Img {
          display: inline-block;
          width: auto;
          height: 100%;
          max-width: 100000px;
        }

        // 展陈点位
        .tab1Loc1 {
          position: absolute;
          z-index: 9;

          .tab1Loc1_1 {
            background-size: 100% 100%;
            background-image: url('../../../../assets/img/map/icon1.png');
            z-index: 10;
            width: 35px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-weight: 700;
            font-size: 16px;
          }

          .tab1Loc1_2 {
            opacity: 0;
            pointer-events: none;
            position: absolute;
            top: 50px;
            left: 3px;
            width: 29px;
            height: auto;
            color: #47392C;
            background-color: rgba(255, 233, 175, 0.6);
            backdrop-filter: blur(4px);
            font-weight: 700;
            font-size: 16px;
            text-align: center;
            border-radius: 0 6px 0 6px;
            padding: 6px 5px;
            line-height: 22px;

          }
        }

        .tab1Loc1Ac {
          .tab1Loc1_1 {
            color: #fff;
            background-image: url('../../../../assets/img/map/icon1Ac.png');
          }

          .tab1Loc1_2 {
            opacity: 1;
            pointer-events: auto;
          }
        }

        .tab1Loc2 {
          .tab1Loc1_1 {
            width: 26px;
            height: 32px;
            background-image: url('../../../../assets/img/map/icon2.png');
          }

          .tab1Loc1_2 {
            top: 36px;
            left: -1px;
          }

          .tab1Loc1_2Top {
            top: auto;
            bottom: 36px;
          }
        }

        .tab1Loc2Ac {
          .tab1Loc1_1 {
            background-image: url('../../../../assets/img/map/icon2Ac.png');
          }

          .tab1Loc1_2 {
            opacity: 1;
            pointer-events: auto;
          }
        }
      }

    }

    .sonToBack {
      position: absolute;
      bottom: 10px;
      right: 10px;
      z-index: 9999;
    }

  }
}