.member-center-page{ /* background: #2E3235; */ /* height: 100vh; */ padding-bottom:140rpx; /* padding:16rpx 70rpx 80rpx; */ } .center-top{ width: 610rpx; height: 286rpx; background: linear-gradient(162deg, #F1E3C8 0%, #E6C162 100%); border-radius: 10rpx; margin:0 0 26rpx; padding:32rpx 32rpx 20rpx; } .user-info{ height: 112rpx; margin:0 0 32rpx; display: flex; justify-content: space-between; align-items: flex-end; } .user-avatar{ width:112rpx; height: 112rpx; background-color: #fff; border-radius: 112rpx; margin:0 40rpx 0 0; } .user-detail{ flex:1; padding:0 0 12rpx; color: #5D3A11; font-size:26rpx; } .user-name{ height: 30rpx; display: flex; align-items: center; margin:0 0 20rpx 0; } .user-name text{ font-size: 30rpx; } .member-date{ height: 36rpx; line-height:36rpx; } .member-bage{ width: 28rpx; height: 28rpx; line-height: 24rpx; background: #2E3235; border-radius: 50%; margin:0 0 0 10rpx; text-align: center; font-size:20rpx; color: #E6C162; } .member-bage text{ font-weight: bold; color: #5D3A11; font-size:20rpx; line-height: 24rpx; background: linear-gradient(78deg, #F1E3C8 0%, #E6C162 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .amount-info{ height: 90rpx; display: flex; justify-content: space-between; align-items: flex-end; } .save-text{ color: #5D3A11; font-size: 24rpx; height: 24rpx; line-height: 22rpx; margin:0 0 6rpx 0; } .save-cost{ font-size: 60rpx; height: 64rpx; line-height: 64rpx; font-weight: bold; color: #5D3A11; } .save-cost text{ font-size: 32rpx; font-weight: bold; } .buy-record{ /* padding: 0 0 12rpx; */ display: flex; align-items: center; color: #5D3A11; font-weight: 26rpx; } .buy-record text{ padding-left:10rpx; } .renew-btn{ width: 130rpx; height: 36rpx; line-height: 34rpx; background: #2E3235; border-radius: 18rpx; text-align: center; } .renew-btn text{ font-size: 24rpx; color: #5D3A11; background: linear-gradient(78deg, #F1E3C8 0%, #E6C162 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .center-content{ height: 602rpx; width:610rpx; border-radius: 10rpx; background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/new/member-center-bg.png') no-repeat center top; background-size: 100%; padding:48rpx 24rpx 20rpx; } .h1-title{ text-align: center; height: 44rpx; line-height: 44rpx; font-size: 44rpx; color: #FFFFFF; font-weight: bold; background: linear-gradient(78deg, #F1E3C8 0%, #E6C162 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .h2-title{ text-align: center; height: 24rpx; line-height: 24rpx; font-size: 24rpx; color: #FFFFFF; background: linear-gradient(78deg, #F1E3C8 0%, #E6C162 100%); -webkit-background-clip: text; -webkit-text-fill-color:transparent; margin:24rpx 0 66rpx; } .category-block{ display: flex; justify-content: space-between; margin:0 0 20rpx; } .category-item{ display: flex; flex-direction: column; align-items: center; justify-content: space-between; height:160rpx; flex:1; } .category-img{ width:88rpx; height: 88rpx; } .category-name{ height: 28rpx; line-height: 28rpx; font-size: 28rpx; color: #FFFFFF; background: linear-gradient(181deg, #F1E3C8 0%, #E6C162 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .category-discount{ height: 24rpx; font-size: 24rpx; color: #85868A; } .rule{ text-align: center; padding-bottom: 20rpx; color: #E6C162; margin: 0 0 20rpx; } /* 海报的样式 */ .poster{ padding: 50rpx; background: linear-gradient(162deg, #F1E3C8 0%, #E6C162 100%); text-align: left; /* height: 650rpx; */ top: 20%; margin: 50rpx; position: absolute; z-index: 99; text-align: left; left: 0; right: 0; border-radius: 20rpx; } .title{ color: #333; margin: 20rpx 0; font-size: 36rpx; text-align: center; } .ads{ margin: 10rpx 0rpx; color: #333; } .tool{ display: flex; text-align: center; justify-content: baseline; width: 100%; margin-top: 20rpx; } .tool view{ flex: 1; } .img{ width: 107rpx; height: 128rpx; } .closeImg{ width: 57rpx; height: 57rpx; } .share-btn{ background: #2E3235; width: 260rpx; height: 76rpx; line-height: 76rpx; margin: 0 auto; color: #fff; border-radius: 38rpx; } .share-btn::after { border: none; } .pay-btn{ margin:80rpx auto 0; width: 530rpx; height: 100rpx; background: linear-gradient(0deg, #E4CFA8, #E4CFA8); box-shadow: 0rpx 9rpx 18rpx 0rpx rgba(50, 50, 50, 0.06); border-radius: 100rpx; font-weight: bold; color: #663315; text-shadow: 2rpx 6rpx 8rpx rgba(30, 4, 4, 0.18); font-size: 36rpx; text-align: center; line-height: 100rpx; } .benefit-title{ font-weight: bold; color: #000000; font-size: 34rpx; margin:48rpx 0 28rpx 34rpx; height: 34rpx; } .benefit-banner-item{ width:700rpx; height: 182rpx; margin:0 25rpx 12rpx; } .benefit-banner-item image{ width:700rpx; height: 182rpx; } .benefit-icon-block{ margin:26rpx 0 0; padding:0 66rpx 0 ; display: flex; justify-content: space-between; } .benefit-icon-item{ width:124rpx; display: flex; flex-direction: column; align-items: center; } .benefit-icon-item image{ width:112rpx; height:112rpx; } .benefit-icon-title{ color: #515151; font-size: 24rpx; height: 32rpx; line-height: 32rpx; } .benfit-icon-remark{ color: #9D9D9D; font-size: 20rpx; } .first-buy-title{ height: 34px; line-height: 34rpx; padding:0 34rpx; display: flex; align-items: flex-end; font-size: 34rpx; font-weight: bold; } .first-buy-title .remark{ margin-left:16rpx; font-size: 20rpx; font-weight: normal; } .good-list{ padding:0 20rpx; display: flex; justify-content: space-between; flex-wrap: wrap; } .good-item{ margin-bottom:10rpx; } .good-img{ width:350rpx; height: 224rpx; } .banner-item{ margin:0 auto 10rpx; width:712rpx; } .banner-img{ width:712rpx; height: 190rpx; margin:0 auto; } .member-valid-wrapper{ text-align: center; } .user-info{ height: 112rpx; margin:0 0 32rpx; display: flex; justify-content: space-between; align-items: center; padding:0 80rpx 0 40rpx; } .user-avatar{ width:112rpx; height: 112rpx; background-color: #fff; border-radius: 112rpx; margin:0 20rpx 0 0; } .user-detail{ flex:1; padding:8rpx 0 0rpx; 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-invalid-top{ background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/member-center-bg.png') no-repeat center top; background-size: 100%; height: 342rpx; width:750rpx; padding:30rpx 0 0; } .member-invalid-wrapper .buy-record,.member-valid-wrapper .buy-record{ display: flex; align-items: center; color: #FFFFFF; font-size: 22rpx; font-weight: 26rpx; width: 136rpx; justify-content: center; height: 42rpx; line-height: 42rpx; border-radius: 5rpx; background-color: #45474C; } .member-invalid-card{ width: 608rpx; height: 180rpx; background: linear-gradient(180deg, #FFE3AF, #FEBF4F); box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(197, 148, 60, 0.16); border-radius: 15rpx; margin:-156rpx auto 0; padding:50rpx 54rpx 44rpx 40rpx; display: flex; justify-content: space-between; } .invalid-card-left{ color: #A26428; text-shadow: 2rpx 6rpx 8rpx rgba(30, 4, 4, 0.18); font-size: 24rpx; } .invalid-card-left .card-title{ font-weight: bold; color: #663315; text-shadow: 2rpx 6rpx 8rpx rgba(30, 4, 4, 0.18); font-size: 32rpx; height: 44rpx; line-height: 44rpx; margin-bottom:8rpx; } .invalid-card-right{ display: flex; flex-direction: column; justify-content: flex-end; align-items: center; color: #A26428; opacity: 0.8; text-shadow: 2rpx 6rpx 8rpx rgba(30, 4, 4, 0.18); font-size: 20rpx; width: 144rpx; } .invalid-card-right .btn{ width: 144rpx; height: 42rpx; line-height: 42rpx; background: #FFFFFF; border-radius:42rpx; color: #663315; font-size: 24rpx; opacity: 1; text-align: center; margin-top:8rpx; } .member-valid-top{ padding:30rpx 0 32rpx; background: #1F232D; background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/member-valid-bg.png') no-repeat center; background-size: 100%; height: 700rpx; width:750rpx; color:#fff; } .member-valid-benefit{ height: 526rpx; width:750rpx; } .valid-benefit-item image{ width:100rpx; height: 100rpx; } .valid-benefit-title{ display: flex; justify-content: center; font-size: 28rpx; font-weight: bold; align-items: center; } .valid-benefit-title .line{ width: 50rpx; height: 3rpx; background: rgba(255,255,255,0.85); border-radius: 0rpx 3rpx 3rpx 0rpx; } .valid-benefit-title .text{ margin:0 14rpx; } .valid-benefit-block{ padding:0 30rpx 0 26rpx; } .valid-benefit-line{ display: flex; justify-content: space-between; text-align: center; margin-top:30rpx; } .valid-benefit-item{ flex:1; font-size: 24rpx; } .valid-benefit-item .remark{ color: #9D9D9D; font-size: 21rpx; } .member-date .renew{ color: #E6C78B; font-size: 24rpx; margin-left:14rpx; }