proginn-frontend/assets/css/user/collection.scss

@import "../scssCommon";


.main {
  margin-top: 0 !important;
  &.isMobile {
    width: 100vw;
  }
}

.collectionCenter {
  width: 1000px;
  margin: 16px auto 40px auto !important;
  display: flex;

  .leftContent {
    width:174px;
    height:402px;
    background:rgba(255,255,255,1);

    .stitle {
      height: 80px;
      width:100%;
      font-size:18px;
      font-weight:600;
      color:rgba(51,51,51,1);
      line-height:80px;
      text-align: center;
    }
    .sList {
      .cell {
        width:174px;
        height:40px;
        text-align: center;
        font-size:15px;
        font-weight:400;
        line-height:40px;
        background: #fff;
        color: #333;
        &.selected {
          background:rgba(247,247,247,1);
          color:rgba(0,147,253,1);
        }
      }
    }
  }
  .rightContent {
    margin-left: 10px;
    width:816px;
    .topSelectArea {
      width:816px;
      height:84px;
      background:rgba(255,255,255,1);
      padding: 24px;

      .list {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        .cell {
          margin-left: 8px;
          width:88px;
          height:36px;
          border-radius:2px;
          border:1px solid rgba(239,239,239,1);
          font-size:13px;
          font-weight:400;
          color:rgba(85,85,85,1);
          line-height:36.1px;
          text-align: center;
          cursor: pointer;
          user-select: none;

          &:nth-child(1) {
            margin-left: 0;
          }

          &.selected {
            border:1px solid rgba(48,142,255,1);
            font-weight:500;
            color:rgba(48,142,255,1);
          }
        }
      }
    }

    .bodyArea {
      width:816px;
      margin-top: 10px;
      min-height: 500px;

      .list {
        .cell {
          width:816px;
          height:164px;
          background:rgba(255,255,255,1);
          box-shadow:1px 0px 0px 0px rgba(0,0,0,0.1);
          padding: 25px 20px;
          border-bottom: 1px solid rgba(0,0,0,0.1);

          display: flex;
          align-items: center;
          position: relative;

          .left {
            width:114px;
            height:114px;
            font-size: 0;
            flex-shrink: 0;
            img {
              width:114px;
              height:114px;
              border-radius:2px;
            }
          }
          .right {
            width: 100%;
            margin-left: 10px;

            .ctitle {
              width: 528px;
              height:25px;
              font-size:18px;
              font-weight:400;
              color:rgba(17,17,17,1);
              line-height:25px;
              overflow: hidden;
              word-break: keep-all;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .links {
              margin-top: 8px;
              width:528px;
              height:36px;
              font-size:13px;
              font-weight:400;
              color:rgba(153,153,153,1);
              line-height:18px;
              text-align: left;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
            .timeArea {
              margin-top: 20px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 100%;
              .time {
                height:18px;
                font-size:13px;
                font-weight:400;
                color:rgba(153,153,153,1);
                line-height:18px;
              }
              .laber {
                border-radius:1px;
                border:1px solid rgba(48,142,255,1);
                padding: 4px 15px;
                box-sizing: content-box;
                font-size:11px;
                font-weight:500;
                color:rgba(48,142,255,1);
                line-height:16px;
                cursor: pointer;
              }
            }
          }
          .delIcon {
            content: "";
            position: absolute;
            right: 20px;
            top: 25px;
            width: 14px;
            height: 14px;
            background: url('~@/assets/img/user/icon_del@2x.png') no-repeat;
            background-size: cover;
            cursor: pointer;
          }
        }
      }

      .emptyBlock {
        height: 500px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: #fff;
        img {
          width: 154px;
          height: 154px;
        }
        p {
          height:20px;
          font-size:14px;
          font-weight:400;
          color:rgba(153,153,153,1);
          line-height:20px;
        }
      }

      .pagination {
        padding: 30px 0;
        width: 100%;
        text-align: center;
        background-color: #fff;
        box-sizing: content-box;
      }
    }
  }
}

.collectionCenterMobile {
  .topSelectArea {
    width: 100vw;
    height: pxtovw(45);
    overflow: hidden;

    .topSelectAreaScroll {
      width: 100vw;
      height: pxtovw(55);
      background:rgba(255,255,255,1);
      overflow-x: scroll;
      overflow-y: hidden;
      .list {
        width: fit-content;
        min-width: 100%;
        display: flex;
        align-items: center;
        .cell {
          flex-shrink: 0;
          margin-left: pxtovw(24);
          height: pxtovw(45);
          font-size: pxtovw(15);
          font-weight:400;
          color:rgba(136,136,136,1);
          line-height: pxtovw(45);
          text-align: center;
          cursor: pointer;
          user-select: none;
          position: relative;
          word-break: keep-all;
          white-space: nowrap;

          &:nth-child(1) {
            margin-left: pxtovw(18);
          }
          &:last-child {
            margin-right: pxtovw(30);
          }

          &.selected {
            font-weight:500;
            color:rgba(34,34,34,1);

            &:after {
              position: absolute;
              content: "";
              left: 50%;
              bottom: pxtovw(4);
              transform: translate(-50%, -50%);
              width:pxtovw(15);
              height: pxtovw(3);
              background:rgba(48,142,255,1);
              border-radius: pxtovw(2);
            }
          }
        }
      }
    }
   }

  .listArea {
    width: 100%;
    margin-top: pxtovw(10);
    min-height: pxtovw(500);

    .list {
      .cell {
        .cellContent {
          width: 100vw;
          height: pxtovw(116);
          background:rgba(255,255,255,1);
          padding: pxtovw(13) pxtovw(10);
          border-bottom: 1px solid rgba(0,0,0,0.1);
          display: flex;
          align-items: center;
          position: relative;
          .left {
            width: pxtovw(90);
            height: pxtovw(90);
            font-size: 0;
            flex-shrink: 0;
            img {
              width: pxtovw(90);
              height: pxtovw(90);
              border-radius: pxtovw(2);
            }
          }
          .right {
            width: 100%;
            margin-left: 10px;

            .ctitle {
              width: pxtovw(247);
              height: pxtovw(21);
              font-size: pxtovw(15);
              font-weight:400;
              color:rgba(17,17,17,1);
              line-height: pxtovw(21);
              overflow: hidden;
              word-break: keep-all;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            .links {
              margin-top: pxtovw(4);
              width: pxtovw(255);
              height: pxtovw(32);
              font-size: pxtovw(11);
              font-weight:400;
              color:rgba(153,153,153,1);
              line-height: pxtovw(16);
              text-align: left;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
            .timeArea {
              margin-top: pxtovw(10);
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 100%;
              .time {
                height: pxtovw(18);
                font-size: pxtovw(13);
                font-weight: 400;
                color: rgba(153,153,153,1);
                line-height: pxtovw(18);
              }
              .laber {
                border-radius:1px;
                border:1px solid rgba(48,142,255,1);
                padding: pxtovw(3) pxtovw(14);
                box-sizing: content-box;
                height: pxtovw(16);
                font-size: pxtovw(11);
                font-weight:500;
                color:rgba(48,142,255,1);
                line-height: pxtovw(16);
                cursor: pointer;
              }
            }
          }
        }
      }
    }

    .emptyBlock {
      height: calc(100vh - 55px);
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-color: #fff;
      img {
        width: pxtovw(114);
        height: pxtovw(114);
      }
      p {
        height: pxtovw(20);
        font-size: pxtovw(14);
        font-weight:400;
        color:rgba(153,153,153,1);
        line-height: pxtovw(20);
      }
    }
  }
}