充值样式修改

my/wallet/index.vue

@@ -27,6 +27,31 @@
 					<span class="yu-e">余额充值</span>
 					<span v-if="artificerIdMy==true" @click="goNavtherapist('/pages/therapist/therapistDingdan')">为TA充值</span>
 				</view>
+				<view class="coupon-level">
+					<view class="r-amount">
+						<span>充¥500</span>
+						<span>赠¥598</span>
+					</view>
+					<view class="bo-amount">
+						<view class="amount-balance">
+							<view>
+								<span>赠送</span>
+								<span>548</span>
+								<span>余额</span>
+							</view>
+							<view>1张</view>
+						</view>
+						<view class="amount-block">
+							<view class="amount-block-lin"><span>40元</span>2张</span></view>
+							<view class="amount-block-lin"><span>30元</span>2张</span></view>
+							<view class="amount-block-lin"><span>20元</span>2张</span></view>
+						</view>
+						<view class="amount-block">
+							<view class="amount-block-lin"><span>10元</span>2张</span></view>
+							<view class="amount-block-lin"><span>5元</span>2张</span></view>	
+						</view>
+					</view>
+				</view>
 				<view class="flex justify-between flex-wrap" v-if="wallet.length > 0">
 					<view v-for="(item,index) in wallet" :key='index' class="padding-sm radius"
 						style="color: #555;background-color: #f7f7f7;width: 48%; margin-top: 20rpx;"
@@ -1282,4 +1307,61 @@
 		border: solid 1px #000000; 
 		;
 	}
+	.coupon-level{
+		margin: 10px 0;
+		background: #fff;
+		border-radius: 30rpx;
+		padding: 25rpx;
+	}
+	.r-amount{
+		padding: 10rpx 20rpx;
+		font-size:38rpx;
+		display: flex;
+		justify-content: space-between;
+		}
+	.r-amount span:nth-child(1){
+		color: #fb672b;
+		font-weight: bold;
+	}
+	.r-amount span:nth-child(2){
+		color: #019c88;
+		font-weight: bold;
+	}
+	.bo-amount{
+		margin-top: 15rpx;
+	}
+	.amount-balance{
+		padding: 20rpx;
+		background: linear-gradient(to right, #fff5eb, #fbe3d2);
+		border-radius:10rpx;
+		display: flex;
+		justify-content: space-between;
+	}
+	.amount-balance span:nth-child(1){
+		color:#666;
+	}
+	.amount-balance span:nth-child(2){
+		font-weight: bold;
+		font-size: 36rpx;
+		color:#333;
+	}
+	.amount-block{
+		display:flex;
+		justify-content: space-between;
+	}
+	.amount-block-lin{
+		width: 32%;
+		background: #f5f5f5;
+		border-radius:10rpx;
+		margin-top:15rpx;
+		padding: 20rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+	}	
+	.amount-block-lin span:nth-child(1){
+		color: #333;
+		font-size: 36rpx;
+		font-weight: bold;		
+	}
 </style>