fohow_xcx/packageUser/pages/user/invite/rank/rank.wxss

.bg {
  position: relative;
  width: 100%;
  min-height: 100%;
  background-color: #ffe3dc;
}
.year {
  width: 670rpx;
  margin: 0 auto;
  background-color: #fff;
  padding: 0 20rpx;
  border-radius: 8rpx;
}
.year-top {
  position: relative;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 28rpx;
  color: #4c4c4c;
  text-align: center;
  border-bottom: 1rpx solid #dddddd;
  font-weight: bold;
}
.year-top__left {
  position: absolute;
  left: 0;
  top: 0;
  margin-left: 10rpx;
  font-weight: normal;
}
.year-top__nolefticon {
  float: left;
  width: 36rpx;
  height: 36rpx;
  margin-top: 32rpx;
  background-image: url('https://fohow.oss-cn-shenzhen.aliyuncs.com/static/rank/right.png');
  transform: rotate(180deg);
  background-size: 100% 100%;
}
.year-top__lefticon {
  float: left;
  width: 36rpx;
  height: 36rpx;
  margin-top: 32rpx;
  background-image: url('https://fohow.oss-cn-shenzhen.aliyuncs.com/static/rank/left.png');
  background-size: 100% 100%;
}
.year-top__leftyear {
  float: left;
  padding-left: 20rpx;
  color: #4c4c4c;
  font-size: 28rpx;
  line-height: 100rpx;
}
.year-top__right {
  position: absolute;
  right: 0;
  top: 0;
  margin-right: 10rpx;
  font-weight: normal;
}
.year-top__norighticon {
  float: right;
  width: 36rpx;
  height: 36rpx;
  margin-top: 32rpx;
  background-image: url('https://fohow.oss-cn-shenzhen.aliyuncs.com/static/rank/left.png');
  transform: rotate(180deg);
  background-size: 100% 100%;
}
.year-top__righticon {
  float: right;
  width: 36rpx;
  height: 36rpx;
  margin-top: 32rpx;
  background-image: url('https://fohow.oss-cn-shenzhen.aliyuncs.com/static/rank/right.png');
  background-size: 100% 100%;
}
.year-top__rightyear {
  float: right;
  padding-right: 20rpx;
  color: #4c4c4c;
  font-size: 28rpx;
  line-height: 100rpx;
}
.year-main {
  padding-bottom: 20rpx;
}
.year-text {
  line-height: 24rpx;
  font-size: 24rpx;
  color: #999999;
  text-align: center;
  padding-top: 40rpx;
  padding-bottom: 10rpx;
}
.year-price {
  text-align: center;
  padding-top: 20rpx;
  padding-bottom: 30rpx;
  font-size: 48rpx;
  color: #f45656;
}
.year-about {
  width: 650rpx;
  padding: 10rpx;
  font-size: 24rpx;
  line-height: 42rpx;
  background-color: #f1f5f9;
  color: #999999;
}
.myself {
  position: relative;
  width: 710rpx;
  color: #eab86a;
  margin: 20rpx auto 0;
  padding-bottom: 30rpx;
  background-color: #fff;
  border-radius: 8rpx;
  font-size: 36rpx;
}
.myself-top {
  line-height: 120rpx;
}
.myself-title {
  float: left;
  margin-left: 30rpx;
  font-size: 24rpx;
  color: #999999;
}
.myself-rank {
  float: right;
  font-size: 36rpx;
  margin-right: 30rpx;
  color: #eab86a;
}
.myself-btn {
  width: 432rpx;
  height: 72rpx;
  line-height: 72rpx;
  text-align: center;
  margin: 0 auto;
  border-radius: 72rpx;
  color: #ffffff;
  font-size: 28rpx;
  background: -webkit-linear-gradient(#ff9b74, #ff5c5c);
  background: linear-gradient(#ff9b74, #ff5c5c);
}
.rank {
  width: 670rpx;
  margin: 20rpx auto 20rpx;
  background-color: #fff;
  padding: 0 20rpx;
  border-radius: 8rpx;
}
.rank-top {
  height: 305rpx;
  border-bottom: 1rpx solid #dddddd;
}
.rank-top__title {
  padding-top: 40rpx;
  padding-bottom: 30rpx;
  font-size: 28rpx;
  line-height: 28rpx;
  color: #4c4c4c;
  text-align: center;
}
.rank-top__head {
  width: 120rpx;
  height: 120rpx;
  display: block;
  margin: 0 auto;
  border-radius: 100%;
}
.rank-top__nohead {
  position: relative;
  width: 120rpx;
  height: 120rpx;
  display: block;
  margin: 0 auto;
  border-radius: 100%;
  background-color: #eeeeee;
}
.rank-top__none {
  position: absolute;
  left: 35rpx;
  top: 26rpx;
  width: 49rpx;
  height: 69rpx;
  background-image: url('https://fohow.oss-cn-shenzhen.aliyuncs.com/static/rank/none.png');
  background-size: 100% 100%;
}
.rank-top__name {
  line-height: 28rpx;
  text-align: center;
  padding: 20rpx 0;
  color: #999999;
  font-size: 28rpx;
}
.rank-title {
  font-size: 24rpx;
  color: #999999;
  padding-bottom: 10rpx;
}
.rank-title__left {
  float: left;
  line-height: 64rpx;
}
.rank-title__right {
  float: right;
  line-height: 64rpx;
}
.rank-list {
  padding-bottom: 30rpx;
}
.rank-list__head {
  float: left;
  width: 88rpx;
  height: 88rpx;
  display: block;
  border-radius: 100%;
}
.rank-list__name {
  float: left;
  padding-left: 17rpx;
  line-height: 88rpx;
  width: 330rpx;
  font-size: 28rpx;
  color: #4c4c4c;
}
.rank-list__price {
  float: right;
  /* line-height: 88rpx; */
  font-size: 36rpx;
  color: #eab86a;
}
.rank-title__time {
  float: right;
  /* line-height: 44rpx; */
  font-size: 24rpx;
  color: #999;
}