Chengzhebei/src/pages/A7wjwj/conponents/Discover/index.module.scss

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

  :global {
    .left,
    .left2 {
      width: 45%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;

      .record {
        width: fit-content;
        height: fit-content;
        max-width: 250px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 10px;
        color: rgba(255, 255, 255, 1);
        transition: opacity 0.5s;

        .text {
          font-size: 9px;
          max-height: 77px;
          overflow: auto;
          &::-webkit-scrollbar {
            width: 0;
            height: 0;
          }
        }

        .btn {
          text-align: right;
          font-size: 9px;
          line-height: 14px;
          color: rgba(255, 223, 174, 1);
          cursor: pointer;
        }
      }

      .record1 {
        width: 200px;
        height: 75px;
        transform: translate(-149px, -104px);
        background: url('../../../../assets/img/A7_discover_record1.png') no-repeat center center;
        background-size: 100% 100%;
      }

      .record2 {
        width: 130px;
        height: 60px;
        transform: translate(0%, 94px);
        background: url('../../../../assets/img/A7_discover_record2.png') no-repeat center center;
        background-size: 100% 100%;

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

          .icon {
            width: 15px;
            height: 12px;
            line-height: 10px;

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

      .record3 {
        width: 155px;
        height: 45px;
        transform: translate(25px, -26px);
        background: url('../../../../assets/img/A7_discover_record3.png') no-repeat center center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        padding: 7px 10px;
        .text {
          overflow: hidden;
        }
      }

      .record4 {
        width: 140px;
        height: 25px;
        transform: translate(-120px, 84px);
        background: url('../../../../assets/img/A7_discover_record4.png') no-repeat center center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        flex-direction: row;

        .text {
          height: 22px;
          line-height: 25px;
        }
      }

      .record5 {
        width: 102px;
        height: 25px;
        transform: translate(-123px, -73px);
        background: url('../../../../assets/img/A7_discover_record5.png') no-repeat center center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        flex-direction: row;

        .text {
          height: 15px;
        }
      }

      .point {
        height: 40px;
        width: 24px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

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

      .point1 {
        transform: translate(-16%, -83%);
      }

      .point2 {
        transform: translate(-5%, 146%);
      }
    }

    .left {
      overflow: hidden;
      transition: opacity 0.5s;

      .arrow1 {
        width: 20px;
        height: 66px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(47%, 3%);
        background: url('../../../../assets/img/A7_discover_arrow1.png') no-repeat center center;
        background-size: contain;
      }

      .leftImg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../../../../assets/img/A7_map1.png') no-repeat center bottom;
        background-size: contain;
        transition: all 0.8s;
      }

      .leftImgMove {
        opacity: 0;
        transform: scale(4);
      }
    }

    .left2 {
      z-index: 2;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s;
      background: url('../../../../assets/img/A7_map2.png') no-repeat center bottom;
      background-size: contain;
      position: relative;

      .point3 {
        transform: translate(36px, 16px);
      }

      .point4 {
        transform: translate(-33px, 45px);
      }

      .point5 {
        transform: translate(-62px, -57px);
      }

      .arrow2 {
        width: 22px;
        height: 72px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-261%, -18%);
        background: url('../../../../assets/img/A7_discover_arrow2.png') no-repeat center center;
        background-size: 100% 100%;
      }

      .arrow3 {
        width: 57px;
        height: 28px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-26%, 139%);
        background: url('../../../../assets/img/A7_discover_arrow3.png') no-repeat center center;
        background-size: 100% 100%;
      }

      .back {
        width: 60px;
        height: 30px;
        position: absolute;
        z-index: 1;
        top: auto;
        bottom: 5%;
        left: 50%;
        transform: translate(-50%, 10%);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;

        & > img {
          position: absolute;
          z-index: -1;
          height: 100%;
          object-fit: contain;
        }

        .txt {
          color: rgba(255, 223, 174, 1);
        }
      }
    }

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

    .right {
      margin-top: 160px;
      padding-bottom: 10px;
      width: 55%;
      height: 100%;

      .scroll {
        width: 100%;
        height: 78%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        overflow: auto;
        padding-bottom: 15px;
        padding-top: 6px;

        mask-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 1) 80%,
          /* 保留顶部70%不透明 */ rgba(0, 0, 0, 0) 100% /* 底部30%完全透明 */
        );
        -webkit-mask-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 1) 80%,
          rgba(0, 0, 0, 0) 100%
        );

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

      .item {
        width: 95%;
        height: fit-content;
        display: flex;
        flex-direction: column;
        gap: 5px;

        .title {
          width: 100%;
          height: 15px;
          display: flex;
          align-items: center;
          gap: 5px;

          .icon {
            width: 15px;
            height: 15px;
            object-fit: contain;
            line-height: 14px;

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

          .txt {
            height: 15px;
            line-height: 15px;
            font-weight: bold;
            color: rgba(124, 75, 54, 1);
            font-size: 12px;
          }
        }

        .text {
          width: 95%;
          height: fit-content;
          align-self: flex-end;
          color: rgba(93, 96, 96, 1);
          font-size: 11px;
          line-height: 18px;
          position: relative;

          a {
            color: rgba(175, 135, 100, 1);
          }

          .textBj {
            position: absolute;
            top: -0%;
            left: -0%;
            width: 100%;
            height: 100%;
            max-width: 99999px;
            max-height: 99999px;
            object-fit: fill !important;
          }
          .txt2_item {
            width: 100%;
            height: fit-content;
            display: flex;
            flex-direction: column;
            gap: 5px;
            color: rgba(93, 96, 96, 1);
            margin-bottom: 20px;
            .text_name {
              font-weight: bold;
            }
            .pdfItem {
              cursor: pointer;
              color: rgba(175, 135, 100, 1);
            }
          }
        }

        .from {
          width: 95%;
          height: fit-content;
          align-self: flex-end;
          text-align: right;
          color: rgba(93, 96, 96, 1);
          font-size: 11px;
        }
      }
    }

    .direct {
      width: 70px;
      height: 70px;
      position: absolute;
      left: 2%;
      bottom: 2%;
      z-index: 10;
      cursor: pointer;

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

// ------------移动端
.DiscoverMo {
  :global {
    .right {
      .item {
        .title {
          .icon {
            position: relative;
            top: -1px;
            width: 18px;
            height: 18px;
          }

          .txt {
            font-size: 16px;
          }
        }

        .text {
          margin-top: 8px;
          font-size: 16px;
          line-height: 22px;
        }

        .from {
          font-size: 14px;
        }
      }
    }

    .left {
      .record1 {
        width: 230px;
        height: 127px;
        transform: translate(-166px, -139px);

        .text {
          font-size: 14px;
        }

        .btn {
          font-size: 14px;
        }
      }

      .record2 {
        padding-top: 15px;
        width: 190px;
        height: 80px;

        .text {
          font-size: 14px;
        }

        .btn {
          font-size: 14px;
        }

        .btnContainer {
          .icon {
            width: 20px;
            height: 20px;
            position: relative;
            left: -2px;
            top: -1px;
          }
        }
      }
    }

    .left2 {
      .record5 {
        padding-top: 2px;
        width: 156px;
        height: 36px;
        transform: translate(-163px, -83px);

        .text {
          font-size: 14px;
        }

        .btn {
          font-size: 14px;
        }
      }

      .record3 {
        width: 181px;
        height: 60px;
        transform: translate(19px, -32px);
        padding-top: 2px;

        .text {
          font-size: 14px;
          padding: 6px 0px;
        }

        .btn {
          font-size: 14px;
        }
      }

      .record4 {
        width: 192px;
        height: 36px;
        transform: translate(-145px, 84px);
        padding-top: 16px;

        .text {
          font-size: 14px;
        }

        .btn {
          font-size: 14px;
        }
      }
      .point4 {
        transform: translate(-34px, 47px);
      }

      .back {
        width: 90px;
        height: 40px;

        .txt {
          font-size: 16px;
        }
      }
    }

    .right {
      .scroll {
        .item {
          .text {
            width: 90%;
            .text_txt {
              width: 90%;
            }
          }
        }
      }
    }

    .direct {
      left: 1%;
      bottom: 1%;
      width: 80px;
      height: 80px;
    }
  }
}