kaiPingWeb/code/src/pages/A1Home/index.module.scss

.A1Home {
  background-size: 100% 100%;
  position: relative;

  :global {


    .A1locBox {
      position: absolute;
      z-index: 3;
      width: 158px;
      height: 129px;

      .A1locBoxName {
        text-align: center;
        background-image: url('../../assets/img/btn_normal.png');
        background-size: 100% 100%;
        width: 158px;
        height: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: 2px;
        color: var(--themeColor2);
        font-weight: 700;
        transition: all .3s;
      }

      .A1locBoxLoc {
        margin: 15px auto 0;
        width: 60px;
        height: 60px;
        background-image: url('../../assets/img/homeB.png');
        background-size: 100% 100%;
        transition: all .3s;
      }

      .A1locGuang {
        position: relative;
        left: -3%;
        margin: -50px auto 0;
        width: 100px;
        height: 100px;
        background-image: url('../../assets/img/img_light.png');
        background-size: 100% 100%;

      }

    }

    .A1locBoxHide {

      .A1locBoxName,
      .A1locBoxLoc,
      .A1locGuang {
        opacity: 0;
      }
    }

    .A1locHover {
      position: absolute;
      z-index: 3;
      background-size: 100% 100%;
      opacity: 0;
      transition: all .3s;
      cursor: pointer;

      &>div {
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);

        width: 188px;
        height: 50px;
        padding-bottom: 16px;

        &>div {
          width: 100%;
          height: 100%;
          text-align: center;
          background-image: url('../../assets/img/btn_active.png');
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          letter-spacing: 2px;
          color: var(--themeColor);
          font-weight: 700;
        }
      }


      &:hover {
        opacity: 1;
      }
    }

    // .A1locHoverAc {
    //   opacity: 1;
    // }



    .A1leftBtn {
      position: absolute;
      left: 70px;
      bottom: 60px;
      z-index: 1;
      width: 138px;
      height: 40px;
      line-height: 38px;
      text-align: center;
      color: #fff;
      letter-spacing: 2px;
      font-size: 18px;
      background-image: url('../../assets/img/btn_s_normal.png');
      background-size: 100% 100%;
      cursor: pointer;
    }

    .A1mapBox {
      position: absolute;
      z-index: 20;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      pointer-events: none;
      transition: all .3s;

      .A1back {
        position: absolute;
        bottom: 50px;
        left: 50px;
        cursor: pointer;
        width: 60px;
        height: 60px;
        background-image: url('../../assets/img/back.png');
        background-size: 100% 100%;
      }

      .A1mapRow {
        position: absolute;
        z-index: 3;
        cursor: pointer;
        width: 50px;
        height: 50px;

        .A1mapRowDian {
          width: 100%;
          height: 100%;
          background-image: url('../../assets/img/homeB.png');
          background-size: 100% 100%;
          margin: 0 auto 0px;
          transition: all .3s;
        }

        .A1mapRowDianGuang {
          opacity: 0;
          transition: all .3s;
          position: relative;
          left: -30px;
          margin: -80px auto 0;
          width: 100px;
          height: 100px;
          background-image: url('../../assets/img/img_light.png');
          background-size: 100% 100%;
        }

        &>p {
          padding-top: 8px;
          color: #fff;
        }

        &:hover {
          .A1mapRowDian {
            background-image: url('../../assets/img/homeBAc.png');
          }
          .A1mapRowDianGuang{
            opacity: 1;
          }

          &>P {
            color: var(--themeColor2);
          }
        }

        .A1mapTxt {
          transition: all .3s;
          opacity: 0;
          pointer-events: none;
          background-color: var(--themeColor);
          padding: 6px;
          border-radius: 4px;
          width: 300px;
          height: auto;
          position: absolute;

          &>div {
            width: 100%;
            height: 100%;
            border: 1px solid var(--themeColor2);
            border-radius: 4px;
            padding: 20px 20px;
            color: var(--themeColor2);

            &>h3 {
              font-size: 18px;
              text-align: center;
            }

            .A1mapXian {
              width: 100%;
              height: 16px;
              background-image: url('../../assets/img/line.png');
              background-size: 100% 100%;
              margin: 15px 0;
            }

            &>p {
              font-size: 14px;
              line-height: 22px;
              letter-spacing: 2px;
            }
          }
        }

        &:hover {
          .A1mapTxt {
            opacity: 1;
          }
        }
      }



    }

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

  }
}