challengeFamily/pages/sharingHome/index.wxss

.subtitleColor-bg {
  padding: 40rpx;
  position: relative;
}
.subtitleColor-bg .userInfo{
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.subtitleColor-bg .userInfo image{
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  flex-shrink: 0;
}
.subtitleColor-bg .userInfo .userName{
  color: #3E3A39;
  font-weight: 700;
  font-size: 40rpx;
  margin: 0 20rpx 0 40rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.subtitleColor-bg .userInfo .level{
  background: #fff;
  padding: 0 10rpx;
  color: #B3B3B4;
  border-radius: 40rpx;
  font-size: 24rpx;
  position: relative;
}
.subtitleColor-bg .userInfo .organTip{
  color: #EE3A43;
}
.subtitleColor-bg .userInfo .level .icon{
  position: absolute;
  bottom: -1rpx;
  left: 0rpx;
  font-size: 50rpx;
}
.subtitleColor-bg .userInfo .level text:first-child::before{
}
.subtitleColor-bg .userInfo .level text:last-child{
  margin-left: 40rpx;
  font-weight: 700;
}
.subtitleColor-bg .rule_ins{
  position: absolute;
  top: 20rpx;
  right: 40rpx;
  font-size: 22rpx;
  display: flex;
  align-items: center;
  color: #EE3A43;
}
.subtitleColor-bg .rule_ins .icon{
  font-size: 24rpx;
  margin-right: 10rpx;
}

.account-head,
.account-head>image {
  width: 128rpx;
  height: 128rpx;
  border-radius: 100%;
  margin: auto;
}


.modal-label .content {
  padding: 0;
}

.content-pading {
  padding: 20rpx;
  border-radius: 10rpx;
}

.cell {
  padding-left: 0;
}

/* .row-flex{padding:40rpx 0;} */
.title {
  text-align: center;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #eee;
}

.title .icon-yhq {
  font-size: 42rpx;
}

.icon-share::before {
  color: #EE3A43;
  font-size: 42rpx;
  vertical-align: top;
}
.sharer-status{
  color: #B3B3B4;
  margin-left: 10rpx;
}
/* .flex-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
} */

/* .share-status {
  background: #fff;
  color: gray;
  border-radius: 20rpx;
  padding: 0 20rpx;
  margin: 0 10rpx 0 36rpx;
} */

.pop_content {
  text-align: center;
  background: #fff;
  width: 500rpx;
  height: 300rpx;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 20px;
}

.btns {
  margin-top: 40rpx;
  background: #EE3A43;
  color: #fff;
  padding: 10rpx 60rpx;
  border-radius: 30rpx;
}

/* 新版 */
.bg {
  background: url('https://img.bbztx.com/image_test/upload/thumbs/20220810/logo/1660120145423086289.png') no-repeat;
  background-size: 100% auto;
}

.tab-row {
  display: flex;
  justify-content: space-around;
  margin: 20rpx 0 40rpx;
}

.tab-row .col {
  background: #EE3A43;
  border-radius: 15rpx;
  width: calc(33% - 10rpx);
  text-align: center;
  color: #fff;
  padding: 20rpx 0;

}

.tab-row .col .price text {
  font-size: 46rpx;
  font-weight: 700;
}

.share-num {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.share-num .share-num-item {
  width: calc(100%/3 - 4rpx);
  background: #fff;
  border-radius: 20rpx;
  text-align: center;
  padding: 20rpx 0;
}

.share-num .share-num-item .person text {
  font-size: 36rpx;
  font-weight: 700;
}

.row-flex .font12 text {
  font-weight: 700;
}

/* 分享家等级 */

.upgrade_ins {
  background-image: linear-gradient(to right, #f8b2b5, #fff4f4);
  font-weight: 300;
  padding: 0 20rpx;
  line-height: 45rpx;
  height: 45rpx;
  border-radius: 45rpx;
  font-size: 24rpx;
}

.share_title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.share_level>view {
  border-bottom: 1px solid #ccc;
  padding: 20rpx 0;
}

.share_level>view:last-child {
  border: none;
}

.next-level {}

.next-level .upgrade {
  display: inline-block;
  padding: 0 20rpx;
  background-image: linear-gradient(to right, #f8b2b5, #fff4f4);
  font-weight: 600;
  border-radius: 30rpx;
  line-height: 1.5;
}

.next-level .power {
  margin-top: 20rpx;
  line-height: 2.5;
  font-size: 26rpx;
}
.next-level .power .power_item>text{
  white-space: nowrap;
}
.next-level .power .icon{
  background:linear-gradient(to bottom,#f8b2b5,#fff4f4);
 -webkit-background-clip:text;
 color:transparent;
}

.method {}

.method .method_title {
  margin-bottom: 20rpx;
  font-weight: 600;
}

.method .method_ins {
  line-height: 1.5;
}

.method .step_line {
  position: relative;
  margin: 20rpx 0;
}

.method .step_line .line {
  height: 10rpx;
  background-image: linear-gradient(to left, #f8b2b5, #fff4f4);
  border-radius: 7rpx;
}

.method .step_line .cercle_box {
  width: 28rpx;
  height: 28rpx;
  border-radius: 50%;
  position: absolute;
  top: -8rpx;
  background-image: linear-gradient(to right, rgba(253, 158, 163, .7) 10%, rgba(253, 158, 163, .2) 80%);
  transition: left 1s;
}

.method .step_line .cercle_box .cercle {
  width: 14rpx;
  height: 14rpx;
  margin: 7rpx auto 0;
  border-radius: 50%;
  background-image: linear-gradient(to right, rgba(255, 132, 138), rgba(255, 132, 138, .2) 80%);
}

.method .tip {
  margin-top: 30rpx;
  font-size: 24rpx;
  color: #3E3A39;
}

.color_gray{
  color: #3E3A39;
}
/* 等级显示 */

  /* 分享家停用/机构停用 */
  .bg .subtitleColor-bg .userInfo .stop_user{
    background: none;
    border: 1px solid #B3B3B4;
    color: #B3B3B4 !important;
  }
  /* 普通 */
  .bg .subtitleColor-bg .userInfo .ordinary{
    color: #EE3A43;
  }
  /* 超级 */
  .bg .subtitleColor-bg .userInfo .super text:first-child{
    background: linear-gradient( 135deg , rgba(238,58,67,0.3) 40%, rgba(238,58,67) 52%,rgba(238,58,67,.3) 64%,rgba(238,58,67) 70%);
    -webkit-background-clip: text;
    color: transparent;
  }
  .bg .subtitleColor-bg .userInfo .super text:last-child{
    background-image: linear-gradient( 135deg , rgba(238,58,67) 35%, rgba(238,58,67,0.1) 38%,rgba(238,58,67) 41%,rgba(238,58,67) 73%,rgba(238,58,67,.1) 76%,rgba(238,58,67) 79%);
    -webkit-background-clip: text;
    color: transparent;
  }
  /* 金牌 */
  .bg .subtitleColor-bg .userInfo .gold text:first-child{
    background: linear-gradient( 135deg , rgba(239,175,46,0.3) 40%, rgba(239,175,46) 52%,rgba(239,175,46,.3) 64%,rgba(239,175,46) 70%);
    -webkit-background-clip: text;
    color: transparent;
  }
  .bg .subtitleColor-bg .userInfo .gold text:last-child{
    background-image: linear-gradient( 135deg , rgba(239,175,46) 35%, rgba(239,175,46,0.1) 38%,rgba(239,175,46) 41%,rgba(239,175,46) 73%,rgba(239,175,46,.1) 76%,rgba(239,175,46) 79%);
    -webkit-background-clip: text;
    color: transparent;
  }
  /* 银牌 */
  .bg .subtitleColor-bg .userInfo .silver text:first-child{
    background: linear-gradient( 135deg , rgba(143,143,143,0.3) 40%, rgba(143,143,143) 52%,rgba(143,143,143,.3) 64%,rgba(143,143,143) 70%);
    -webkit-background-clip: text;
    color: transparent;
  }
  .bg .subtitleColor-bg .userInfo .silver text:last-child{
    background-image: linear-gradient( 135deg , rgba(143,143,143) 35%, rgba(143,143,143,0.1) 38%,rgba(143,143,143) 41%,rgba(143,143,143) 73%,rgba(143,143,143,.1) 76%,rgba(143,143,143) 79%);
    -webkit-background-clip: text;
    color: transparent;
  }
  /* 铜牌 */
  .bg .subtitleColor-bg .userInfo .copper text:first-child{
    background: linear-gradient( 135deg , rgba(232,147,63,0.3) 40%, rgba(232,147,63) 52%,rgba(232,147,63,.3) 64%,rgba(232,147,63) 70%);
    -webkit-background-clip: text;
    color: transparent;
  }
  .bg .subtitleColor-bg .userInfo .copper text:last-child{
    background-image: linear-gradient( 135deg , rgba(232,147,63) 35%, rgba(232,147,63,0.1) 38%,rgba(232,147,63) 41%,rgba(232,147,63) 73%,rgba(232,147,63,.1) 76%,rgba(232,147,63) 79%);
    -webkit-background-clip: text;
    color: transparent;
  }