·1

pages.json

@@ -165,6 +165,27 @@
 			"style": {
 				//"navigationStyle": "custom" // 隐藏系统导航栏
 			}
+		},
+		{
+			"name":"车辆管理",
+			"path": "pages/user/car/index",
+			"style": {
+				//"navigationStyle": "custom" // 隐藏系统导航栏
+			}
+		},
+		{
+			"name":"车辆信息",
+			"path": "pages/user/car/carDet",
+			"style": {
+				//"navigationStyle": "custom" // 隐藏系统导航栏
+			}
+		},
+		{
+			"name":"添加车牌",
+			"path": "pages/user/car/carAdd",
+			"style": {
+				//"navigationStyle": "custom" // 隐藏系统导航栏
+			}
 		}
     ],
 	"globalStyle": {

pages/index/index.vue

@@ -1,591 +1,628 @@
-<template>
-	<view>
-
-		<!-- 头部图片 -->
-		<view class="banner">
-			<img src="/static/img/banner1.jpg" alt="">
-		</view>
-
-
-		<!-- 选项列表 -->
-		<view class="option-list">
-
-			<view class="list-item">
-				<view class="icon iconfont" style="background-color:#59d96e;">
-                 &#xe61a;
-				</view>
-				<view class="text">
-					扫码充电
-				</view>
-
-			</view>
-			<view class="list-item">
-				<view class="icon iconfont" style="background-color:#4BD2C0;">
-                            &#xe629;
-				</view>
-				<view class="text">
-					快速充值
-				</view>
-
-			</view>
-			<view class="list-item">
-				<view class="icon iconfont" style="background-color: #6FA5FF;">
-                          &#xe625;
-				</view>
-				<view class="text">
-					充电记录
-				</view>
-
-			</view>
-			<view class="list-item">
-				<view class="icon iconfont" style="background-color: #9D9FFF;">
-                     &#xe622;
-				</view>
-				<view class="text">
-					附近站点
-				</view>
-
-			</view>
-
-		</view>
-
-		<!-- 站点 -->
-	   <!-- <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>
-	   </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>
-			<view class="img-box">
-				<view class="img-1">
-					<img src="/static/img/瓷片区1.png" alt="">
-					<view class="img-text">
-						充100送20
-						<view class="img-text2">即充即赠 立享优惠</view>
-					</view>
-				</view>
-				<view class="img-1">
-					<img src="/static/img/瓷片区2.png" alt="">
-					<view class="img-text" style="color: #FF7C00;">
-						邀请有礼
-						<view class="img-text2 color">最高可得500元</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<!-- 新闻 -->
-		<view class="news-title">
-			<view class="news-title-left">
-				<view class="line" style="margin-top:4px;"></view>新闻公告
-			</view>
-
-			<view class="more">更多<view class="more-icon iconfont"> &#xe600;</view>
-			</view>
-			
-
-		</view>
-		<view class="news">
-
-			<view class="news-content">
-				<view class="content-text">
-					日印计划联手开发低成本充电桩 推动新兴市场电动车发展
-					<view class="news-time">05-01 09:00</view>
-				</view>
-				<view class="content-img">
-					<img src="/static/img/11091323191.jpg" alt="">
-				</view>
-			</view>
-			<view class="news-content">
-				<view class="content-text">
-					我国新能源汽车市场腾飞在即，充换电何时能够不再“拖后腿”？
-					<view class="news-time">05-01 09:00</view>
-				</view>
-				<view class="content-img">
-					<img src="/static/img/103613441.jpg" alt="">
-				</view>
-			</view>
-
-			<view class="news-content">
-				<view class="content-text">
-					新疆建成首个充电桩实验室
-					<view class="news-time">05-01 09:00</view>
-				</view>
-				<view class="content-img">
-					<img src="/static/img/180023631.jpg" alt="">
-				</view>
-			</view>
-		</view>
-		<view class="bottom">
-			<view class="bot">
-				<view class="bot-line"></view>
-				<view class="bot-text">已经到底了</view>
-				<view class="bot-line"></view>
-			</view>
-		</view>
-		<!-- 导航栏 -->
-		<view class="navigation">
-		<!-- 	<view class="nav-items">
-				<view class="nav-icon iconfont ">
-	                         &#xe610;
-				</view>
-				<view class="nav-text">主页</view>
-			</view>
-			<view class="nav-items">
-				<view class="nav-icon iconfont">&#xe622;</view>
-				<view class="nav-text">找桩</view>
-			</view>
-			<view class="nav-items">
-				<view class="nav-icon iconfont">&#xe627;</view>
-				<view class="nav-text">我的</view>
-			</view> -->
-			<u-tabbar v-model="current" :list="tabbarList" active-color="#009143"></u-tabbar>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default{
-		data(){
-			return{
-				tabbarList:[{
-					iconPath: "home-3- line" ,
-					selectedIconPath: "home -3- fill",
-					text:'主页 ',
-					count: 0,
-					isDot: true,
-					customIcon: true,
-					},
-					{iconPath: "road map- line" ,
-					selectedIconPath:" road map-fill" ,
-					text: ' 找桩',
-					midButton: true,
-					customIcon: true,
-						
-					},
-					{iconPath: "user- 5- line",
-					selectedIconPath: "user-5- fill",
-					text: '我的' ,
-					count: 0,
-					isDot: false,
-					customIcon: true,
-						
-					}],
-					current: 0
-			}
-		}
-	}
-
-</script>
-
-<style lang="scss">
-
-
-	// 头部图片
-	img {
-		width: 100%;
-		height: 100%;
-	}
-	.banner {
-		width: 100%;
-		height: 300px;
-
-		
-	}
-
-
-	// 选项列表
-	.option-list {
-		padding-top: 18px;
-		width: 343px;
-		height: 100px;
-		line-height: 20px;
-		border-radius: 8px;
-		text-align: center;
-		background-color: #fff;
-		position: absolute;
-		top: 260px;
-		left: 0;
-		right: 0;
-		margin: auto;
-		display: flex;
-		justify-content: space-around;
-
-		.list-item {
-
-			// 图标
-			.icon {
-				width: 40px;
-				height: 40px;
-				border-radius: 99px;
-				line-height: 40px;
-				font-size: 24px;
-				text-align: center;
-				margin: auto;
-				color: #ffffff;
-			}
-
-		}
-
-	}
-
-	// 站点
-	.station {
-		// width: 343px;
-		height: 120px;
-		margin-top: 70px;
-		
-	
-		padding-top: 20px;
-		padding: 0 12px;
-		 position: relative;
-		 .img-box{
-			 width: 100%;
-			 height: 100%;
-			 border-radius: 8px;
-			 overflow: hidden;
-		 }
-       img{
-		   width: 100%;
-		   height: 100%;
-		  
-	   }
-	   .text{
-		   position: absolute;
-		   top: 0;left: 20px;
-		   // 头部
-		   .station-title {
-		   	display: flex;
-			margin-top: 12px;
-		   
-		   	.title-left {
-		   		display: inline-block;
-		   		height: 20px;
-		   		width: 44px;
-		   		// margin-left: 12px;
-		   		line-height: 20px;
-		   		border-radius: 50px;
-		   		background-color: rgba(133, 140, 255, 100);
-		   		color: rgba(255, 255, 255, 100);
-		   		font-size: 12px;
-		   		text-align: center;
-		   		font-family: Arial;
-		   	}
-		   
-		   	.title-right {
-		   		display: inline-block;
-		   		margin-left: 4px;
-		   		margin-top: 2px;
-		   		width: 271px;
-		   		height: 16px;
-		   		line-height: 16px;
-		   		color: rgba(16, 16, 16, 100);
-		   		font-size: 16px;
-		   		text-align: left;
-		   		font-family: AlibabaPuHui-regular;
-		   	}
-		   }
-		   
-		   // 价格
-		   .station-price {
-		   	margin-top: 4px;
-		   	display: flex;
-		   
-		   	.price-left {
-		   		width: 40px;
-		   		height: 20px;
-		   		color: rgba(255, 98, 0, 100);
-		   		font-size: 20px;
-		   		text-align: left;
-		   		font-family: Roboto-medium;
-		   	}
-		   
-		   	.price-right {
-		   		height: 20px;
-		   		line-height: 20px;
-		   		margin-left: 2px;
-		   		margin-top: 3px;
-		   		color: rgba(102, 102, 102, 100);
-		   		font-size: 14px;
-		   		text-align: left;
-		   		font-family: AlibabaPuHui-regular;
-		   	}
-		   
-		   }
-		   
-		   // park
-		   .park {
-		   	margin-top: 4px;
-		       display: flex;
-		   	.park-p {
-		   		display: inline-block;
-		   		width: 20px;
-		   		height: 18px;
-		   		line-height: 12px;
-		   		text-align: center;
-		   		background-color: rgba(125, 177, 255, 100);
-		   		color: #fff;
-		   	}
-		   
-		   	.park-text {
-		   		display: inline-block;
-		   		width: 300px;
-		   		height: 17px;
-		   		color: rgba(102, 102, 102, 100);
-		   		font-size: 12px;
-		   		text-align: left;
-		   		margin-left: 2px;
-		   		margin-top: 2px;
-		   	}
-		   }
-		   
-		   // 数量
-		   .count {
-		   	margin-top: 8px;
-		   	width: 96%;
-		   	display: flex;
-		   	justify-content: space-between;
-		   }
-	   }
-		
-	}
-    //定位
-
-   .location{
-	   width: 343px;
-	   background-color: #ffffff;
-	   height: 120px;
-	   display: flex;
-	   margin: 70px auto 0;
-	   border-radius: 8px;
-	   border:#F2F4F4 1px ;
-	   .location-text{
-		   padding: 24px 28px;
-		   .text-1{
-			   height: 16px;
-			   color: rgba(16, 16, 16, 100);
-			   font-size: 16px;
-			   text-align: left;
-		   }
-		   .text-2{
-			   height: 17px;
-			   color: rgba(102, 102, 102, 100);
-			   font-size: 12px;
-			   text-align: left;
-			   margin-top: 4px;
-		   }
-		   .text-3{
-			   width: 80px;
-			   height: 24px;
-			   border-radius: 50px;
-			   color: rgba(0, 185, 98, 100);
-			   font-size: 12px;
-			   text-align: center;
-			   font-family: Microsoft Yahei;
-			   border: 1px solid rgba(0, 185, 98, 100);
-			   margin-top: 11px;
-		   }
-	   }
-    .img-box{
-		width: 120px;
-		height: 120px;
-		float: right;
-	}
-   }
-	//充值
-	.top-up {
-		margin-left: 16px;
-		margin-top: 17px;
-
-		.top-up-title {
-			color: rgba(16, 16, 16, 100);
-			font-size: 16px;
-		}
-
-		.img-box {
-			margin-top: 12px;
-			width: 345px;
-			height: 146px;
-			display: flex;
-			justify-content: space-between;
-
-			.img-1 {
-				width: 166px;
-				height: 146px;
-				position: relative;
-
-				.img-text {
-					position: absolute;
-					top: 0;
-					left: 0;
-					height: 33px;
-					color: #ff4444;
-					font-size: 24px;
-					text-align: left;
-					margin-left: 12px;
-
-					.img-text2 {
-						font-size: 12px
-					}
-
-				}
-			}
-
-			img {
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
-
-	// 小竖线
-	.line {
-		display: inline-block;
-		width: 3px;
-		height: 12px;
-		margin-right: 7px;
-		background-color: rgba(0, 145, 67, 100);
-	}
-
-	// 新闻公告
-	.news-title {
-		padding: 0 16px;
-		margin-top: 12px;
-		color: rgba(16, 16, 16, 100);
-		font-size: 16px;
-		display: flex;
-		justify-content: space-between;
-		background-color: #F2F4F4;
-		
-		.news-title-left {
-			display: flex;
-		}
-
-		.more {
-			font-size: 14px;
-			color: #777777;
-			display: flex;
-			line-height:20px;
-			.more-icon{
-				font-size: 24px
-			}
-		}
-	}
-
-	.news {
-		background-color: #fff;
-		margin: 17px 16px 0;
-
-		.news-content {
-			display: flex;
-			justify-content: space-between;
-			padding: 12px;
-
-			.content-text {
-				width: 211px;
-				height: 42px;
-				line-height: 21px;
-				color: #101010;
-				text-align: left;
-				font-size: 14px
-			}
-
-			;
-
-			.content-img {
-				width: 100px;
-				height: 80px;
-
-				border-radius: 4px;
-
-				img {
-					width: 100%;
-					height: 100%;
-				}
-			}
-
-			.news-time {
-				margin-top: 12px;
-				color: #999999;
-				width: 80px;
-				height: 20px;
-				font-size: 14px;
-			}
-		}
-	}
-
-	.bottom {
-		width: 100%;
-		height: 150px;
-
-		.bot {
-			width: 100%;
-			padding-left: 66px;
-			display: flex;
-
-			.bot-line {
-				margin-top: 20px;
-				width: 80px;
-				height: 0px;
-				border: 1px solid rgba(207, 210, 213, 100);
-			}
-
-			.bot-text {
-				width: 60px;
-				height: 17px;
-				margin-top: 13px;
-				margin-left: 12px;
-				margin-right: 12px;
-				font-size: 12px;
-				text-align: center;
-
-			}
-		}
-	}
-
-	// 导航栏
-	.navigation {
-		width: 100%;
-		// height: 40px;
-		padding: 10px 0;
-		background-color: #fff;
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		display: flex;
-		justify-content: space-around;
-		text-align: center;
-	    color: #999999;
-		.nav-icon{
-			width: 54px;
-			font-size: 24px
-		}
-		.nav-text{
-			font-size: 14px;
-		}
-	}
+<template>
+	<view>
+
+		<!-- 头部图片 -->
+		<view class="banner">
+			<img src="/static/img/banner1.jpg" alt="">
+		</view>
+
+
+		<!-- 选项列表 -->
+		<view class="option-list">
+
+			<view class="list-item">
+				<view class="icon iconfont" style="background-color:#59d96e;">
+					&#xe61a;
+				</view>
+				<view class="text">
+					扫码充电
+				</view>
+
+			</view>
+			<view class="list-item">
+				<view class="icon iconfont" style="background-color:#4BD2C0;">
+					&#xe629;
+				</view>
+				<view class="text">
+					快速充值
+				</view>
+
+			</view>
+			<view class="list-item">
+				<view class="icon iconfont" style="background-color: #6FA5FF;">
+					&#xe625;
+				</view>
+				<view class="text">
+					充电记录
+				</view>
+
+			</view>
+			<view class="list-item">
+				<view class="icon iconfont" style="background-color: #9D9FFF;">
+					&#xe622;
+				</view>
+				<view class="text">
+					附近站点
+				</view>
+
+			</view>
+
+		</view>
+
+		<!-- 站点 -->
+		<!-- <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>
+	   </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>
+			<view class="img-box">
+				<view class="img-1">
+					<img src="/static/img/瓷片区1.png" alt="">
+					<view class="img-text">
+						充100送20
+						<view class="img-text2">即充即赠 立享优惠</view>
+					</view>
+				</view>
+				<view class="img-1">
+					<img src="/static/img/瓷片区2.png" alt="">
+					<view class="img-text" style="color: #FF7C00;">
+						邀请有礼
+						<view class="img-text2 color">最高可得500元</view>
+					</view>
+				</view>
+			</view>
+		</view>
+				<!-- 新闻 -->
+				<view class="news-title">
+					<view class="news-title-left">
+						<view class="line" style="margin-top:4px;"></view>新闻公告
+					</view>
+
+					<view class="more">更多<view class="more-icon iconfont"> &#xe600;</view>
+					</view>
+
+
+				</view>
+				<view class="news">
+
+					<view class="news-content">
+						<view class="content-text">
+							日印计划联手开发低成本充电桩 推动新兴市场电动车发展
+							<view class="news-time">05-01 09:00</view>
+						</view>
+						<view class="content-img">
+							<img src="/static/img/11091323191.jpg" alt="">
+						</view>
+					</view>
+					<view class="news-content">
+						<view class="content-text">
+							我国新能源汽车市场腾飞在即，充换电何时能够不再“拖后腿”？
+							<view class="news-time">05-01 09:00</view>
+						</view>
+						<view class="content-img">
+							<img src="/static/img/103613441.jpg" alt="">
+						</view>
+					</view>
+
+					<view class="news-content">
+						<view class="content-text">
+							新疆建成首个充电桩实验室
+							<view class="news-time">05-01 09:00</view>
+						</view>
+						<view class="content-img">
+							<img src="/static/img/180023631.jpg" alt="">
+						</view>
+					</view>
+				</view>
+				<view class="bottom">
+					<view class="bot">
+						<view class="bot-line"></view>
+						<view class="bot-text">已经到底了</view>
+						<view class="bot-line"></view>
+					</view>
+				</view>
+				<!-- 导航栏 -->
+				<view class="navigation">
+					<!-- 	<view class="nav-items">
+				<view class="nav-icon iconfont ">
+	                         &#xe610;
+				</view>
+				<view class="nav-text">主页</view>
+			</view>
+			<view class="nav-items">
+				<view class="nav-icon iconfont">&#xe622;</view>
+				<view class="nav-text">找桩</view>
+			</view>
+			<view class="nav-items">
+				<view class="nav-icon iconfont">&#xe627;</view>
+				<view class="nav-text">我的</view>
+			</view> -->
+					<u-tabbar v-model="current" :list="tabbarList" active-color="#009143"></u-tabbar>
+				</view>
+			</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tabbarList: [{
+						iconPath: "home-3-line",
+						selectedIconPath: "home-3-fill",
+						text: '主页 ',
+						count: 0,
+						isDot: true,
+						customIcon: true,
+					},
+					{
+						iconPath: "roadmap-line",
+						selectedIconPath: " road map-fill",
+						text: ' 找桩',
+						midButton: true,
+						customIcon: true,
+
+					},
+					{
+						iconPath: "user- 5- line",
+						selectedIconPath: "user-5- fill",
+						text: '我的',
+						count: 0,
+						isDot: false,
+						customIcon: true,
+
+					}
+				],
+				current: 0
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	// 头部图片
+	img {
+		width: 100%;
+		height: 100%;
+	}
+
+	.banner {
+		width: 100%;
+		height: 300px;
+
+
+	}
+
+
+	// 选项列表
+	.option-list {
+		padding-top: 18px;
+		width: 343px;
+		height: 100px;
+		line-height: 20px;
+		border-radius: 8px;
+		text-align: center;
+		background-color: #fff;
+		position: absolute;
+		top: 260px;
+		left: 0;
+		right: 0;
+		margin: auto;
+		display: flex;
+		justify-content: space-around;
+
+		.list-item {
+
+			// 图标
+			.icon {
+				width: 40px;
+				height: 40px;
+				border-radius: 99px;
+				line-height: 40px;
+				font-size: 24px;
+				text-align: center;
+				margin: auto;
+				color: #ffffff;
+			}
+
+		}
+
+	}
+
+	// 站点
+	.station {
+		// width: 343px;
+		height: 120px;
+		margin-top: 70px;
+
+
+		padding-top: 20px;
+		padding: 0 12px;
+		position: relative;
+
+		.img-box {
+			width: 100%;
+			height: 100%;
+			border-radius: 8px;
+			overflow: hidden;
+		}
+
+		img {
+			width: 100%;
+			height: 100%;
+
+		}
+
+		.text {
+			position: absolute;
+			top: 0;
+			left: 20px;
+
+			// 头部
+			.station-title {
+				display: flex;
+				margin-top: 12px;
+
+				.title-left {
+					display: inline-block;
+					height: 20px;
+					width: 44px;
+					// margin-left: 12px;
+					line-height: 20px;
+					border-radius: 50px;
+					background-color: rgba(133, 140, 255, 100);
+					color: rgba(255, 255, 255, 100);
+					font-size: 12px;
+		 		text-align: center;
+					font-family: Arial;
+				}
+
+				.title-right {
+					display: inline-block;
+					margin-left: 4px;
+					margin-top: 2px;
+					width: 271px;
+					height: 16px;
+					line-height: 16px;
+					color: rgba(16, 16, 16, 100);
+					font-size: 16px;
+					text-align: left;
+					font-family: AlibabaPuHui-regular;
+				}
+			}
+
+			// 价格
+			.station-price {
+				margin-top: 4px;
+				display: flex;
+
+				.price-left {
+		 		width: 40px;
+					height: 20px;
+					color: rgba(255, 98, 0, 100);
+					font-size: 20px;
+					text-align: left;
+					font-family: Roboto-medium;
+				}
+
+				.price-right {
+					height: 20px;
+					line-height: 20px;
+					margin-left: 2px;
+					margin-top: 3px;
+					color: rgba(102, 102, 102, 100);
+					font-size: 14px;
+					text-align: left;
+					font-family: AlibabaPuHui-regular;
+				}
+
+			}
+
+			// park
+			.park {
+				margin-top: 4px;
+				display: flex;
+
+				.park-p {
+					display: inline-block;
+					width: 20px;
+					height: 18px;
+					line-height: 12px;
+					text-align: center;
+					background-color: rgba(125, 177, 255, 100);
+					color: #fff;
+				}
+
+				.park-text {
+					display: inline-block;
+					width: 300px;
+					height: 17px;
+					color: rgba(102, 102, 102, 100);
+					font-size: 12px;
+					text-align: left;
+					margin-left: 2px;
+					margin-top: 2px;
+				}
+			}
+
+			// 数量
+			.count {
+				margin-top: 8px;
+				width: 96%;
+				display: flex;
+				justify-content: space-between;
+			}
+		}
+
+	}
+
+	//定位
+
+	.location {
+		width: 343px;
+		background-color: #ffffff;
+		height: 120px;
+		display: flex;
+		margin: 70px auto 0;
+		border-radius: 8px;
+		border: #F2F4F4 1px;
+
+		.location-text {
+			padding: 24px 28px;
+
+			.text-1 {
+				height: 16px;
+				color: rgba(16, 16, 16, 100);
+				font-size: 16px;
+				text-align: left;
+			}
+
+			.text-2 {
+				height: 17px;
+				color: rgba(102, 102, 102, 100);
+				font-size: 12px;
+				text-align: left;
+				margin-top: 4px;
+			}
+
+			.text-3 {
+				width: 80px;
+				height: 24px;
+				border-radius: 50px;
+				color: rgba(0, 185, 98, 100);
+				font-size: 12px;
+				text-align: center;
+				font-family: Microsoft Yahei;
+				border: 1px solid rgba(0, 185, 98, 100);
+				margin-top: 11px;
+			}
+		}
+
+		.img-box {
+			width: 120px;
+			height: 120px;
+			float: right;
+		}
+	}
+
+	//充值
+	.top-up {
+		margin-left: 16px;
+		margin-top: 17px;
+
+		.top-up-title {
+			color: rgba(16, 16, 16, 100);
+			font-size: 16px;
+		}
+
+		.img-box {
+			margin-top: 12px;
+			width: 345px;
+			height: 146px;
+			display: flex;
+			justify-content: space-between;
+
+			.img-1 {
+				width: 166px;
+				height: 146px;
+				position: relative;
+
+				.img-text {
+					position: absolute;
+					top: 0;
+					left: 0;
+					height: 33px;
+					color: #ff4444;
+					font-size: 24px;
+					text-align: left;
+					margin-left: 12px;
+
+					.img-text2 {
+						font-size: 12px
+					}
+
+				}
+			}
+
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+
+	// 小竖线
+	.line {
+		display: inline-block;
+		width: 3px;
+		height: 12px;
+		margin-right: 7px;
+		background-color: rgba(0, 145, 67, 100);
+	}
+
+	// 新闻公告
+	.news-title {
+		padding: 0 16px;
+		margin-top: 12px;
+		color: rgba(16, 16, 16, 100);
+		font-size: 16px;
+		display: flex;
+		justify-content: space-between;
+		background-color: #F2F4F4;
+
+		.news-title-left {
+			display: flex;
+		}
+
+		.more {
+			font-size: 14px;
+			color: #777777;
+			display: flex;
+			line-height: 20px;
+
+			.more-icon {
+				font-size: 24px
+			}
+		}
+	}
+
+	.news {
+		background-color: #fff;
+		margin: 17px 16px 0;
+
+		.news-content {
+			display: flex;
+			justify-content: space-between;
+			padding: 12px;
+
+			.content-text {
+				width: 211px;
+				height: 42px;
+				line-height: 21px;
+				color: #101010;
+				text-align: left;
+				font-size: 14px
+			}
+
+			;
+
+			.content-img {
+				width: 100px;
+				height: 80px;
+
+				border-radius: 4px;
+
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.news-time {
+				margin-top: 12px;
+				color: #999999;
+				width: 80px;
+				height: 20px;
+				font-size: 14px;
+			}
+		}
+	}
+
+	.bottom {
+		width: 100%;
+		height: 150px;
+
+		.bot {
+			width: 100%;
+			padding-left: 66px;
+			display: flex;
+
+			.bot-line {
+				margin-top: 20px;
+				width: 80px;
+				height: 0px;
+				border: 1px solid rgba(207, 210, 213, 100);
+			}
+
+			.bot-text {
+				width: 60px;
+				height: 17px;
+				margin-top: 13px;
+				margin-left: 12px;
+				margin-right: 12px;
+				font-size: 12px;
+				text-align: center;
+
+			}
+		}
+	}
+
+	// 导航栏
+	.navigation {
+		width: 100%;
+		// height: 40px;
+		padding: 10px 0;
+		background-color: #fff;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		display: flex;
+		justify-content: space-around;
+		text-align: center;
+		color: #999999;
+
+		.nav-icon {
+			width: 54px;
+			font-size: 24px
+		}
+
+		.nav-text {
+			font-size: 14px;
+		}
+	}
 </style>

pages/user/car/carAdd.vue

@@ -1,7 +1,18 @@
 <template>
 	<view>
-
-
+		<u-navbar title="车辆管理">
+			<view class="slot-wrap">
+				<span class="navBtn">删除车辆</span>
+			</view>
+		</u-navbar>
+		<view class="carDet">
+			<u-form :model="form" ref="uForm">
+				<u-form-item label="姓名"><u-input v-model="form.name" /></u-form-item>
+				<u-form-item label="简介"><u-input v-model="form.intro" /></u-form-item>
+				<u-form-item label="开关"><u-switch slot="right" v-model="switchVal"></u-switch></u-form-item>
+			</u-form>
+		</view>
+		<u-button class="login-btn" type="success" shape="circle">保存</u-button>
 	</view>
 </template>
 
@@ -9,7 +20,11 @@
 	export default {
 		data() {
 			return {
-				
+				form: {
+					name: '',
+					intro: '',
+				},
+				switchVal: false
 			}
 		},
 		methods: {
@@ -19,9 +34,26 @@
 </script>
 <style>
 	page{
-		background: #f7f7f7;
+		background: #fff;
 	}
 </style>
 <style lang="scss" scoped>
+	.slot-wrap{
+		flex: 1;
+	}
+	.navBtn{
+		float: right;
+		margin-right: 15px;
+		color:#FF6666;
+	}
+	.carDet{
+		padding: 0 16px;
+	}
 	
+	.login-btn {
+		margin: 28px ;
+		background-color:#00B962!important;
+		border-color: #00B962!important;
+		color:#fff!important;
+	}
 </style>

pages/user/car/carDet.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-
+		<u-navbar title="车辆管理"></u-navbar>
 
 	</view>
 </template>
@@ -19,7 +19,7 @@
 </script>
 <style>
 	page{
-		background: #f7f7f7;
+		background: #fff;
 	}
 </style>
 <style lang="scss" scoped>

pages/user/car/index.vue

@@ -1,7 +1,20 @@
 <template>
 	<view>
-
-
+		<u-navbar title="车辆管理"></u-navbar>
+		<!-- <view class="carNone">
+			<img src="/static/img/none2.svg" alt="">
+			<p>暂无绑定车辆</p>
+			<view class="carNone-btn">
+				添加车牌
+			</view>
+		</view> -->
+		<view class="car">
+			<view class="car-item">
+				<span>默认</span>
+				<font>鄂D 999999</font>
+			</view>
+			<view class="car-btn">添加车牌</view>
+		</view>
 	</view>
 </template>
 
@@ -19,9 +32,66 @@
 </script>
 <style>
 	page{
-		background: #f7f7f7;
+		background: #fff;
 	}
 </style>
 <style lang="scss" scoped>
-	
+	.carNone{
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		height: calc(100vh - 44px);
+		align-items: center;
+		img{
+			width: 256px;
+			height: 256px;
+		}
+		p{
+			margin-top: -60px;
+		}
+		.carNone-btn{
+			font-size: 16px;
+			color:#00B962;
+			border: 1px solid #00B962;
+			padding: 10px 70px;
+			border-radius: 20px;
+			margin-top: 48px;
+		}
+	}
+	.car{
+		padding: 24px;
+		.car-item{
+			background-color: #00B962;
+			height: 80px;
+			border-radius: 8px;
+			position: relative;
+			text-align: center;
+			font{
+				color:#fff;
+				font-size: 36px;
+				line-height:80px;
+			}
+			span{
+				position: absolute;
+				height: 24px;
+				width: 48px;
+				background-color: #008A4B ;
+				color:#fff;
+				right: 0;
+				top: 0;
+				text-align: center;
+				line-height: 24px;
+				border-radius: 0 8px 0 8px;
+			}
+		}
+		.car-btn{
+			font-size: 16px;
+			color:#00B962;
+			border: 1px solid #00B962;
+			border-radius: 21px;
+			padding: 10px 0;
+			text-align: center;
+			margin-top: 12px;
+		}
+	}
 </style>

pages/user/finance/recharge.vue

@@ -1,7 +1,44 @@
 <template>
 	<view>
 		<u-navbar title="充值"></u-navbar>
-
+		<view class="recharge">
+			<view class="title">选择充值金额</view>
+			<p>当前余额￥0.00</p>
+			<view class="rechargeMain">
+				<view class="recharge-item">10元</view>
+				<view class="recharge-item active">20元</view>
+				<view class="recharge-item">50元</view>
+				<view class="recharge-item">100元</view>
+				<view class="recharge-item">200元</view>
+				<view class="recharge-item">500元</view>
+			</view>
+			<p>其他充值金额</p>
+			<view class="recharge-input">
+				<u-input v-model="value1" type="text" border="true" />
+			</view>
+			<view class="title">选择支付方式</view>
+			<view class="recharge-radio">
+				<u-radio-group v-model="value2" @change="radioGroupChange" :wrap="true" width="100%">
+					<u-radio active-color="#00B962" @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
+						:disabled="item.disabled" width="100%"> 
+						<view class="recharge-radio-item">
+							<u-icon :name="item.icon" custom-prefix="custom-icon" :color="item.color" size="48"></u-icon>
+							<view class="recharge-radio-name">
+								{{item.name}}
+							</view>
+						</view>
+					</u-radio>
+				</u-radio-group>
+			</view>
+			<view class="recharge-btn">
+				<u-checkbox-group>
+					<u-checkbox v-model="checked" shape="circle">我已阅读并同意《充值协议》</u-checkbox>
+				</u-checkbox-group>
+				<u-button class="success-btn" shape="circle" type="success">
+					<span>立即充值</span>
+				</u-button>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -9,15 +46,108 @@
 	export default {
 		data() {
 			return {
-				
+				list: [{
+						name: '微信支付',
+						icon:'wechat-pay-fill',
+						color:'#22ac38',
+					},
+					{
+						name: '支付宝支付',
+						icon:'alipay-fill',
+						color:'#1677ff',
+					},
+				],
+				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
+				value2: 'orange',
+				value1:'',
+				checked:''
 			}
 		},
 		methods: {
-
+			// 选中某个单选框时，由radio时触发
+			radioChange(e) {
+				// console.log(e);
+			},
+			// 选中任一radio时，由radio-group触发
+			radioGroupChange(e) {
+				// console.log(e);
+			},
 		}
 	}
 </script>
+<style>
+	page{
+		background-color: #fff;
+	}
+</style>
 
 <style lang="scss" scoped>
-	
+	/deep/.u-radio-group{
+		width: 100%;
+	}
+	/deep/.u-radio{
+		position: relative;
+	}
+	/deep/.u-radio__icon-wrap{
+		position: absolute;
+		right: 0;
+	}
+	.recharge{
+		padding: 16px;
+		.title{
+			font-size: 16px;
+		}
+		p{
+			color:#666;
+			margin-top: 4px;
+		}
+		.rechargeMain{
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			margin-top: 12px;
+			margin-bottom: 20px;
+			.recharge-item{
+				width: 31%;
+				border: 1px solid #e3e3e3;
+				padding: 15px 0;
+				border-radius: 4px;
+				text-align: center;
+				margin-bottom: 10px;
+				font-size: 16px;
+			}
+			.active{
+				background-color: #EFFFF7;
+				border-color: #00B962;
+				color:#00B962;
+			}
+		}	
+	}
+	.recharge-input{
+		margin-top: 8px;
+		margin-bottom: 32px;
+	}
+	.recharge-radio{
+		margin-top: 10px;
+		.recharge-radio-item{
+			display: flex;
+			align-items: center;
+		}
+		.recharge-radio-name{
+			margin-left: 8px;
+		}
+	}
+	.recharge-btn{
+		position: fixed;
+		left: 16px;
+		right: 16px;
+		bottom: 16px;
+	}
+	.success-btn{
+		margin-top: 10px;
+		background-color:#00B962!important;
+		flex: 1;
+		border-color: #00B962!important;
+		color:#fff!important;
+	}
 </style>