twong329/view/xcx/pages/user_vip/index.wxss

.member-center .header {
  background-color: #232323;
  width: 100%;
  padding: 50rpx 0;
}

.member-center .header swiper {
  width: 100%;
  height: 328rpx;
  position: relative;
}

.member-center .header swiper-item .memberBg.active {
  transform: none;
  transition: all 0.2s ease-in 0s;
}

.member-center .header swiper-item .memberBg.quiet {
  transform: scale(0.9);
  transition: all 0.2s ease-in 0s;
}

.member-center .header swiper-item .memberBg {
  width: 100%;
  height: 328rpx;
  border-radius: 16rpx;
  color: #fff;
  position: relative;
  background-size: 100% 100%;
}

.member-center .header swiper-item .memberBg image {
  width: 89rpx;
  height: 108rpx;
  display: block;
  position: absolute;
  right: 60rpx;
}

.member-center .header swiper-item .memberBg .name {
  font-size: 46rpx;
  font-weight: bold;
  padding: 40rpx 0 0 35rpx;
}

.member-center .header swiper-item .memberBg .discount {
  font-size: 28rpx;
  font-weight: bold;
  margin: 15rpx 0 0 35rpx;
}

.member-center .header swiper-item .memberBg .discount .iconfont {
  margin-left: 10rpx;
  font-size: 30rpx;
}

.member-center .header swiper-item .memberBg .nav {
  margin-top: 55rpx;
}

.member-center .header swiper-item .memberBg .nav .item {
  flex: 1;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  position: relative;
}

.member-center .header swiper-item .memberBg .nav .item .num {
  font-size: 40rpx;
  color: #fff;
  font-family: 'Guildford Pro';
}

.member-center .header swiper-item .memberBg .nav .item ~ .item::before {
  position: absolute;
  width: 2rpx;
  height: 32rpx;
  background-color: rgba(255, 255, 255, 0.6);
  content: '';
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.member-center .header swiper-item .memberBg .lock {
  font-size: 26rpx;
  margin: 73rpx 0 0 35rpx;
}

.member-center .header swiper-item .memberBg .lock .iconfont {
  font-size: 37rpx;
  margin-right: 15rpx;
  vertical-align: -4rpx;
}

.member-center .wrapper {
  background-color: #fff;
  padding-bottom: 16rpx;
  margin-bottom: 20rpx;
}

.member-center .wrapper .title {
  height: 98rpx;
  padding: 0 30rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #282828;
}

.member-center .wrapper .title .iconfont {
  color: #ffae06;
  font-weight: normal;
  font-size: 40rpx;
  margin-right: 12rpx;
  vertical-align: -2rpx;
}

.member-center .wrapper .title .num {
  font-size: 28rpx;
  color: #999;
}

.member-center .wrapper .title .num .current {
  color: #ffae06;
}

.member-center .wrapper .list .item {
  width: 690rpx;
  height: 184rpx;
  background-color: #f9f9f9;
  margin: 0 auto 20rpx auto;
  padding: 27rpx 0 22rpx 0;
  border-radius: 12rpx;
  box-sizing: border-box;
}

.member-center .wrapper .list .item .top {
  padding-right: 27rpx;
  font-size: 26rpx;
  color: #999;
}

.member-center .wrapper .list .item .top .name {
  border-left: 6rpx solid #ffae06;
  padding-left: 20rpx;
  font-size: 28rpx;
  color: #282828;
  font-weight: bold;
}

.member-center .wrapper .list .item .top .name .iconfont {
  color: #999;
  font-size: 30rpx;
  vertical-align: -2rpx;
  margin-left: 10rpx;
}

.member-center .wrapper .list .item .cu-progress {
  overflow: hidden;
  height: 12rpx;
  background-color: #eee;
  width: 636rpx;
  border-radius: 20rpx;
  margin: 35rpx auto 0 auto;
}

.member-center .wrapper .list .item .cu-progress .bg-red {
  width: 0;
  height: 100%;
  transition: width 0.6s ease;
  background-color: #ffaa29;
  border-radius: 20rpx;
}

.member-center .wrapper .list .item .experience {
  margin-top: 17rpx;
  padding: 0 27rpx;
  font-size: 24rpx;
  color: #999;
}

.member-center .wrapper .list .item .experience .num {
  color: #ffad07;
}

.member-center .growthValue {
  background-color: #fff;
  border-radius: 16rpx;
  position: fixed;
  top: 266rpx;
  left: 50%;
  width: 560rpx;
  height: 740rpx;
  margin-left: -280rpx;
  z-index: 99;
  transform: translate3d(0, -200%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.member-center .growthValue.on {
  transform: translate3d(0, 0, 0);
}

.member-center .growthValue .pictrue {
  width: 100%;
  height: 257rpx;
  position: relative;
}

.member-center .growthValue .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 16rpx 16rpx 0 0;
}

.member-center .growthValue .conter {
  padding: 0 35rpx;
  font-size: 30rpx;
  color: #333;
  margin-top: 58rpx;
  line-height: 1.5;
  height: 350rpx;
  overflow: auto;
}

.member-center .growthValue .pictrue .iconfont {
  position: absolute;
  font-size: 65rpx;
  color: #fff;
  top: 775rpx;
  left: 50%;
  transform: translateX(-50%);
}