yimei_spa/pages/vip/vip.wxss

.radius {
  border-radius: 24rpx;
  box-sizing: border-box;
  overflow: hidden;
}

.user-info {
  height: 160rpx;
  padding: 0 30rpx;
  background: #fff;
  align-items: center;
}

.user-info .icon-left {
  width: 96rpx;
  height: 96rpx;
  margin-right: 20rpx;
  border-radius: 50%;
}

.user-info .info {
  flex: 1;
}

.user-info .info.active .name {
  color: #FF660D;
}

.user-info .info .time {
  font-size: 28rpx;
  color: #888888;
  margin-top: 8rpx;
}

.user-info .icon-right {
  width: 48rpx;
  height: 48rpx;
}

.vip-box {
  padding: 18rpx 20rpx;
}

.vip-power {
  background: linear-gradient(133deg, #858585 0%, #D4D4D4 100%);
}

.vip-power.active {
  background: linear-gradient(131deg, #FFD04B 0%, #FFC329 100%);
}

.vip-power .icon-left {
  width: 120rpx;
  height: 120rpx;
  border: 2rpx solid #FFFFFF;
  border-radius: 50%;
}

.vip-power .vip-time {
  height: 64rpx;
  background: linear-gradient(298deg, #FFB16E 0%, #FF6D6D 100%);
}

.vip-power .vip-time image {
  width: 48rpx;
  height: 28rpx;
}

.vip-power .top {
  padding: 30rpx 32rpx;
  position: relative;
}

.vip-power .top .info {
  margin-left: 22rpx;
}

.vip-power .top .text {
  flex: 1;
  /* font-size: 28rpx; */
  color: #333333;
}

.vip-power .top .btn {
  width: 156rpx;
  height: 56rpx;
  background: #FA7D22;
  border-radius: 28px;
}

.vip-power .btn text {
  font-family: PingFangSC-Medium, PingFang SC;
  font-size: 24rpx;
  font-weight: 500;
  color: #FFFFFF;
}

.vip-power .icon-right {
  width: 16rpx;
  height: 16rpx;
}

.vip-power .intro {
  margin: 4rpx 0;
}

.vip-power .gender {
  width: 44rpx;
  height: 28rpx;
  background: #FFFFFF;
  border-radius: 14rpx;
}

.vip-power .gender image {
  width: 28rpx;
  height: 28rpx;
}

.vip-power .city {
  height: 28rpx;
  padding: 0rpx 10rpx;
  background: #FFFFFF;
  border-radius: 14rpx;
  font-size: 16rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
}

.vip-power .expire {
  position: absolute;
  right: 0;
  top: 0;
  width: 98rpx;
  height: 46rpx;
  font-size: 24rpx;
  background: #AAAAAA;
  border-radius: 0rpx 24rpx 0rpx 24rpx;
}

.vip-power .content {
  height: 148rpx;
  background: #fff;
  /* justify-content: space-around; */
  border-radius: 24rpx;
}

.vip-power .content .item {
  align-items: center;
  width: 33.33%;
}

.vip-power .content .item.line {
  border-right: 2rpx solid #EEEEEE;
  /* border-radius: 16rpx; */
}

.vip-power .content image {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 6rpx;
}

.vip-power .content text {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
}

.vip-toast {
  height: 168rpx;
  padding: 0 40rpx;
  background-color: #333333;
  position: relative;
}

.vip-toast image {
  width: 94rpx;
  height: 94rpx;
  /* border-radius: 50%; */
  /* background-color: red; */
}

.vip-toast .right {
  margin-left: 18rpx;
}

.vip-toast .right text {
  font-size: 28rpx;
  color: #FFFFFF;
}

.vip-toast .count-down {
  height: 40rpx;
  padding: 0 16rpx;
  background: linear-gradient(224deg, #FF8B8B 0%, #FF60A3 100%);
  border-radius: 0rpx 24rpx 0rpx 24rpx;
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
  font-size: 20rpx;
}

.vip-use {
  padding: 24rpx;
  background: #fff;
  margin-top: 20rpx;
}

.vip-use .item {
  /* width: 100%; */
  height: 114rpx;
  padding: 0rpx 24rpx;
  position: relative;
  border-radius: 20rpx;
  margin-top: 20rpx;
}

.vip-use .item:first-child {
  margin-top: 0;
}

.vip-use .use-btn image {
  width: 48rpx;
  height: 48rpx;
}

.vip-use .use-btn text {
  color: #333333;
  margin-left: 8rpx;
}

.vip-use .left {
  flex: 1;
}

.vip-use .item .left-title {
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
}

.vip-use .item .left-text {
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  margin-top: 10rpx;
}

.vip-use .item.red {
  background: linear-gradient(312deg, #FDB553 0%, #FDA659 100%);
  overflow: hidden;
}

.vip-use .item.red text {
  color: #fff !important;
}

.vip-use .item.red .left-box text {
  font-family: PingFangSC-Medium, PingFang SC;
}

.vip-use .item.red .left-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 54rpx;
  background: #FA7D22;
  border-radius: 20rpx 0rpx 20rpx 0rpx;
  padding: 0 20rpx;
}

.vip-use .item.red .left-box text {
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
}

.vip-use .item.red .left-text {
  margin-top: 54rpx;
}

.vip-use .right image {
  width: 40rpx;
  height: 40rpx;
}

.vip-use .right-box .min-price {
  font-size: 36rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FF2B00;
}

.vip-use .right-box .market-price {
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #CCCCCC;
  text-decoration: line-through;
}

.vip-rule {
  padding: 20rpx;
  background: #fff;
  margin-top: 20rpx;
  border-radius: 24rpx;
}

.vip-rule .title {
  font-size: 36rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
}

.vip-rule .content {
  margin-top: 30rpx;
}

.vip-rule .content .WxEmojiView {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 48rpx;
  text-align: left;
}

.buy {
  height: 170rpx;
  padding: 0 30rpx;
  background: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
}

.buy-btn {
  width: 338rpx;
  height: 84rpx;
  background: #FA7D22;
  border-radius: 42rpx;
  font-size: 32rpx;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #FFFFFF;
}

.use-popup {
  width: 558rpx;
  height: 614rpx;
  background: #FFFFFF;
  border-radius: 40rpx;
  justify-content: space-evenly;
}

.use-popup .red {
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #F64570;
}

.use-btn .btn {
  /* width: 208rpx; */
  height: 92rpx;
  margin: 0 48rpx;
  font-size: 36rpx;
  color: #FA7D22;
  border-radius: 52rpx;
  border: 2rpx solid #FA7D22;
}

.use-btn .confirm {
  margin-top: 28rpx;
  /* margin-left: 46rpx; */
  background-color: #FA7D22;
  color: #fff;
}

/* ============================================================================================ */

/* =============================================================================== */


.coupon-popup {
  height: 72vh;
}

.payType {
  height: 690rpx;
}

.coupon-popup .top {
  justify-content: center;
  padding: 0 48rpx;
  height: 112rpx;
}

.need-show-line{
  border-bottom: 2rpx solid #eee;
}

.coupon-popup .top text {
  font-size: 36rpx;
}

.coupon-popup .top .close-img {
  width: 56rpx;
  height: 56rpx;
  position: absolute;
  top: 28rpx;
  right: 32rpx;
}

.coupon-popup .list {
  height: 53vh;
  padding: 14rpx 30rpx;
  box-sizing: border-box;
  /* overflow-y: scroll; */
}

.coupon-popup .list .item {
  padding: 14rpx 0;
  height: 172rpx;
  /* border-bottom: 2rpx solid #eee; */
}

.coupon-popup .list .radio image {
  width: 48rpx;
  height: 48rpx;
}

.coupon-popup .list .coupon-item {
  display: block;
  margin-top: 10rpx;
}

.coupon-popup .item-left {
  width: 212rpx;
  height: 100%;
  font-family: PingFangSC-Semibold;
  color: #FFFFFF;
  font-size: 32rpx;
  border-top-left-radius: 16rpx;
  border-bottom-left-radius: 16rpx;
  background-image: radial-gradient(circle at 0px 50%, #fff 15rpx, #F5849F 15rpx);
}

.coupon-popup .item-left text {
  font-size: 36rpx;
  color: #fff;
  font-family: PingFangSC-Semibold, PingFang SC;
}

.coupon-popup .item-right {
  /* justify-content: center;
  align-items: flex-start; */
  padding: 0 30rpx;
  border-top-right-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.13);
}

.coupon-popup .item-right text {
  color: #000;
}

.coupon-popup-btm {
  height: 170rpx;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  background: #FFFFFF;
}

.coupon-popup-btm-btn {
  width: 100%;
  height: 84rpx;
  font-size: 32rpx;
  color: #FFFFFF;
  margin: 0 40rpx;
  background: #FA7D22;
  border-radius: 42rpx;
  font-family: PingFang-SC-Medium, PingFang-SC;
}

.btm-text {
  margin: 42rpx 0 120rpx;
}

.item-products-content::-webkit-scrollbar,
.scroll-x::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}



.moneyShow {
  width: 100%;
  text-align: center;
  font-weight: 500;
  font-size: 56rpx;
  color: #FF3007;
  height: 100rpx;
  line-height: 100rpx;
  margin-bottom: 100rpx;
}

.select-pay-methon {
  margin-bottom: 60rpx;
  width: 100%;
  display: flex;
  align-items: center;
}

.pay-img {
  width: 48rpx;
  height: 48rpx;
  margin-left: 30rpx;
}

.pay-title {
  margin-left: 20rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: #333333;
  flex: 1;
  text-align: left;
}

.pay-money {
  margin-right: 36rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
}

.pay-money text {
  font-size: 24rpx;
}

.select-activity {
  width: 48rpx;
  height: 48rpx;
  margin-right: 30rpx;
}

.moneyShow text{
  font-size: 28rpx;
  color: #FF3007;
}