Chengzhebei/src/pages/A6ybwx/A6_2_zxzgh/index.module.scss

.Sinicize {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  overflow: hidden;
  background-color: rgba(255, 233, 182, 1);

  :global {
    .SinicizeScroll {
      width: 100%;
      height: 100%;
      overflow-x: auto;
      transition: all 0.3s ease-in-out;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: none;

      &::-webkit-scrollbar {
        height: 0;
      }
    }
  }
}

.Sinicize1 {
  width: 737px;
  height: 100%;
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url('../../../assets/img/A6_sinicize_bg.jpg');
  background-color: rgba(255, 233, 182, 1);
  background-size: 100% 100%;
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  :global {
    .title {
      position: absolute;
      top: 13%;
      left: 50%;
      transform: translateX(-122%);
      height: 100px;
      width: 275px;

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

    .S2text {
      position: absolute;
      top: 36%;
      left: 50%;
      transform: translateX(-117%);
      height: 60px;
      width: 287px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      color: rgba(93, 96, 96, 1);
      font-weight: lighter;

      .line1 {
        width: 100%;
        height: 25px;

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

      .t2 {
        width: 87%;
        font-size: 15px;
        line-height: 24px;
        font-weight: 400;
      }
    }

    .zhufo,
    .pusha {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0.6;
      transition: all 0.3s ease-in-out;
      & > img {
        height: 100%;
        object-fit: contain;
      }

      &.active {
        opacity: 1;
      }
    }

    .zhufo {
      height: 335px;
      width: 280px;
      transform: translate(-12%, -50%);

      .name {
        font-size: 16px;
        font-weight: 500;
        color: rgba(170, 105, 77, 1);
        text-align: center;
      }
    }

    .pusha {
      height: 325px;
      width: 120px;
      transform: translate(45%, -50%);
      & > img {
        width: 100%;
      }
      .name {
        font-size: 16px;
        font-weight: 500;
        color: rgba(170, 105, 77, 1);
        text-align: center;
      }
    }

    .sinicizeBtn1,
    .sinicizeBtn2 {
      position: absolute;
      right: 2%;
      bottom: 5%;
      height: 80px;
      width: 80px;
      background: url('../../../assets/img/btn_tab.png') no-repeat center center;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 233, 182, 1);
      transition: all 0.3s ease-in-out;
      &.active {
        color: rgba(93, 30, 32, 1);
        background: url('../../../assets/img/btn_tabAc.png') no-repeat center center;
        background-size: 100% 100%;
      }
    }

    .sinicizeBtn1 {
      bottom: 21%;
    }
  }
}

.label {
  transform: scale(1.5);
  position: absolute;
  height: 30px;
  width: fit-content;
  display: flex;
  align-items: center;
  color: rgba(124, 75, 54, 1);
  font-weight: 500;
  font-size: 9px;

  :global {
    .btn {
      width: 40px;
      height: 15px;
      background-position: center center;
      background-repeat: no-repeat;
      background-image: url('../../../assets/img/A6_sinicize_btn1.png');
      background-size: 100% 100%;
      background-color: rgba(255, 233, 182, 1);
      text-align: center;
      line-height: 17px;
      animation: fadeInOut 3s linear infinite;
    }

    .arrowL,
    .arrowR {
      width: 10px;
      position: relative;
      height: 0;
      border-bottom: 1px dashed rgba(124, 75, 54, 1);
      animation: fadeInOut 3s linear infinite;
      .dot {
        position: absolute;
        width: 4px;
        height: 4px;
        background-color: rgba(124, 75, 54, 1);
        border-radius: 50%;
      }
    }
    .arrowL {
      .dot {
        left: -5px;
        top: -1px;
      }
    }
    .arrowR {
      .dot {
        right: -5px;
        top: -1px;
      }
    }

    // .arrowL {
    //   &::after {
    //     content: '';
    //     position: absolute;
    //     left: -6px;
    //     top: 50%;
    //     transform: translateY(-1px);
    //     // 箭头三角形（向左）
    //     border-right: 4px solid rgb(124, 75, 54);
    //     border-top: 3px solid transparent;
    //     border-bottom: 3px solid transparent;
    //   }
    // }

    // .arrowR {
    //   &::after {
    //     content: '';
    //     position: absolute;
    //     right: -5px;
    //     top: 50%;
    //     transform: translateY(-1px);
    //     border-left: 4px solid rgb(124, 75, 54);
    //     border-top: 3px solid transparent;
    //     border-bottom: 3px solid transparent;
    //   }
    // }
  }
}

.Sinicize2 {
  width: fit-content;
  height: 100%;
  position: relative;
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  :global {
    .scroll {
      width: fit-content;
      height: 100%;
      display: inline-block;
      vertical-align: top;
      white-space: nowrap;

      .yearItem {
        width: fit-content;
        height: 100%;
        display: inline-block;
        vertical-align: top;
        background-color: #fff;

        .year {
          width: 100px;
          height: 100%;
          font-size: 20px;
          font-weight: 500;
          color: rgba(255, 233, 182, 0.6);
          text-align: center;
          background-size: 100% 100%;
          box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
          display: inline-block;
          vertical-align: top;

          .yearContainner {
            width: 100%;
            height: 100%;

            .txt {
              writing-mode: vertical-rl;
              text-align: left;
              letter-spacing: 4px;
              width: 100%;
              padding: 50px 40%;
              padding-bottom: 10px;
              height: 44%;
            }
            .front {
              width: 100%;
              height: 50%;
              padding: 0 10px;
              font-size: 15px;
              line-height: 24px;
              font-weight: 400;
              overflow: auto;
              mask-image: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 1) 70%,
                /* 保留顶部70%不透明 */ rgba(255, 255, 255, 0.3) 100% /* 底部30%完全透明 */
              );
              -webkit-mask-image: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 1) 70%,
                rgba(255, 255, 255, 0.3) 100%
              );
              &::-webkit-scrollbar {
                width: 0;
                height: 0;
              }
            }
          }
        }

        .year-zongjie {
          background: url(../../../assets/img/sinicize_jy.jpg) no-repeat center center;
          background-size: 100% 100%;
          width: 100px;
          .yearContainner {
            .txt {
              padding: 20px 40%;
              padding-top: 50px;
              letter-spacing: 2px;
              height: 35%;
            }
            .front {
              height: 65%;
              text-align: justify;
              padding: 0 20px;
              padding-bottom: 50px;
            }
          }
        }
        .jieyuDetail {
          background-image: url(../../../assets/img/A6_sinicize_jieyuBg.png);
          background-size: 100% 100%;
          background-position: center center;
          width: auto;
          height: 100%;
          display: inline-block;
          vertical-align: top;
          overflow: hidden;
          transition: all 0.6s ease-in-out;
          .jieyuDetailtxt {
            width: 500px;
            height: 100%;
            padding: 80px 160px 0 40px;
            font-size: 15px;
            font-weight: 400;
            color: rgba(93, 96, 96, 1);
            transition: opacity 1s ease-in-out, width 0.1s ease-in-out;
            line-height: 30px;
            text-indent: 2em;
            text-align: justify;
            white-space: normal;
          }
        }
        .jieyuDetailHide {
          .jieyuDetailtxt {
            width: 0;
            opacity: 0;
            padding: 0;
          }
        }
      }
    }
  }
}

.tip {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);

  :global {
    .gesture {
      position: absolute;
      top: 20%;
      right: 3%;
      width: 71px;
      height: 100px;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      font-size: 10px;
      font-weight: 500;
      color: #fff;

      & > img {
        width: 60px;
        height: 50px;
        object-fit: contain;
      }

      .txt {
        text-align: center;
        width: 100%;
        height: fit-content;
        font-size: 8px;
        font-weight: 500;
        color: #fff;
      }
    }

    .t1,
    .t2 {
      width: 77px;
      height: 25px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 8px;
      font-weight: 500;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .txt {
        width: 60px;
        height: 22px;
      }

      .lineContainer {
        width: 100%;
        height: 5px;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .line {
          width: 60px;
          height: 0;
          border-bottom: 1px dashed #fff;
        }

        .ball {
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background-color: #fff;
        }
      }
    }

    .t1 {
      transform: translate(317%, 34%);
    }

    .t2 {
      transform: translate(317%, 371%);
    }
  }
}