Jelajahi Sumber

51充电联盟 原型方案调整: 1.【充电中】页面,底部工具栏改回贴底显示,视觉方案调整; 2.【6折卡商品详情】页面布局及样式调整:头图替换、商品名称文字调整、价格字体改为斜体、“查看你所在城市的自营站”板块上移、底部状态栏按钮样式调整、弹窗商品规格选择项样式调整; 3.【充电-会员模式/游客模式/单位账户】页面样式调整:将“开始充电”按钮移至底部贴底、充电说明文字板块移植标题栏右侧链接点击弹窗显示;

zhengkaixin 1 tahun lalu
induk
melakukan
432149f7b7

File diff ditekan karena terlalu besar
+ 0 - 0
assets/img/9-4/6折卡价.svg


TEMPAT SAMPAH
assets/img/9-4/productDetails.png


+ 6 - 0
assets/img/9-4/riLine-shut-down-line.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="20" height="20" style="border-color: rgba(187,187,187,1);border-width: 0px;border-style: solid" filter="none">
+    
+    <g>
+    <path d="M8.353 5.076l1.529 2.185c-2.765 1.954-4.549 5.138-4.549 8.738 0 5.891 4.776 10.667 10.667 10.667s10.667-4.776 10.667-10.667c0-3.6-1.784-6.784-4.516-8.716l-0.033-0.022 1.529-2.185c3.457 2.439 5.687 6.416 5.687 10.914 0 0.003 0 0.007 0 0.010v-0.001c0 7.364-5.969 13.333-13.333 13.333s-13.333-5.969-13.333-13.333c0-0.003 0-0.006 0-0.010 0-4.498 2.23-8.475 5.645-10.886l0.042-0.028zM14.667 16v-13.333h2.667v13.333h-2.667z" fill="rgba(255,255,255,1)"></path>
+    </g>
+  </svg>

File diff ditekan karena terlalu besar
+ 0 - 0
assets/img/9-4/会员价.svg


File diff ditekan karena terlalu besar
+ 0 - 0
assets/img/9-4/常用.svg


File diff ditekan karena terlalu besar
+ 0 - 0
assets/img/9-4/推荐.svg


+ 1 - 0
assets/img/9-4/标题装饰右.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="39.23388671875" height="19.798828125" viewBox="0 0 39.23388671875 19.798828125"><g><g transform="matrix(0.7071067690849304,0.7071067690849304,-0.7071067690849304,0.7071067690849304,9.834519490774255,-23.742628946725745)"><rect x="33.5771484375" y="0" width="8" height="20" rx="4" fill="#00B962" fill-opacity="0.30000001192092896"/></g><g transform="matrix(0.7071067690849304,0.7071067690849304,-0.7071067690849304,0.7071067690849304,4.142122386227129,-9.999967457522871)"><rect x="14.14208984375" y="0" width="8" height="20" rx="4" fill="#00B962" fill-opacity="0.6000000238418579"/></g></g></svg>

+ 1 - 0
assets/img/9-4/标题装饰左.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="39.234375" height="19.798828125" viewBox="0 0 39.234375 19.798828125"><g><g transform="matrix(0.7071067690849304,0.7071067690849304,-0.7071067690849304,0.7071067690849304,9.834662505047163,-23.742974213702837)"><rect x="33.57763671875" y="0" width="8" height="20" rx="4" fill="#00B962" fill-opacity="0.6000000238418579"/></g><g transform="matrix(0.7071067690849304,0.7071067690849304,-0.7071067690849304,0.7071067690849304,4.142122386227129,-9.999967457522871)"><rect x="14.14208984375" y="0" width="8" height="20" rx="4" fill="#00B962" fill-opacity="0.30000001192092896"/></g></g></svg>

TEMPAT SAMPAH
assets/img/productDetails.png


+ 106 - 79
pages/discountCard/productDetails.vue

@@ -2,45 +2,16 @@
 	<view>
 	<view>
 		<ujp-navbar title="自营站充电服务费6折卡"></ujp-navbar>
 		<ujp-navbar title="自营站充电服务费6折卡"></ujp-navbar>
 		<view class="header">
 		<view class="header">
-			<img src="../../assets/img/productDetails.png" alt="">
+			<img src="../../assets/img/9-4/productDetails.png" alt="">
 		</view>
 		</view>
-		<!-- <view class="header">
-			<view class="cover">
-				<img src="../../assets/img/productImg.png" alt="">
-			</view>
-			<view class="text1">
-				51充电联盟自营站
-			</view>
-			<view class="text1">
-				充电服务费6折卡
-			</view>
-			<view class="tag">
-				<view class="icon">
-					<u-icon name="checkmark-circle-fill" color="#fff"></u-icon>
-				</view>
-				<view class="tag-text">
-					全省200+充电枪
-				</view>
-			</view>
-			<view class="tag">
-				<view class="icon">
-					<u-icon name="checkmark-circle-fill" color="#fff"></u-icon>
-				</view>
-				<view class="tag-text">
-					平台注册会员及新能源车主可用
-				</view>
-			</view>
-			<view class="usable-range">
-				*仅平台自营站可用
-			</view>
-		</view> -->
+		
 
 
 		<view class="main">
 		<view class="main">
 			<view class="infos">
 			<view class="infos">
 				<view class="title">
 				<view class="title">
-					51充电联盟自营站充电服务费6折卡
+					{{detail.name}}
 				</view>
 				</view>
-				<view class="price" v-if="detail.id">
+				<view class="price" style="font-style: italic;" v-if="detail.id">
 					¥{{detail.price}}元
 					¥{{detail.price}}元
 				</view>
 				</view>
 				<view class="price"  style="    color: #777777;" v-else>
 				<view class="price"  style="    color: #777777;" v-else>
@@ -91,7 +62,11 @@
 			</view>
 			</view>
 			<!-- 适用站点 -->
 			<!-- 适用站点 -->
 			<view class="applicable-site">
 			<view class="applicable-site">
+				<img src="@/assets/img/9-4/标题装饰左.svg">
 				适用站点:平台自营站
 				适用站点:平台自营站
+				<img src="@/assets/img/9-4/标题装饰右.svg">
+				
+				
 			</view>
 			</view>
 			<!-- 服务费 -->
 			<!-- 服务费 -->
 			<view class="service-charge">
 			<view class="service-charge">
@@ -126,7 +101,7 @@
 			<view class="price-comparison">
 			<view class="price-comparison">
 				<view class="headline">
 				<view class="headline">
 					<view class="station">
 					<view class="station">
-						中崴国际充电站
+						青少年宫充电站
 					</view>
 					</view>
 					<view class="time">
 					<view class="time">
 						(23:00-07:00)
 						(23:00-07:00)
@@ -138,7 +113,7 @@
 						服务费6折价
 						服务费6折价
 					</view>
 					</view>
 					<view class="price">
 					<view class="price">
-						0.66<text>元/度(含服务费0.30元)</text>
+						0.65<text>元/度(含服务费0.29元)</text>
 					</view>
 					</view>
 				</view>
 				</view>
 				<!-- 原价 -->
 				<!-- 原价 -->
@@ -150,20 +125,69 @@
 						0.85元/度(含服务费0.49元)
 						0.85元/度(含服务费0.49元)
 					</view>
 					</view>
 				</view>
 				</view>
-				<u-line color="#f2f2f2" margin="40rpx 0"></u-line>
+				<u-line color="#f2f2f2" margin="40rpx 0 0 0"></u-line>
 				<view class="example">
 				<view class="example">
 					以该站夜间大工业用电价格为例,购买6折卡后,<text style="color: #E60012 ;">每月可省约67.6元</text>(338度*0.2元/度)
 					以该站夜间大工业用电价格为例,购买6折卡后,<text style="color: #E60012 ;">每月可省约67.6元</text>(338度*0.2元/度)
 				</view>
 				</view>
 			</view>
 			</view>
+		
 			<!-- 提示2 -->
 			<!-- 提示2 -->
 			<view class="hint2">
 			<view class="hint2">
 				*预估省钱金额计算不含购卡金额,月充电超出度数上限,可续购本商品。
 				*预估省钱金额计算不含购卡金额,月充电超出度数上限,可续购本商品。
 			</view>
 			</view>
-			<u-line color="#F2F2F2" margin="80rpx 0"></u-line>
+				<u-line color="#F2F2F2" margin="80rpx 0 0 0"></u-line>
+			</view>
+			
+			<!-- 自营站 -->
+						<view class="self-station" v-if="stationslist.length" >
+							<view class="headline">
+								<img src="@/assets/img/9-4/标题装饰左.svg">
+								查看你所在城市的自营站
+								<img src="@/assets/img/9-4/标题装饰右.svg">
+								
+							</view>
+							<view class="map">
+								<img src="../../assets/img/map.png" alt="">
+								<view class="station-detail">
+									<view class="title">
+										<view class="title-l">
+											你附近<text style="color:#FF6923;">{{' '}}5公里{{' '}} </text>内的充电站
+										</view>
+										<view class="title-r" @click="gotoUrl('pages/searchPile/searchPile')" >
+											更多<u-icon name="arrow-right" color="#999999"></u-icon>
+										</view>
+									</view>
+									<view class="station-amount">
+										<view class="item">
+											<view class="number">
+												{{stationslist.length}}
+											</view>
+											<view class="name">
+												平台自营站
+											</view>
+										</view>
+										<view class="item" v-if="false">
+											<view class="number">
+												2
+											</view>
+											<view class="name">
+												平台自营超充站
+											</view>
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
+		<view class="main">	
+			
 			<!-- 相关问题 -->
 			<!-- 相关问题 -->
 			<view class="related-issues">
 			<view class="related-issues">
 				<view class="headline">
 				<view class="headline">
+					<img src="@/assets/img/9-4/标题装饰左.svg">
 					关于自营站充电服务费6折卡
 					关于自营站充电服务费6折卡
+					<img src="@/assets/img/9-4/标题装饰右.svg">
+					
+					
 				</view>
 				</view>
 				<view class="item">
 				<view class="item">
 					<view class="question">
 					<view class="question">
@@ -231,7 +255,11 @@
 			<!-- 产品细则 -->
 			<!-- 产品细则 -->
 			<view class="product-rules">
 			<view class="product-rules">
 				<view class="headline">
 				<view class="headline">
+					<img src="@/assets/img/9-4/标题装饰左.svg">
 					充电服务费6折卡产品细则
 					充电服务费6折卡产品细则
+					<img src="@/assets/img/9-4/标题装饰右.svg">
+					
+					
 				</view>
 				</view>
 				<!-- 产品介绍 -->
 				<!-- 产品介绍 -->
 				<view class="item">
 				<view class="item">
@@ -304,43 +332,7 @@
 			
 			
 			
 			
 		</view>
 		</view>
-<!-- 自营站 -->
-			<view class="self-station" v-if="stationslist.length" >
-				<view class="headline">
-					查看你所在城市的自营站
-				</view>
-				<view class="map">
-					<img src="../../assets/img/map.png" alt="">
-					<view class="station-detail">
-						<view class="title">
-							<view class="title-l">
-								你附近<text style="color:#FF6923;">{{' '}}5公里{{' '}} </text>内的充电站
-							</view>
-							<view class="title-r" @click="gotoUrl('pages/searchPile/searchPile')" >
-								更多<u-icon name="arrow-right" color="#999999"></u-icon>
-							</view>
-						</view>
-						<view class="station-amount">
-							<view class="item">
-								<view class="number">
-									{{stationslist.length}}
-								</view>
-								<view class="name">
-									平台自营站
-								</view>
-							</view>
-							<view class="item" v-if="false">
-								<view class="number">
-									2
-								</view>
-								<view class="name">
-									平台自营超充站
-								</view>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
+
 	<!-- 拒绝交易说明 -->
 	<!-- 拒绝交易说明 -->
 	<view class="explain">
 	<view class="explain">
 		<view class="headline">
 		<view class="headline">
@@ -1100,7 +1092,7 @@
 	
 	
 	
 	
 	.main {
 	.main {
-		padding: 24rpx 40rpx;
+		padding: 24rpx 40rpx 0rpx 40rpx;
 
 
 		.infos {
 		.infos {
 			color: rgba(51, 51, 51, 1);
 			color: rgba(51, 51, 51, 1);
@@ -1113,6 +1105,8 @@
 
 
 			.price {
 			.price {
 				margin: 16rpx 0 32rpx;
 				margin: 16rpx 0 32rpx;
+				font-size: 40rpx;
+
 			}
 			}
 		}
 		}
 
 
@@ -1162,9 +1156,15 @@
 		.applicable-site {
 		.applicable-site {
 			text-align: center;
 			text-align: center;
 			margin: 80rpx 0;
 			margin: 80rpx 0;
-			color: rgba(51, 51, 51, 1);
+			color: #333333 ;
+			    font-weight: bold;
 			font-size: 36rpx;
 			font-size: 36rpx;
-			font-weight: bold;
+			img{
+				width: 48rpx;
+				height: 24rpx;
+				margin: 0 16rpx;
+			}
+			
 		}
 		}
 
 
 		// 服务费
 		// 服务费
@@ -1256,6 +1256,11 @@
 					color: #999999;
 					color: #999999;
 
 
 				}
 				}
+				img{
+					    width: 20px;
+					    height: 10px;
+					    margin: 0 6px;
+				}
 			}
 			}
 
 
 			// 折扣价
 			// 折扣价
@@ -1333,6 +1338,11 @@
 				font-size: 44rpx;
 				font-size: 44rpx;
 				font-family: 'YouSheBiaoTiHei';
 				font-family: 'YouSheBiaoTiHei';
 				text-align: center;
 				text-align: center;
+				img{
+									  width: 20px;
+									  height: 10px;
+									  margin: 0 6px;
+				}  
 			}
 			}
 
 
 			.question {
 			.question {
@@ -1423,6 +1433,11 @@
 				font-size: 44rpx;
 				font-size: 44rpx;
 				font-family: 'YouSheBiaoTiHei';
 				font-family: 'YouSheBiaoTiHei';
 				text-align: center;
 				text-align: center;
+				img{
+									  width: 20px;
+									  height: 10px;
+									  margin: 0 6px;
+				}  
 			}
 			}
 
 
 			.item {
 			.item {
@@ -1449,12 +1464,17 @@
 	
 	
 	// 自营站
 	// 自营站
 	.self-station{
 	.self-station{
-			 margin-top: 80rpx;
+			 margin-top: 48rpx;
 			 .headline{
 			 .headline{
 				 color: rgba(16, 16, 16, 1);
 				 color: rgba(16, 16, 16, 1);
 				 font-size: 44rpx;
 				 font-size: 44rpx;
 				 font-family: 'YouSheBiaoTiHei';
 				 font-family: 'YouSheBiaoTiHei';
 				 text-align: center;
 				 text-align: center;
+				  img{
+					  width: 20px;
+					  height: 10px;
+					  margin: 0 6px;
+				  }  
 			 }
 			 }
 			 .map{
 			 .map{
 				 margin-top: 32rpx;
 				 margin-top: 32rpx;
@@ -1507,6 +1527,11 @@
 		font-family: 'YouSheBiaoTiHei';
 		font-family: 'YouSheBiaoTiHei';
 		text-align: center;
 		text-align: center;
 		margin-bottom: 32rpx;
 		margin-bottom: 32rpx;
+		img{
+							  width: 20px;
+							  height: 10px;
+							  margin: 0 6px;
+		}  
 	}
 	}
 	.title{
 	.title{
 		color: #111111;
 		color: #111111;
@@ -1581,7 +1606,8 @@
 		height: 96rpx;
 		height: 96rpx;
 		line-height: 96rpx;
 		line-height: 96rpx;
 		border-radius: 50px;
 		border-radius: 50px;
-		background: linear-gradient(90.52deg, rgba(59,182,254,1) 1.82%,rgba(0,185,98,1) 52.22%);
+		background: #00b962;
+	
 		color: rgba(255, 255, 255, 1);
 		color: rgba(255, 255, 255, 1);
 		font-size: 36rpx;
 		font-size: 36rpx;
 		text-align: center;
 		text-align: center;
@@ -1615,6 +1641,7 @@
 			.class-name{
 			.class-name{
 				color: rgba(51, 51, 51, 1);
 				color: rgba(51, 51, 51, 1);
 				font-size: 40rpx;
 				font-size: 40rpx;
+				font-weight: bold;
 				
 				
 			}
 			}
 			.price{
 			.price{

+ 100 - 80
pages/searchPile/chargeProcess/charge.vue

@@ -1,6 +1,8 @@
 <template>
 <template>
 	<view>
 	<view>
-		<ujp-navbar title="开始充电"  :is-back="isback" ></ujp-navbar>
+		<ujp-navbar title="开始充电"  :is-back="isback" >
+			<view class="exchange "  slot="right" @click="showmodal2=true">充电说明</view>
+		</ujp-navbar>
 		
 		
 		<view class="carImg"  v-if="personInfo&&personInfo.userType!=2" >
 		<view class="carImg"  v-if="personInfo&&personInfo.userType!=2" >
 			<img  @click="gotoLogin" src="@/assets/img/gologin/img.png">
 			<img  @click="gotoLogin" src="@/assets/img/gologin/img.png">
@@ -8,7 +10,7 @@
 		</view>
 		</view>
 		<view v-else>
 		<view v-else>
 			<!-- 优惠 -->
 			<!-- 优惠 -->
-			<view class="discounts" style="padding:0 18px;" v-if="bannerList.length">
+			<view class="discounts" style="padding:0 36rpx;" v-if="bannerList.length">
 				<u-swiper bg-color="#fff" mode="none" :img-mode="'scaleToFill'" height="160" :list="bannerList" @click="clickBanner"
 				<u-swiper bg-color="#fff" mode="none" :img-mode="'scaleToFill'" height="160" :list="bannerList" @click="clickBanner"
 					:name="'picUrl'">
 					:name="'picUrl'">
 				</u-swiper>
 				</u-swiper>
@@ -141,20 +143,10 @@
 				
 				
 			</view>
 			</view>
     <!-- 优惠券2 -->
     <!-- 优惠券2 -->
-			<view class="discounts2" v-if="false">
-				<view class="left lefttitle">
-					支付方式
-				</view>
-							
-				<view class="right" @click="paySelect=true" style="color:#101010"   >
-								{{payName}}
-					<view class="iconfont">&#xe600;</view>
-				</view>
-							
-			</view>
+			
 	
 	
-			 <view class="discounts2">
-			 	<view class="left lefttitle">
+			 <view class="member">
+			 	<view class="actively">
 			 		优惠券
 			 		优惠券
 			 	</view>
 			 	</view>
 				
 				
@@ -222,24 +214,32 @@
 			
 			
 			
 			
 		</view>
 		</view>
-		<view class="bottom">
-			<view class="botton"
+		<view class="botton">
+			<button class="bottonBtn"
 			 @click="submit"
 			 @click="submit"
-			 >开始充电</view>
+			 >开始充电</button>
 			
 			
 		</view>
 		</view>
+		
+		<u-modal   v-model="showmodal2"
+		 confirm-text="知道了"
+		 title="充电说明" >
+			
+				<view class="textinfo"  style="padding: 10px;">
+				
+					<view>
+						1.最终结算金额将以实际充入电量为准;<br/>
+						2.充满自停模式需要您的余额不低于10元才可充电;<br/>
+						3.充电金额请输入1元~500元的整数。实际充电金额与所选金额会略有出入(一般误差约几分钱);<br/>
+						4.完成充电后,在满足条件的情况下,优惠券自动抵扣;提前结束充电则不使用优惠券并返还至您的卡包。<br/>
+					
+						5.先付后退模式,无法享受平台会员的服务费折扣、优惠券等优惠活动。<br/>
+					</view>
+				</view>
+				
+		</u-modal>
+		
 		
 		
-		<view class="textinfo">
-			<p>充电说明:</p>
-			<view>
-				1.最终结算金额将以实际充入电量为准;<br/>
-				2.充满自停模式需要您的余额不低于10元才可充电;<br/>
-				3.充电金额请输入1元~500元的整数。实际充电金额与所选金额会略有出入(一般误差约几分钱);<br/>
-				4.完成充电后,在满足条件的情况下,优惠券自动抵扣;提前结束充电则不使用优惠券并返还至您的卡包。<br/>
-			
-				5.先付后退模式,无法享受平台会员的服务费折扣、优惠券等优惠活动。<br/>
-			</view>
-		</view>
 		
 		
 		<!-- <view class="but-box" style="margin-bottom: 20px;">
 		<!-- <view class="but-box" style="margin-bottom: 20px;">
 			<u-button
 			<u-button
@@ -380,7 +380,7 @@
 						
 						
 						:class="otherNum_f? 'active' : ''"
 						:class="otherNum_f? 'active' : ''"
 						class="recharge-input self-stop" style="height: 100%;width: 100%;margin-bottom: 8px;">
 						class="recharge-input self-stop" style="height: 100%;width: 100%;margin-bottom: 8px;">
-							<u-input v-model="otherNum_f" @input="ckInput_f" @focus="focus" type="digit" :border="true" />
+							<ujp-input v-model="otherNum_f" @input="ckInput_f" @focus="focus" type="digit" :border="true" />
 										
 										
 						
 						
 						</view>
 						</view>
@@ -441,7 +441,8 @@
 				moneyActiveClass_f: "-1",
 				moneyActiveClass_f: "-1",
 				detail: {},
 				detail: {},
 				couponsuse:'',
 				couponsuse:'',
-				showmodal:false,
+				showmodal:false,
+				showmodal2:false,
 				//提交信息
 				//提交信息
 				//提交信息
 				//提交信息
 				submitForm_f: {
 				submitForm_f: {
@@ -1212,7 +1213,16 @@
 	}
 	}
 </style>
 </style>
 
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>
+	
+	
+	
+	.exchange{
+		margin-right: 32rpx;
+		color: rgba(119, 119, 119, 100);
+		font-size: 24rpx;
+		//margin-right: 6rpx;
+	}
 	.rightspan{
 	.rightspan{
 		float: right;
 		float: right;
 	}
 	}
@@ -1223,7 +1233,7 @@
 		font-size: 40rpx;
 		font-size: 40rpx;
 		
 		
 		font-weight: bold;
 		font-weight: bold;
-		margin-bottom: 8px;
+		margin-bottom: 16rpx;
 	}
 	}
 		.contentbody{
 		.contentbody{
 			
 			
@@ -1255,23 +1265,23 @@
 	}
 	}
 	.textinfo{
 	.textinfo{
 		padding: 40rpx;
 		padding: 40rpx;
-		font-size: 14px !important;
+		font-size: 24rpx !important;
 		color: #999999;
 		color: #999999;
 	
 	
 		p{
 		p{
-			font-size: 16px !important;
+			font-size: 32rpx !important;
 			color:#101010;
 			color:#101010;
 			    font-weight: bold;
 			    font-weight: bold;
 		}
 		}
 	}
 	}
 	.lefttitle{
 	.lefttitle{
 		font-weight: bold;
 		font-weight: bold;
-		font-size: 16px
+		font-size: 32rpx
 	}
 	}
 	@import "@/_theme.scss";
 	@import "@/_theme.scss";
 	.listlength{
 	.listlength{
 		    float: right;
 		    float: right;
-		    padding-right: 10px;
+		    padding-right: 20rpx;
 	}
 	}
 	/deep/.u-drawer-content{
 	/deep/.u-drawer-content{
 		border-radius: 10px 10px 0 0
 		border-radius: 10px 10px 0 0
@@ -1299,7 +1309,7 @@
 
 
 	}
 	}
 	.paySelect{
 	.paySelect{
-			padding: 16px;
+			padding: 32rpx;
 		.title{
 		.title{
 			font-size:40rpx
 			font-size:40rpx
 		}
 		}
@@ -1321,8 +1331,8 @@
 	}
 	}
 
 
 	.recharge {
 	.recharge {
-		padding: 16px;
-		// padding-bottom: 80px;
+		padding: 32rpx;
+		 padding-bottom: 100px;
 		.title {
 		.title {
 			@include themeify{
 			@include themeify{
 				font-size: themed('font-size3');
 				font-size: themed('font-size3');
@@ -1348,8 +1358,8 @@ position: relative;
 			display: flex;
 			display: flex;
 			flex-wrap: wrap;
 			flex-wrap: wrap;
 			// justify-content: space-between;
 			// justify-content: space-between;
-			margin-top: 12px;
-			margin-bottom: 5px;
+			margin-top: 24rpx;
+			margin-bottom: 10rpx;
 
 
 			.recharge-item {
 			.recharge-item {
 				.u-input {
 				.u-input {
@@ -1357,12 +1367,12 @@ position: relative;
 				}
 				}
 				width: 31%;
 				width: 31%;
 				border: 1px solid #e3e3e3;
 				border: 1px solid #e3e3e3;
-				padding: 10px 0;
+				padding: 20rpx 0;
 				border-radius: 4px;
 				border-radius: 4px;
 				text-align: center;
 				text-align: center;
-				margin-bottom: 10px;
+				margin-bottom: 20rpx;
 				position: relative;
 				position: relative;
-					margin-left: 5px;
+					margin-left: 10rpx;
 				@include themeify{
 				@include themeify{
 					font-size: themed('font-size3');
 					font-size: themed('font-size3');
 				}
 				}
@@ -1470,7 +1480,7 @@ position: relative;
 			position: relative;
 			position: relative;
 
 
 			/deep/.u-radio {
 			/deep/.u-radio {
-				padding: 18px 16px;
+				padding: 36rpx 32rpx;
 				margin-top: 12px;
 				margin-top: 12px;
 				width: 100%;
 				width: 100%;
 				height: 48px;
 				height: 48px;
@@ -1487,7 +1497,7 @@ position: relative;
 			// }
 			// }
 
 
 			/deep/.u-radio__icon-wrap {
 			/deep/.u-radio__icon-wrap {
-				left: 16px;
+				left: 32rpx;
 				background-color: #fff;
 				background-color: #fff;
 			}
 			}
 
 
@@ -1565,22 +1575,24 @@ position: relative;
 	
 	
 	// 会员活动
 	// 会员活动
 	.member{
 	.member{
-		margin-top: 20px;
+		margin-top: 24rpx;
 		display: flex;
 		display: flex;
 	    justify-content: space-between;
 	    justify-content: space-between;
-		    flex-direction: column;
-		
+		 flex-wrap: wrap;
+		 align-items: center;
 		.actively{
 		.actively{
-			color: rgba(16, 16, 16, 100);
-			font-size: 20px;
+			
+			color: rgba(119, 119, 119, 1);
+			font-size: 36rpx;
 		
 		
 		}
 		}
-		.type{
+		.type,.right{
 			color: rgba(16, 18, 18, 100);
 			color: rgba(16, 18, 18, 100);
-			font-size: 16px;
-			line-height: 28px;
+			font-size: 36rpx;
+			//line-height: 28px;
 			padding-right: 10px;
 			padding-right: 10px;
 			display: flex;
 			display: flex;
+			align-items: center;
 
 
 		}
 		}
 		.iconfont{
 		.iconfont{
@@ -1600,33 +1612,41 @@ position: relative;
 	
 	
 	
 	
 	// 尾部
 	// 尾部
-	.bottom {
-		background: #fff;
+	.botton {
+		border: 1px solid rgba(242, 242, 242, 1);
+		background: linear-gradient(180deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%);
+		position: fixed;
+		
+		//background: #fff;
 		width: 100%;
 		width: 100%;
-		// height: 64px;
-		// line-height: 64px;
-		// position: fixed;
-		// bottom: 0;
-		// left: 0;
+	
+		padding: 24rpx 40rpx;
+		line-height: 88rpx;
+		
+		bottom: 0;
+		left: 0;
 		z-index: 999;
 		z-index: 999;
-		padding: 0px 16px 16px;
-	
-		.botton {
-			//width: 343px;
-			height: 40px;
-			line-height: 40px;
-			font-size:16px;
-			border-radius: 50px;
-			background-color: rgba(0, 185, 98, 100);
-			color: rgba(255, 255, 255, 100);
-/*			font-size: 16px;*/
-			// @include themeify{
-			// 	font-size: themed('font-size3');  
-			// 	line-height: themed('font-size15');
-			// 	height: themed('font-size15');			
-			// }
-			text-align: center;
-			margin: 0 auto;
+		//padding: 0px 32rpx 32rpx;
+		padding-bottom: 12px;
+		button {
+			
+			margin-left: 40rpx;
+			display: flex;
+			    align-items: center;
+			    justify-content: center;
+			//width: 45.8%;
+			// background-color: black;
+			// color: #fff;
+			// background-color: rgba(255, 255, 255, 1);
+			// color: rgba(0, 185, 98, 1);
+						background-color: rgba(0, 185, 98, 100);
+						color: rgba(255, 255, 255, 100);
+
+		
+			
+			height:88rpx;
+			border-radius: 50px;
+			font-size: 32rpx;
 		}
 		}
 	
 	
 	}
 	}

+ 38 - 22
pages/searchPile/chargeProcess/dcCharging.vue

@@ -568,15 +568,20 @@
 				</view>
 				</view>
 			
 			
 			 <view class="bottom-qq">
 			 <view class="bottom-qq">
-				 <view class="img-box" @click="show = true">
+				 <view class="img-box" @click="gotoUrl('pages/service/service')">
 					 <img src="../../../assets/img/customer-service-2-line.svg" alt="">
 					 <img src="../../../assets/img/customer-service-2-line.svg" alt="">
-				 	
-				 </view>
-				 <button  
-				 :style="(chargingRecord.status=='0'||chargingRecord.status=='1'||chargingRecord.status=='4')?'':'background-color: #b3abab;'"
-				 style="width: 80%;"
-				 @click="submit" >结束充电</button>
+				 	<view>联系客服</view>
+				 </view>
+				 <view class="button-box">
+					 
 				
 				
+					 <button  
+					 :style="(chargingRecord.status=='0'||chargingRecord.status=='1'||chargingRecord.status=='4')?'':'background-color: #b3abab;'"
+					 
+					 @click="submit" >
+					  <img src="../../../assets/img/9-4/riLine-shut-down-line.svg" alt="">
+					 结束充电</button>
+				 </view>
 				<view class="img-box" v-if="false">
 				<view class="img-box" v-if="false">
 				 	<img src="../../../assets/img/tools-fill.svg" alt="">
 				 	<img src="../../../assets/img/tools-fill.svg" alt="">
 				 </view>
 				 </view>
@@ -738,7 +743,7 @@
 		},
 		},
 		computed:{
 		computed:{
 			userCardBool(){
 			userCardBool(){
-				if(this.chargingRecord&&this.chargingRecord.userCardId&&!this.showVinBl){
+				if(this.chargingRecord&&this.chargingRecord.userCardId&&!this.showVinBl&&this.userCard){
 					
 					
 					return true;
 					return true;
 				}
 				}
@@ -1169,6 +1174,8 @@
 	 
 	 
 	 .common-problem {
 	 .common-problem {
 	 	//margin: -125px 32rpx 0;
 	 	//margin: -125px 32rpx 0;
+		box-shadow: 0px 2px 8px 0px #1A095A34;
+    
 	 	border-radius: 8px;
 	 	border-radius: 8px;
 	 	background-color: #fff;
 	 	background-color: #fff;
 	 		padding: 20rpx 24rpx 48rpx 24rpx;
 	 		padding: 20rpx 24rpx 48rpx 24rpx;
@@ -1779,37 +1786,46 @@
 
 
 	}
 	}
 	// 底部按钮
 	// 底部按钮
-	.bottom-qq{
-		background:white ;
+	.bottom-qq{
+		border: 1px solid rgba(242, 242, 242, 1);
+		background: linear-gradient(180deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%);
 		position: fixed;
 		position: fixed;
 		bottom: 0;
 		bottom: 0;
 		left: 0;
 		left: 0;
 		right: 0;
 		right: 0;
 		display: flex;
 		display: flex;
-		padding: 12px 24px;
+		padding: 24rpx 40rpx;
 		padding-bottom: 12px;
 		padding-bottom: 12px;
-		    z-index: 999;
+		    z-index: 999;
+			.button-box{
+				min-width: 80%;
+			}
 		.img-box{
 		.img-box{
-			width: 96rpx;
-			height: 96rpx;
-			padding: 24rpx 0;
-			background-color: rgba(210, 215, 213, 100);
+			// width: 48rpx;
+			// height: 48rpx;
+			//padding: 24rpx 0;
+			
 			text-align: center;
 			text-align: center;
-			border-radius: 999px;
 			
 			
+			font-size: 24rpx;
 			img{
 			img{
-				
+				width: 48rpx;
+				height: 48rpx;
 			}
 			}
 		}
 		}
-		button{
-			
-			width: 45.8%;
+		button{
+			
+			margin-left: 40rpx;
+			display: flex;
+			    align-items: center;
+			    justify-content: center;
+			//width: 45.8%;
 			background-color: black;
 			background-color: black;
 			color: #fff;
 			color: #fff;
 			// background-color: rgba(255, 255, 255, 1);
 			// background-color: rgba(255, 255, 255, 1);
 			// color: rgba(0, 185, 98, 1);
 			// color: rgba(0, 185, 98, 1);
 
 
-			height: 80rpx;
+			height: 96rpx;
 			border-radius: 50px;
 			border-radius: 50px;
 			font-size: 32rpx;
 			font-size: 32rpx;
 		}
 		}

+ 1 - 1
pages/searchPile/stationAndPile/stationDetails.vue

@@ -462,7 +462,7 @@
 					</view>
 					</view>
 					<view class="item item-vip2" v-if="!userCardBool" >
 					<view class="item item-vip2" v-if="!userCardBool" >
 						<view class="visitor">
 						<view class="visitor">
-							服务费6折卡会员价
+							6折卡会员价
 						</view>
 						</view>
 						<view class="unit-price">
 						<view class="unit-price">
 							
 							

Beberapa file tidak ditampilkan karena terlalu banyak file yang berubah dalam diff ini