YPZZBWG/pc/src/pages/A0Map/index.module.scss

.A0Map {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  background-color: #837b68;


  :global {

    .mapMain {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1;

      .mapBac {
        z-index: 10;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        // transform:translate();

        &>img {
          pointer-events: none;
          width: 100%;
          height: 100%;
        }
      }

      // -----------大图标
      .A0iconBox {
        cursor: pointer;
        position: absolute;
        width: 40px;
        height: 48px;

        .iconNum {
          position: absolute;
          z-index: 10;
          top: 0;
          left: 0;
          width: 40px;
          height: 60px;
          text-align: center;
          line-height: 40px;
          font-weight: 700;
          font-size: 18px;
        }

        &>img {
          width: 100%;
        }

        .iconImg2 {
          display: none;
        }

        .txtBox {
          position: absolute;
          top: 40px;
          padding-top: 20px;
          left: 3px;
          z-index: 10;
          // color: #f0d99c;
          display: none;

          // writing-mode:vertical-rl;
          &>div {
            width: 100%;
            height: 100%;
            width: 34px;
            padding: 6px 5px;
            line-height: 22px;
            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;

          }
        }

        .hoverShowBox {
          position: absolute;
          top: 60px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 11;
          width: 180px;
          height: 180px;
          display: none;

          .hoverShowBoxM {
            padding: 5px;
            background-color: rgba(255, 233, 175, 0.6);
            backdrop-filter: blur(4px);
            border-radius: 0 6px 0 6px;

            .hoverShowBox1 {
              width: 30px;
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: center;
              color: #47392C;
              font-weight: 700;
              font-size: 14px;
              padding: 0px 5px;
              line-height: 16px;
            }

            .hoverShowBox2 {
              width: calc(100% - 34px);
              height: 100%;

              &>img {
                width: 100%;
                height: 100%;
              }
            }
          }


        }


        &:hover {

          .iconImg1 {
            display: none;
          }

          .iconImg2 {
            display: block;
          }

          .iconNum {
            color: #fff;
          }

          .txtBox {
            display: none !important;
          }

          .hoverShowBox {
            display: block;

            .hoverShowBoxM {

              display: flex;
            }
          }
        }
      }

      // 小图标
      .A0iconSmBox {
        cursor: pointer;
        position: absolute;
        width: 27px;
        height: 52px;


        .ic2Img2 {
          display: none;
        }

        .ic2txtBox {
          position: absolute;
          top: 40px;
          left: -5px;
          z-index: 10;
          width: 34px;
          padding: 6px 5px;
          line-height: 22px;
          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;
          display: none;
        }

        .ic2txtBox5{
          top: auto;
          left: -5px;
          bottom: -150px;
        }
        .ic2txtBox6 {
          top: auto;
          left: -4px;
          bottom: 40px;
        }
        .ic2txtBox8 {
          left: -15px;
        }
        .ic2txtBox9{
          top: auto;
          left: -30px;
          bottom: -120px;
        }
        .ic2txtBox10{
          top: auto;
          bottom: 60px;
          left: 0px;
        }
        .ic2txtBox11{
          top: auto;
          bottom: 40px;
        }



        // 鼠标悬停
        .ic2HoverBox {
          pointer-events: none;
          position: fixed;
          bottom: 320px;
          left: 330px;
          z-index: 30;
          width: 180px;
          height: 140px;
          padding: 5px;
          background-color: rgba(255, 233, 175, 0.6);
          backdrop-filter: blur(4px);
          border-radius: 0 6px 0 6px;
          display: none;

          .ic2HoverBoxll {
            width: 30px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            color: #47392C;
            font-weight: 700;
            font-size: 14px;
            padding: 0px 5px;
            line-height: 16px;
          }

          .ic2HoverBoxrr {
            width: calc(100% - 34px);
            height: 100%;

            &>img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .ic2HoverBox2 {
          left: auto;
          right: 600px;
          bottom: 60px;
        }
        .ic2HoverBox3 {
          left: auto;
          left: 750px;
          top: 400px;
        }

        &:hover {
          .ic2Img1 {
            display: none;
          }

          .ic2Img2 {
            display: block;
          }

          .ic2HoverBox {
            display: flex;
          }

        }
      }

      .A0iconSmBoxR {
        padding-top: 20px;
      }

    }

    .mapMain2 {

      // -----------大图标
      .A0iconBox {
        .iconImg1 {
          display: none;
        }

        .iconImg2 {
          display: block;
        }

        .iconNum {
          color: #fff;
        }

        .txtBox {
          display: block;
        }
      }
    }

    .mapMain3 {

      // 小图标
      .A0iconSmBox {
        .ic2Img1 {
          display: none;
        }

        .ic2Img2 {
          display: block;
        }

        .ic2txtBox {
          display: block;
        }
      }
    }


    // 云层 动画帧
    // .yunBox {
    //   pointer-events: none;
    //   position: absolute;
    //   z-index: 9;
    //   top: 0;
    //   left: 0;
    //   width: 300%;
    //   height: 100%;
    //   display: flex;

    //   .yunSon1 {
    //     position: absolute;
    //     top: 0;
    //     left: 0;
    //     width: 33.33%;
    //     height: 100%;
    //     background-image: url('../../assets/img/map/yun2.png');
    //     background-size: 100% 100%;

    //   }

    //   .yunSon2 {
    //     position: absolute;
    //     top: 0;
    //     left: 33.33%;
    //     width: 33.33%;
    //     height: 100%;
    //     background-image: url('../../assets/img/map/yun1.png');
    //     background-size: 100% 100%;

    //   }

    //   .yunSon3 {
    //     position: absolute;
    //     top: 0;
    //     left: 66.66%;
    //     width: 33.33%;
    //     height: 100%;
    //     background-image: url('../../assets/img/map/yun1.png');
    //     background-size: 100% 100%;

    //   }

    // }

    // 左下角的返回
    .sonToBack {
      position: absolute;
      z-index: 10;
      bottom: 30px;
      left: 30px;
      cursor: pointer;
      transition: all .3s;

      &:hover {
        transform: scale(1.1);
      }
    }
  }
}