.buy-member-page{ /* height: 100vh; */ /* background: #2E3235; */ /* padding:34rpx 30rpx; */ } .member-top{ background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/member-pay-bg.png') no-repeat center top; background-size: 100%; height: 560rpx; width:750rpx; padding:30rpx 36rpx 0; } .member-type{ display: flex; justify-content:space-between; } .type-item{ height:262rpx; width:212rpx; display: flex; flex-direction: column; align-items: center; background: #2E3235; /* border: 2rpx solid #E6C162; */ /* border-image: linear-gradient(0deg, #F1E3C8, #E6C162) 10 10; */ border-radius: 12rpx; /* padding:20rpx 0 0; */ overflow:hidden; } .member-type-img{ height:262rpx; width:212rpx; border-radius: 10rpx; } .type-item.type-active{ /* background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/member/member-type.png') no-repeat center top; background-size: 100% 100%; */ border:2rpx solid #fff; } .member-icon{ width:84rpx; height:84rpx; } .member-title{ margin:16rpx 0 0; } .member-title,.type-name{ color: #5D3A11; font-style: 24rpx; line-height: 28rpx; background: linear-gradient(180deg, #F1E3C8 0%, #E6C162 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .type-price{ font-size: 26rpx; color: #E6C162; height: 60rpx; line-height: 60rpx; margin: 10rpx 0 4rpx; } .type-price text{ font-size: 68rpx; font-weight: bold; } .type-item.type-active .member-title,.type-item.type-active .type-name{ color: #5D3A11; background: #5D3A11; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .type-item.type-active .type-price{ color: #5D3A11; background: #5D3A11; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .old-price{ text-decoration: line-through; color: #85868A; font-size: 20rpx; line-height: 20rpx; margin:6rpx 0 0; } .type-convert{ color: #5D3A11; background: linear-gradient(180deg, #F1E3C8 0%, #E6C162 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 40rpx; line-height: 44rpx; font-weight: bold; margin:36rpx 0 24rpx; } .vip-tips{ color: #85868A; font-size: 20rpx; line-height: 20rpx; } .type-item.type-active .type-convert{ color: #5D3A11; background: #5D3A11; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .type-item.type-active .vip-tips{ color: #5D3A11; } /* 卡内权益 */ .card-benefit{ width: 690rpx; height: 238rpx; background: #3D4144; border-radius: 10rpx; padding:22rpx 14rpx; margin:32rpx 0; } .benefit-title{ font-size: 24rpx; line-height: 24rpx; margin:0 0 28rpx 0; color: #5D3A11; background: linear-gradient(173deg, #F1E3C8 0%, #E6C162 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .benefit-block{ display: flex; justify-content: space-between; } .benefit-item{ flex:1; text-align: center; } .benefit-img{ width:70rpx; height: 70rpx; margin:0 0 6rpx 0; } .item-title{ height: 24rpx; font-size: 24rpx; line-height: 24rpx; background: linear-gradient(181deg, #F1E3C8 0%, #E6C162 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .item-tip{ color: #85868A; font-size: 20rpx; margin:4rpx 0 0; } .price-block{ width: 690rpx; height: 144rpx; background: #3D4144; border-radius: 10rpx; padding:20rpx 20rpx; } .price-line{ height: 52rpx; display: flex; font-size: 24rpx; justify-content: space-between; align-items: center; color: #2A2A2A; } .price-line text{ background: linear-gradient(173deg, #F1E3C8 0%, #E6C162 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .invalid-price{ text-decoration: line-through; color:#E6C162; } .buy-btn{ /* position: fixed; left:30rpx; right:30rpx; bottom: 80rpx; */ width: 530rpx; height: 100rpx; line-height: 100rpx; text-align: center; color: #663315; font-size: 24rpx; background: linear-gradient(0deg, #E4CFA8, #E4CFA8); box-shadow: 0rpx 9rpx 18rpx 0rpx rgba(50, 50, 50, 0.06); border-radius: 100rpx; margin:92rpx auto 0; } .now-pay{ font-size: 32rpx; font-weight: bold; } .actual-price{ font-size:38rpx; font-weight: bold; } .row{ display: flex; justify-content: space-between; padding: 20rpx; } .title{ color:#E6C162; flex: 1; } .desc{ /* color: #09afff; */ color:#E6C162; flex: 2; } .price{ color:#E6C162; flex: 1; text-align: right; } .activity-rule-title{ /* height:112rpx; */ padding:36rpx 28rpx 20rpx; /* display: flex; align-items:center; */ font-size: 34rpx; font-weight: bold; } .title-hardline{ height:2rpx; background: #85868A; flex:1; } .activity-rule-title text{ font-size: 33rpx; margin:0 16rpx; } .activity-rule-content{ padding:0 40rpx 0 36rpx; font-size: 24rpx; color:#85868A; line-height: 44rpx; text-align: justify; } .user-info{ height: 112rpx; margin:0 0 32rpx; display: flex; justify-content: space-between; align-items: flex-end; padding-left:40rpx; } .user-avatar{ width:112rpx; height: 112rpx; background-color: #fff; border-radius: 112rpx; margin:0 20rpx 0 0; } .user-detail{ flex:1; padding:0 0 12rpx; color: #fff; font-size:26rpx; } .user-name{ height: 30rpx; display: flex; align-items: center; margin:0 0 20rpx 0; } .user-name text{ font-size: 32rpx; } .member-date{ height: 30rpx; font-size: 22rpx; line-height:30rpx; color: #828387; display: flex; align-items: center; } .member-tip{ height:22rpx; display: flex; align-items: center; margin-top:36rpx; color: #BABABA; font-size: 22rpx; justify-content: center; } .member-tip-img{ width:22rpx; height:22rpx; margin-right:8rpx; }