style：充值页面样式修改

myPages/recharge/index.vue

@@ -1,10 +1,9 @@
 <template>
-	<view class="page">
+	<view class="page ">
+
 		<!-- 钱包 -->
-		<view class="recharge-me">
-			<view class="bg-img">
-				<!-- <image src="../../static/recharge/u1709.jpg" mode=""></image> -->
-			</view>
+		<view class="recharge-me " >
+
 			<view class="wallet-content">
 				<view class="h-balance-wrap">
 					<view class="h-balance">
@@ -57,22 +56,14 @@
 					<!--右边虚化-->
 					<!-- <view class="hide-content-box hide-content-box-right"></view> -->
 					<scroll-view scroll-x="true" class="kite-classify-scroll">
-						<view @click="selectActiveRecharge(item,index)" class="kite-classify-cell shadow" v-for="(item, index) in rechargeList" :key="index">
-							<view v-if="currentTab === index" class="h-bg-img">
-								<image src="../../static/transaction/u2.png" mode=""></image>
-							</view>
-							<view v-else class="h-bg-img">
-								<image src="../../static/recharge/dianka.png" mode=""></image>
-							</view>
-							<view class="content">
+						<view @click="selectActiveRecharge(item,index)" class="kite-classify-cell" :class="{kiteBackImg:currentTab === index}" v-for="(item, index) in rechargeList" :key="index">
+
 								<view class="money">
 									￥<text class="v">{{item.reachPrice}}</text>
 								</view>
 								<view class="desc">
 									<text>{{item.name}} </text>
-									<!-- <text>充￥{{item.reachPrice}}赚送￥{{item.discountsPrice}}</text> -->
 								</view>
-							</view>
 						</view>
 					</scroll-view>
 				</view>
@@ -319,9 +310,8 @@
 </script>
 
 <style scoped lang="scss">
-	.page{
-		background: red;
-	}
+	@import '/common/css/common.css';
+
 
 	/*scroll-view外层*/
 	.skill-sequence-panel-content-wrapper {
@@ -358,25 +348,18 @@
 	}
 
 	.kite-classify-cell {
+		background-image: url("/static/recharge/dianka.png");
+		background-repeat: no-repeat;
+		background-size: cover;
 		display: inline-block;
-		width: 266rpx;
-		// height: 370rpx;
+		width: 328rpx;
+		height: 160rpx;
 		margin-right: 20rpx;
-		background-color: #ffffff;
-		border-radius: 10rpx;
+		border-radius: 15rpx;
 		overflow: hidden;
-		box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
-		position: relative;
-		.h-bg-img{
-			image{
-				height: 80px;
-			}
-		}
-		.content{
-			position: absolute;
-			bottom: 20%;
-			left:12px;
+
 			.money{
+				margin: 34rpx 0 0 40rpx;
 				color: #333333;
 				.v{
 					font-size: 18px;
@@ -384,32 +367,27 @@
 				}
 			}
 			.desc{
-				margin-top: 6px;
+				margin-top: 15rpx;
+				margin-left: 40rpx;
 				font-size: 12px;
 				color: #333333;
 				line-height: 22px;
 			}
-		}
-		.active{
-			display: block;
-		}
+
+	}
+
+	.kiteBackImg{
+		background-image: url("/static/transaction/u2.png");
+		background-repeat: no-repeat;
+		background-size: cover;
 	}
 
 
 	// 余额
 	.recharge-me{
 
-
-		position: relative;
-		.bg-img{
-			height: 160px;
-			background: #FFE05C;
-		}
 		.wallet-content{
-			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
+			background-image: linear-gradient(#FFE05C 0, #FFE05C 160px, #F7F7F7 0, #F7F7F7);
 			padding: 12px;
 			.h-balance-wrap{
 				background: #FFFCF1 ;
@@ -473,11 +451,7 @@
 			width: calc(50% - 6px);
 			margin-bottom: 12px;
 			position: relative;
-			.h-bg-img{
-				image{
-					height: 80px;
-				}
-			}
+
 			.content{
 				position: absolute;
 				bottom: 25%;
@@ -549,13 +523,13 @@
 
 	// 提交按钮
 	.h-submit-btn{
-		margin-top: 12px;
-		width: 343px;
-		height: 42px;
+		margin-top: 24rpx;
+		width: 686rpx;
+		height: 84rpx;
 		background: #FFE05C;
-		border-radius: 27px;
+		border-radius: 54rpx;
 		text-align: center;
-		line-height: 42px;
+		line-height: 84rpx;
 	}
 
 	// 使用说明
@@ -577,4 +551,8 @@
 			line-height: 20px;
 		}
 	}
+	.bg-img{
+		height: 160px;
+		background: #FFE05C;
+	}
 </style>