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

.Bwwq {
  width: auto;
  height: 100%;
  background: url('../../../../../assets/img/A6_sinicize_bg2_4.jpg') repeat-x center bottom;
  background-size: 100% 100%;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  display: inline-block;
  vertical-align: top;
  &:global(.detailShow) {
    :global {
      .left,
      .right {
        opacity: 1;
        transition: all 1s ease-in-out, opacity 0.3s ease-in-out;
      }
    }
  }
  &:global(.detailHide) {
    :global {
      .left,
      .right {
        width: 0;
        opacity: 0;
        transition: all 0.6s ease-in-out;
      }
    }
  }

  :global {
    .point {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 225px;
      height: 60px;
      & > img {
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        height: 100%;
        object-fit: contain;
      }
      .pPoint {
        padding: 6px 0;
        padding-left: 55px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .pointTime,
        .pointTitle {
          padding-left: 10px;
          width: fit-content;
          height: 50%;
          font-size: 20px;
          font-weight: 500;
          color: rgba(124, 75, 54, 1);
          text-align: center;
        }
      }
    }
    .left {
      width: 242px;
      height: 100%;
      display: inline-block;
      vertical-align: top;
      position: relative;
      white-space: normal;
      .lTop {
        text-align: left;
        padding: 20px;
        padding-right: 0;
        padding-bottom: 0;
        width: 100%;
        height: 110px;
        font-size: 15px;
        line-height: 22px;
        font-weight: 400;
        color: rgba(93, 96, 96, 1);
      }
      .itemHotBtn {
        margin-top: 17px;
        margin-left: 15px;
        width: 80%;
        height: 56px;
        color: rgba(124, 75, 54, 1);
        font-size: 20px;
        cursor: pointer;
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        & > img {
          position: absolute;
          z-index: -1;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 180px;
          height: 100%;
          object-fit: fill;
        }
        .hotFocu {
          width: 35px;
          height: 35px;
          transform: translate(143%, -116%);
        }
      }
      .lContent {
        width: 100%;
        height: calc(100% - 100px);
        display: flex;
        gap: 5px;
        position: relative;
        .lImgBox {
          width: 550px;
          height: 100%;
          .pic {
            width: 100%;
            height: 100%;
            transition: all 0.6s ease-in-out;
            background-repeat: no-repeat;
            background-position: top right;
            background-size: contain;
          }
          & > img {
            height: 100%;
            object-fit: contain;
          }
        }
        .lInfo {
          padding-left: 20px;
          padding-top: 30px;
          width: 90%;
          height: 48%;
          display: flex;
          align-items: center;
          flex-direction: column;
          gap: 20px;
          overflow: auto;
          &::-webkit-scrollbar {
            width: 0px;
            height: 0px;
          }
          .item {
            width: 100%;
            height: fit-content;
            font-size: 13px;
            font-weight: 500;
            color: rgba(124, 75, 54, 1);

            .lTitle {
              width: 100%;
              height: fit-content;
              font-size: 19px;
              line-height: 24px;
              letter-spacing: 2px;
              font-weight: bold;
              color: rgba(124, 75, 54, 1);
              position: relative;
              z-index: 1;
              &::after {
                content: '';
                width: 32px;
                height: 7px;
                position: absolute;
                z-index: -1;
                top: 50%;
                left: 50%;
                transform: translate(-480%, 65%);
                background-color: rgb(197, 185, 144);
              }
            }
            .lText {
              font-size: 15px;
              line-height: 22px;
              font-weight: 400;
              color: rgb(93, 96, 96);
              height: fit-content;
              text-align: justify;
              margin-top: 5px;
              max-height: 90px;
              overflow: auto;
              &::-webkit-scrollbar {
                width: 0px;
                height: 0px;
              }
              & > span {
                color: rgb(169, 135, 99);
              }
            }
          }
        }
      }
    }
    .right {
      width: fit-content;
      height: 100%;
      display: inline-block;
      vertical-align: top;
      .RItems {
        width: fit-content;
        height: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        .item {
          width: 344px;
          height: 100%;
          position: relative;
          .pic {
            width: 100%;
            height: calc(100% - 15px);
            transition: all 0.6s ease-in-out;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
          }
          .imgFromTxt {
            position: absolute;
            bottom: 5px;
            left: 0;
            width: 100%;
            height: 15px;
            font-size: 11px;
            color: rgba(151, 151, 151, 1);
            text-align: center;
          }
          .wq1 {
            transform: translate(-93%, 24%);
            width: 360px;
            .main {
              width: 160px;
              text-align: right;
              white-space: normal;
              .Cardtext {
                text-align: right;
              }
            }
            .dotRight {
              width: 85px;
              top: 7%;
              .card_arrowR {
                .line {
                  border-top: 1px dashed rgba(93, 96, 96, 1);
                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
                }
              }
            }
          }
          .point7 {
            transform: translate(-142%, 121%);
            .pPoint {
              width: 417px;
              position: relative;
              top: -11px;
              left: -15px;
            }
          }
        }
      }
    }
    .itemHot {
      background-color: rgba(33, 30, 26, 0.8);
      backdrop-filter: blur(5px);
      position: fixed;
      z-index: 3;
      top: 0;
      left: 0;
      width: 100%;
      padding: 0 20px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .containner {
        width: 730px;
        height: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        .closeItemHot {
          position: absolute;
          top: 33px;
          right: 44px;
          width: 80px;
          height: 40px;
          cursor: pointer;
        }
        .itemHot_title {
          width: 100%;
          height: 30px;
          font-size: 26px;
          color: rgba(255, 233, 182, 1);
          text-align: center;
          line-height: 24px;
          & > img {
            width: 20px;
            height: 20px;
            object-fit: contain;
            margin: 0 10px;
            display: inline-block;
            vertical-align: top;
          }
        }
        .itemHot_line {
          width: 100%;
          height: 30px;
          margin: 14px 0;
          & > img {
            width: 100%;
            height: 20px;
            object-fit: contain;
          }
        }
        .itemHot_content {
          width: 100%;
          height: 69%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 15px;
          line-height: 24px;
          color: rgba(255, 255, 255, 1);
          white-space: normal;
          gap: 20px;
          .itemHotL {
            width: 45%;
            height: 100%;
            & > img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
          .itemHotR {
            width: 55%;
            height: 100%;
            display: inline-block;
            vertical-align: top;
          }
        }
      }
    }
  }
}