Chengzhebei/src/pages/A5wenwu/index.module.scss

.A5wenwu {
  width: 100%;
  height: 100%;
  position: relative;

  :global {

    .gesture {
      width: 140px;
      height: 70px;
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 46%;
      transform: translate(120%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      &.state1 {
        &>img {
          animation: gestureState1 2s linear;
        }
      }

      &>img {
        transform: translateX(0);
        width: 100%;
        object-fit: contain;
      }

      .txt {
        width: 100%;
        height: 17px;
        text-align: center;
        line-height: 15px;
        font-size: 16px;
        font-weight: lighter;
        color: #fff;
      }
    }

    .A5_tabBar {
      width: 50px;
      height: 200px;
      display: flex;
      align-items: center;
      flex-direction: column;
      position: absolute;
      z-index: 1;
      top: 46%;
      left: 5%;
      gap: 20px;
      transform: translateY(-50%);

      .tab {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 60px;
        height: 60px;
        margin: 7px 0;
        cursor: pointer;

        &>img {
          width: 100%;
          object-fit: contain;
        }

        .txt {
          width: 100%;
          height: 17px;
          text-align: center;
          line-height: 15px;
          letter-spacing: 1px;
          font-weight: 500;
          color: #fbebbd;
          margin-top: 4px;
          font-size: 14px;
        }
      }
    }

    .A5_tabBarR {
      width: 50px;
      height: 200px;
      display: flex;
      align-items: center;
      flex-direction: column;
      position: absolute;
      z-index: 1;
      top: 46%;
      right: 5%;
      transform: translateY(-50%);

      .tab {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
        width: 45px;
        height: 65px;
        margin: 8px 0;

        &>img {
          width: 100%;
          object-fit: contain;
        }

        .txt {
          width: 100%;
          height: 17px;
          text-align: center;
          line-height: 15px;
          letter-spacing: 1px;
          font-size: 14px;
          font-weight: 500;
          color: #fbebbd;
        }
      }
    }
  }
}

.tapianModal,
.lineModal {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;

  :global {

    .TContainner {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .TLeft {
        position: absolute;
        left: 2%;
        width: 20%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;

        .Tbtn1,
        .Tbtn2 {
          transition: all 0.3s ease-in-out;
          width: 70px;
          height: 70px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 17px;
          cursor: pointer;
          background: url('../../assets/img/btn_tab.png') no-repeat;
          background-size: 100% 100%;
          color: rgba(255, 233, 182, 1);
        }

        .TActive {
          color: rgba(124, 75, 54, 1);
          background: url('../../assets/img/btn_tabAc.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}

// ---------英文版
.A5wenwuEn {
  :global {
    .A5_tabBar .tab .txt{
      width: auto;
    }
    .A5_tabBarR .tab .txt{
      width: auto;
    }
  }
}