JinanGMLS/front/src/pages/components/Left/index.module.scss

.Left {
  position: absolute;
  left: 0;
  top: 0;
  width: 384px;
  height: 100%;
  padding: 20px;
  transition: all 0.5s ease-in-out;
  :global {
    .infoContainer {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      background: url('../../../assets/img/infoContainerBg.png') no-repeat 100% 100%;
      border-radius: 20px;
      padding: 20px;
      .topInfo {
        display: flex;
        width: 100%;
        height: 20%;
        gap: 16px;
        .finding,
        .found {
          width: 50%;
          height: 100%;
          display: flex;
          flex-direction: column;
          border-radius: 10px;
          background: url('../../../assets/img/foundBg.png') no-repeat center;
          .title {
            width: 100%;
            height: 65%;
            color: #fff;
            font-weight: 600;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            & > img {
              height: 70px;
              object-fit: none;
            }
          }
          .num {
            height: 0;
            width: 100%;
            color: #fff;
            font-weight: 600;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }

      .mainInfoBox {
        padding: 20px;
        border-radius: 10px;
        background: url('../../../assets/img/mainInfoBoxBg.png') no-repeat 100% 100%;
        height: 80%;
        width: 100%;
        .tab {
          display: flex;
          align-items: center;
          gap: 10px;
          width: 100%;
          height: 30px;
          margin-bottom: 20px;
          font-size: 20px;
          font-weight: 500;
          & > div {
            padding-bottom: 5px;
          }
          .active {
            font-weight: 600;
            padding-bottom: 1px;
            border-bottom: 4px solid;
          }
        }
        .mainInfoListBox {
          position: relative;
          display: flex;
          width: 100%;
          height: calc(100% - 50px);
          .slide {
            position: absolute;
            left: -20px;
            width: 20px;
            height: 100%;
            background: url(../../../assets/img/slide.png) no-repeat 100% 100%;
          }
          .mainInfoList {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            gap: 10px;
            &::-webkit-scrollbar {
              display: none; /* 隐藏滚动条 */
            }
            .mainInfo {
              width: 100%;
              height: fit-content;
              padding: 16px;
              border-radius: 10px;
              background: #ecd5d1;
              display: flex;
              flex-direction: column;
              gap: 10px;
              .labelList {
                display: flex;
                gap: 10px;
                height: 35px;
                .label {
                  width: 95px;
                  height: 100%;
                  font-size: 13px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: url('../../../assets/img/label.png');
                  background-size: cover;
                }
              }
              .name {
                font-weight: 600;
                font-size: 20px;
                width: 100%;
                height: 30px;
              }
              .content {
                word-break: break-word;
              }
              .media {
                width: 100%;
                height: fit-content;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 3px;
                video {
                  width: 32%;
                  height: 70px;
                  object-fit: cover;
                  cursor: pointer;
                }
              }
            }
            .ant-pagination {
              margin: 0 auto;
            }
          }
        }
      }
    }
  }
}