首页修改

pages/fastRecharge/fastRecharge.vue

@@ -8,35 +8,69 @@
 				<view class="text-1">
 					选择充值金额
 				</view>
-			<view class="text-2">
-				当前余额￥0.00
-			</view>
-			<view class="price-choices">
-				<view class="choices-items">
-					10
-				</view>
-				<view class="choices-items">
-					20
+				<view class="text-2">
+					当前余额￥0.00
 				</view>
-				<view class="choices-items">
-					50
+				<!-- 金额选择 -->
+				<view class="price-choices">
+					<view class="choices-items">
+						10
+					</view>
+					<view class="choices-items">
+						20
+					</view>
+					<view class="choices-items">
+						50
+					</view>
+					<view class="choices-items">
+						100
+					</view>
+					<view class="choices-items">
+						200
+					</view>
+					<view class="choices-items">
+						500
+					</view>
 				</view>
-				<view class="choices-items">
-					100
-				</view>
-				<view class="choices-items">
-					200
+
+				<view class="other-amount">其他充值金额
+					<input type="text" placeholder="100" />
 				</view>
-				<view class="choices-items">
-                  500
+	<!-- 支付方式 -->
+				<view class="pay-methods">
+					<view class="pay-text">
+						选择支付方式
+					</view>
+					<view class="pay-items">
+						<view class="item-left">
+							<view class="iconfont wechat">&#xe62d;</view> <view class="left-text">微信支付</view>
+						</view>
+						<view class="item-right" >
+						<label class="radio">
+							<radio value="" /><text></text>
+						</label>
+						</view>
+					</view>
+					<view class="pay-items">
+						<view class="item-left">
+							<view class="iconfont alipay">&#xe630;</view> <view class="left-text">支付宝支付</view>
+						</view>
+						<view class="item-right" >
+						<label class="radio">
+							<radio value="" /><text></text>
+						</label>
+						</view>
+					</view>
+				
 				</view>
+			<u-radio-group v-model="value" label-size="">
+				<u-radio shape="circle" >我已阅读并同意《充值协议》</u-radio>
+			</u-radio-group>
 			</view>
-				
-
 			
-			</view>
+			<!-- 底部 -->
 			<view class="bottom">
-				立即充值
+				<u-button class="button" shape="square">立即充值</u-button>
 			</view>
 
 		</view>
@@ -57,7 +91,6 @@
 </script>
 
 <style lang="scss">
-	
 	.container {
 		display: flex;
 		flex-direction: column;
@@ -79,39 +112,102 @@
 	// 主体
 	.main {
 		flex: 1; // 填充剩余空间
-		width: 100%;
-         padding: 20px 20px;
-           .text-1{
-			   height: 22px;
-			   color: rgba(16, 16, 16, 100);
-			   font-size: 16px;
-			   text-align: left;
-		   }
-		   .text-2{
-			   height: 20px;
-			   color: rgba(102, 102, 102, 100);
-			   font-size: 14px;
-			   text-align: left;
-		   }
-		   .price-choices{
-			   display: flex;
-			       flex-wrap: wrap;
-			   .choices-items{
-				   width: 95px;
-				   height: 48px;
-				   line-height: 48px;
-				   border-radius: 4px;
-				   color: rgba(16, 16, 16, 100);
-				   font-size: 16px;
-				   text-align: center;
-				   font-family: Arial;
-				   border: 1px solid rgba(227, 227, 227, 100);
-				   margin-left: 10px;
-			   }
-		   }
+		width: 90%;
+		margin: 0 auto;
+		// padding: 20px 30px;
+
+		.text-1 {
+			height: 22px;
+			color: rgba(16, 16, 16, 100);
+			font-size: 16px;
+			text-align: left;
+			margin-top: 20px;
+		}
+
+		.text-2 {
+			height: 20px;
+			color: rgba(102, 102, 102, 100);
+			font-size: 14px;
+			text-align: left;
+		}
+      // 金额选择
+		.price-choices {
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
+
+			.choices-items {
+				width: 95px;
+				height: 48px;
+				line-height: 48px;
+				border-radius: 4px;
+				color: rgba(16, 16, 16, 100);
+				font-size: 16px;
+				text-align: center;
+				font-family: Arial;
+				border: 1px solid rgba(227, 227, 227, 100);
+				
+				margin-top: 10px;
+			}
+		}
+
+		.other-amount {
+			line-height: 20px;
+			color: #666666;
+			font-size: 14px;
+			margin-top: 20px;
+		}
+
+		input {
+
+			height: 44px;
+			border-radius: 4px;
+			font-size: 16px;
+			border: 1px solid rgba(227, 227, 227, 100);
+			line-height: 44px;
+			margin-top: 8px;
+			margin: 10px auto;
+		}
+	}
+	// 支付方式
+	.pay-methods{
+		.pay-text{
+			height: 22px;
+			font-size: 16px;
+			margin-top: 32px;
+		}
+		.pay-items{
+			width: 100%;
+			height: 48px;
+			line-height: 48px;
+			display: flex;
+			justify-content: space-between;
+			.item-left{
+				width: 40%;
+				display: flex;
+				
+				.wechat{
+				 color: #22a438;
+				 font-size: 24px;
+				 display: inline-block;
+				
+				}
+				.alipay{
+					color: #1677ff;
+					font-size: 24px;
+				}
+				.left-text{
+					margin-left: 8px;
+					
+				}
+			}
+			
+			
+		}
+		
 	}
+ 
 
-	
 
 	// 底部
 	.bottom {
@@ -119,5 +215,15 @@
 		height: 64px;
 		text-align: center;
 		background-color: #fff;
+		.button{
+			width: 90%;
+			border-radius: 50px;
+			background-color: rgba(0, 185, 98, 100);
+			color: rgba(255, 255, 255, 100);
+			font-size: 16px;
+		}
+			button::after {
+				border: none;
+			}
 	}
 </style>

pages/index/index.vue

@@ -50,31 +50,34 @@
 		</view>
 
 		<!-- 站点 -->
-	   <view class="station">
+	   <!-- <view class="station">
 	     <view class="img-box" >
 	     	<img src="/static/img/Frame 198 (1).png" alt="">
 	     </view>
-		<view class="text">
-			   	<!-- 站点头部 -->
	   	<view class="station-title">
	   		<text class="title-left">快充</text>
	   		<text class="title-right">荆沙大道救助站充电站</text>
	   	</view>
	   	<!-- 价格 -->
	   	<view class="station-price">
	   		<view class="price-left">1.25</view>
	   		<view class="price-right">
	   			起 元/度
	   		</view>
	   	</view>
	   	<!-- park -->
	   	<view class="park">
	   		<text class="park-p">p</text>
	   		<text class="park-text">2小时免费停车</text>
	   	</view>
	   	<view class="count">
	   		<view class="count-left">空闲10/总数10</view>
	   		<view class="count-right"><text class="iconfont">&#xe615;</text>10公里</view>
	   	</view>
+		<view class="text"> -->
+			   	<!-- 站点头部 -->
	   	<!-- <view class="station-title">
	   		<text class="title-left">快充</text>
	   		<text class="title-right">荆沙大道救助站充电站</text>
	   	</view> -->
	   	<!-- 价格 -->
	   <!-- 	<view class="station-price">
	   		<view class="price-left">1.25</view>
	   		<view class="price-right">
	   			起 元/度
	   		</view>
	   	</view> -->
	   	<!-- park -->
	   	<!-- <view class="park">
	   		<text class="park-p">p</text>
	   		<text class="park-text">2小时免费停车</text>
	   	</view>
	   	<view class="count">
	   		<view class="count-left">空闲10/总数10</view>
	   		<view class="count-right"><text class="iconfont">&#xe615;</text>10公里</view>
	   	</view>
 		</view>
-	   </view>
+	   </view> -->
 	   <!-- 定位 -->
-	   <view class="location">
-		   <view class="location-text">
-		   	 <view class="text-1">
-		   	 	定位中...
-		   	 </view>
-			 <view class="text-2">
-			 	授权定位后可查询附近充电站
-			 </view>
-			 <view class="text-3">
-			 	重新定位
-			 </view>
-		   </view>
-	   	    <view class="img-box" >
-	     	<img src="/static/img/暂无网络信号-缺省页 1.png"">
-	     </view>
-	   </view>
+	<view class="location-box">
+		<view class="location">
+				   <view class="location-text">
+				   	 <view class="text-1">
+				   	 	定位中...
+				   	 </view>
+					 <view class="text-2">
+					 	授权定位后可查询附近充电站
+					 </view>
+					 <view class="text-3">
+					 	重新定位
+					 </view>
+				   </view>
+			    <view class="img-box" >
+		  	<img src="/static/img/暂无网络信号-缺省页 1.png"">
+		  </view>
+		</view>
+		
+	</view>
 		<!-- 充值活动 -->
 		<view class="top-up">
 			<view class="top-up-title"><text class="line"></text>充值活动</view>
@@ -346,10 +349,15 @@
 		
 	}
     //定位
+
    .location{
-	   width: 100%;
+	   width: 343px;
+	   background-color: #ffffff;
 	   height: 120px;
 	   display: flex;
+	   margin: 80px auto 0;
+	   border-radius: 8px;
+	   border:#F2F4F4 1px ;
 	   .location-text{
 		   padding: 24px 28px;
 		   .text-1{