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

@import "../scssCommon";

.followAreaShow {
  margin-top: 10px;
  .topArea {
    position: relative;
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
  }

  .contentArea {
    background-color: #fff;
    width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;

    .selectArea {
      width:1000px;
      height:50px;
      background:rgba(255,255,255,1);
      box-shadow:0px 0px 0px 0px rgba(243,243,243,1);
      display: flex;
      justify-content: center;
      align-items: center;

      .myFollow, .myFans {
        height: 50px;
        position: relative;
        cursor: pointer;
        p {
          height:50px;
          font-size:16px;
          font-weight:400;
          color:rgba(34,34,34,1);
          line-height:50px;
        }
        &.selected {
          p {
            font-weight:600;
            color:rgba(34,34,34,1);
          }
          &:after {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            content: '';
            width:30px;
            height:3px;
            background:rgba(48,142,255,1);
            border-radius:2px;
          }
        }
      }

      .myFans {
        margin-left: 78px;
      }

    }

    .listArea {
      margin-top: 17px;

      .list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .cell {
          width:300px;
          height:165px;
          background:rgba(255,255,255,1);
          box-shadow:0px 3px 12px 0px rgba(8,27,50,0.05);
          border:1px solid rgba(0,0,0,0.05);
          padding: 20px 15px 13px 15px;
          margin: 20px 0 0 20px;
          cursor: pointer;


          &:nth-child(3n+1) {
            margin-left: 30px;
          }

          .topContent {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
              height:24px;
              font-size:17px;
              font-weight:500;
              color:rgba(17,17,17,1);
              line-height:24px;
            }
            .right {
              height:18px;
              font-size:14px;
              font-weight:400;
              color:rgba(153,153,153,1);
              line-height:18px;
            }
          }
          .descContent {
            margin-top: 10px;
            width:100%;
            height:36px;
            font-size:14px;
            font-weight:400;
            color:rgba(102,102,102,1);
            line-height:18px;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
          .bottomContent {
            margin-top: 25px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid rgba(#979797, 0.1);
            padding-top: 7px;

            .left {
              background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAELklEQVRoQ+1YXWgcVRQ+545L2iZpdypqxRdFUfRJ86CIIKb4hy0qCGtKgiFx7r31B0XER5/0yQdB8af33k1CJcG6IKhY8Y8qIoh9sD4pUqRPYlV00zZJhd25R6bMhtlhk707OyENzjzee853zne/OWfOXIQt/uAWzx8KAputYC4KKKVKnufdHobhNYi43YUUEZ33PO9UGIbfSSkbLj6dbPomYIw5QESvEdFlWZJAxL8Q8VnO+buZ/LM4tXy01oeJ6LF+MFq+iPiOEGKyV6zMChhjpqy1s6mAZxBx0SUJIioDwK6kLWNsmnM+5+K/SrwX45ZtrVbbXq/XTwPAznjtN8bYBOf8617wjDF3WWvnAeCq2O+s7/t7KpXKeVecTAoope4FgM9aQRhj+zjnn7gGTdoppfYBwMeJtfuklJ+7YmUiYIx53FpbjYIgIpVKpR1TU1P/ugZN2s3NzW1rNBorRHQhF8ZYwDmfccXKREBrfZCI3o4JhEKIS1wDdrLTWjeJyIvxnhBCHHLFW5NAtVrdba09QkQjiNhmR0TbAGBHooP84xqwkx0R7U6sryBim5oUyYN4YmBgYGxycvLvJMaaBJRSzwHAq/0klrcvIj4vhGjLaT0F7gzD8Kvotcw7kYx41vO80SAIvnFSIDKanZ29qdFo3JwxYK5upVLpx+np6Z/SoJmKONfM+gT7fxFQSr2IiHcg4uudPlxExLTWLwHACAC8IqWMamj1Mcbstda+AAA/CCEiLJsWwBjzABE9AwDfCiFe7iaQswJKqVEAOBb36nPlctmvVCphMoDW+kEi+jC2+UMIsSe1f5qIroj3HxJCfJTcr9Vq3uLiYp2IhqN1xthot/HEmYDWeoyIVkde3/eHK5XKUipBTkS6tSalbMNXSlHi2yGEECZFYKher59L2BwQQhxZT4WCQKFA4gRqtVrxCq1ZL0URA0DRhTq8H0UbLdroxdRGk/MSAJyUUl6fUugkEV0Xr+1ND3ub/h2IElNKRbdrI4yxQ5zzn1PT6I3W2oPRNCqlPJyuyZmZmeFms3l202ahbqNvt/2LQoFuSa63XxBY73RcRol+Tj/y3VAFjDGPRhddrSQHBwd3TUxMrBZcv8lH/vPz8zuXl5fPtLAYY2Oc8/fy+qG5m4i+aIF5nndbEATH80i8hVGtVm8Nw/D7RBe6RwjxZS4EFhYW/KWlpT8B4MI9KCIeK5fL+3u5Cu9SwNGV/VEAiP69o6c5NDR0+fj4eD0XAnGPfwMAnkqc0CkAOEpEbfeVvaqCiJcS0X4AuDrh+6aU8uluWM7DXFxk0SmdAIAbugH3uf+L7/u3uKjbE4FYhSsB4C0AeLjPJNdy/wAAnpRS/u6C3zOBRMHdH4bhIwBwbfKq3SVoB5sVAPjV87z3gyD4tBeMzAR6CbKRtgWBjTxdF+wtr8B/X6XmT6eAiZcAAAAASUVORK5CYII=") no-repeat;
              background-size: cover;
              width: 24px;
              height: 24px;

              &.none {
                visibility: hidden;
              }
            }
            .right {
              width:32px;
              height:32px;
              font-size: 0;
              img {
                border-radius: 50%;
                width:32px;
                height:32px;
              }
            }
          }
        }
        .noneData {
          min-height: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 auto;
          p {
            text-align: center;
          }
        }
      }
    }
  }

  .pagination {
    padding: 50px;
    box-sizing: content-box;
    text-align: center;
  }

}

.followAreaShowMobile {
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  a {
    display: block;
  }
  .selectArea {
    width:100vw;
    height:pxtovw(45);
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 0px 0px rgba(243,243,243,1);
    display: flex;
    justify-content: center;
    align-items: center;

    .myFollow, .myFans {
      height: 100%;
      position: relative;
      cursor: pointer;
      p {
        height:pxtovw(45);
        font-size:pxtovw(15);
        font-weight:400;
        color:rgba(136,136,136,1);
        line-height:pxtovw(45);
      }
      &.selected {
        p {
          font-weight:600;
          color:rgba(34,34,34,1);
        }
        &:after {
          position: absolute;
          bottom: pxtovw(2);
          left: 50%;
          transform: translateX(-50%);
          content: '';
          width:pxtovw(15);
          height: pxtovw(3);
          background:rgba(48,142,255,1);
          border-radius:pxtovw(2);
        }
      }
    }

    .myFans {
      margin-left: pxtovw(75);
    }

  }

  .listArea {
    height: calc(100vh - 12vw);
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #f6f5f8;
    -webkit-overflow-scrolling: touch;

    &.noneInWx {
      height: calc(100vh - 12vw - 64px);
    }

    .list {
      margin-top: pxtovw(4);
      .cell {
        width: 100%;
        .cellContent {
          background: #FFF;
          display: flex;
          justify-content: center;
          align-items: center;
          height: pxtovw(75);
          width: 100%;
          padding: 0 pxtovw(10);

          .left {
            flex-shrink: 0;
            width: pxtovw(47);
            height: pxtovw(47);
            font-size: 0;
            img {
              width: pxtovw(47);
              height: pxtovw(47);
              border-radius: 50%;
            }
          }

          .right {
            flex-grow: 1;
            margin-left: 10px;
            height: pxtovw(75);
            display: flex;
            flex-direction: column;
            align-items: center;
            border-bottom: 1px solid rgba(#979797, 0.1);
            padding: pxtovw(14) 0;
            .topContent {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .leftC {
                height:pxtovw(21);
                font-size:pxtovw(15);
                font-weight:600;
                color:rgba(51,51,51,1);
                line-height:pxtovw(21);
              }
              .rightC {
                height:pxtovw(16);
                font-size: pxtovw(11);
                font-weight:400;
                color:rgba(153,153,153,1);
                line-height:pxtovw(16);
              }
            }
            .descContent {
              margin-top: pxtovw(3);
              width: pxtovw(290);
              height:pxtovw(18);
              font-size:pxtovw(13);
              font-family:PingFangSC-Regular,PingFang SC;
              font-weight:400;
              color:rgba(102,102,102,1);
              line-height:pxtovw(18);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: keep-all;
            }
          }

        }
      }
      .noneData {
        min-height: pxtovw(100);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 0 auto;
        p {
          text-align: center;
        }
      }
    }
  }
}

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