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 {

}