MoeNovaClient/pages/my/follow.scss

.page {
  min-height: 100vh;
  background-color: #fff;
  padding-top: 10px;
}

.tabs {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  width: 246rpx;

  .tab {
    position: relative;
    width: 96rpx;
	height: 48rpx;
    font-size: 32rpx; 
      color: #999;
      font-weight: 400;
      transition: all .5s;
    &.active {
	  font-family: 'PingFang SC-Bold';  
		color: #1F1F1F;
		background: url("../../static/me/wd_img_qiehuan.png") center / cover no-repeat;
       
    }
  }
}

.follow-list {
  padding: 0 20px;

  .follow-item {
    display: flex;
    align-items: center;
    padding: 15px 0;

    .avator {
     width: 120rpx ;
	 height: 120rpx ;
	 margin-right: 24rpx;
    }

    .info {
      flex: 1;
      .top-box {
        display: flex;
        align-items: center;
        .name {
          font-size: 32rpx;
          font-weight: 500;
          margin-bottom: 8rpx;
        }
        > image {
          width: 36rpx;
          margin-left: 8rpx;
          margin-right: 10rpx;
        }
        .level {
          font-weight: 400;
          font-size: 20rpx;
          font-family: "PingFang SC-Bold";
          background: linear-gradient(360deg, #acf934 0%, #ffe439 100%);
          border-radius: 8rpx;
          padding: 2rpx 8rpx;
          display: inline-block;
          margin-left: 10rpx;
        }
      }
      .desc {
        font-size: 24rpx;
        color: #999;
      }
    }

    .unfollow-btn {
      font-size: 24rpx;
	  width: 144rpx;
	  height: 52rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
      color: #666;
      background: none;
      border: 2rpx solid #000;
      border-radius:12rpx; 
      margin: 0;
	  font-family: 'PingFang SC-Bold';
	  image{
		display: none;
		width: 16rpx;
		height: 16rpx;
		margin-right: 5rpx;
	  }
      &.active {
        color: #ACF934;
		background: #000;
		image{
			display: inline-block;
		}
      }
    }
  }
}