.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; }