Merge branch 'master' of http://47.92.161.104:10080/zkx/JP-ChargeTeam51

App.vue

@@ -1,4 +1,6 @@
-<script>
+
+<script>
+	
 	import '.env.js'
 	import 'font.js'
 	export default {
@@ -28,7 +30,14 @@
 	/*每个页面公共css */
 	//@import 'static/css/style.css';
 	
-	@import '@/assets/font/iconfont.css';
+	@import '@/assets/font/iconfont.css';
+	@import '@/iconfont/iconfont.css';
+	
+	html, body {
+	  background-color: #F2F4F4;  
+	  margin: 0;
+	  padding: 0;
+	}
 	.uni-icon-success-no-circle:before {
 	    content: "" !important ;
 		display: none;
@@ -45,5 +54,6 @@
 			  cursor: pointer;
 			  text-align: center;
 			  border-radius: 1px;
-	}
+	}
+
 </style>

iconfont/iconfont.css

@@ -0,0 +1,226 @@
+@font-face {
+  font-family: 'iconfont';  /* project id 3394761 */
+  src: url('');
+  src: url('?#iefix') format('embedded-opentype'),
+  url('https://at.alicdn.com/t/font_3394761_ya9wpfykipd.woff2') format('woff2'),
+  url('https://at.alicdn.com/t/font_3394761_ya9wpfykipd.woff') format('woff'),
+  url('https://at.alicdn.com/t/font_3394761_ya9twpfykipd.ttf') format('truetype'),
+  url('#iconfont') format('svg');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-chongzhi:before {
+  content: "\e633";
+}
+
+.icon-arrow-right-s-line:before {
+  content: "\e600";
+}
+
+.icon-arrow-drop-right-line:before {
+  content: "\e601";
+}
+
+.icon-arrow-left-s-line:before {
+  content: "\e602";
+}
+
+.icon-arrow-drop-up-fill:before {
+  content: "\e603";
+}
+
+.icon-arrow-drop-up-line:before {
+  content: "\e604";
+}
+
+.icon-arrow-up-s-fill:before {
+  content: "\e605";
+}
+
+.icon-charging-pile-fill:before {
+  content: "\e606";
+}
+
+.icon-arrow-up-s-line:before {
+  content: "\e607";
+}
+
+.icon-camera-fill:before {
+  content: "\e608";
+}
+
+.icon-close-line:before {
+  content: "\e609";
+}
+
+.icon-charging-pile-line:before {
+  content: "\e60a";
+}
+
+.icon-close-circle-fill:before {
+  content: "\e60b";
+}
+
+.icon-compass-3-fill:before {
+  content: "\e60c";
+}
+
+.icon-customer-service-2-line:before {
+  content: "\e60d";
+}
+
+.icon-compass-discover-line:before {
+  content: "\e60e";
+}
+
+.icon-error-warning-line:before {
+  content: "\e60f";
+}
+
+.icon-home-3-fill:before {
+  content: "\e610";
+}
+
+.icon-feedback-fill:before {
+  content: "\e611";
+}
+
+.icon-eye-fill:before {
+  content: "\e612";
+}
+
+.icon-list-check-2:before {
+  content: "\e613";
+}
+
+.icon-parking-box-fill:before {
+  content: "\e614";
+}
+
+.icon-navigation-fill:before {
+  content: "\e615";
+}
+
+.icon-customer-service-fill:before {
+  content: "\e616";
+}
+
+.icon-information-fill:before {
+  content: "\e617";
+}
+
+.icon-plug-line:before {
+  content: "\e618";
+}
+
+.icon-home-3-line:before {
+  content: "\e619";
+}
+
+.icon-qr-scan-2-line:before {
+  content: "\e61a";
+}
+
+.icon-qr-scan-line:before {
+  content: "\e61b";
+}
+
+.icon-parking-box-line:before {
+  content: "\e61c";
+}
+
+.icon-question-line:before {
+  content: "\e61d";
+}
+
+.icon-question-fill:before {
+  content: "\e61e";
+}
+
+.icon-search-2-line:before {
+  content: "\e61f";
+}
+
+.icon-road-map-fill:before {
+  content: "\e620";
+}
+
+.icon-store-3-line:before {
+  content: "\e621";
+}
+
+.icon-road-map-line:before {
+  content: "\e622";
+}
+
+.icon-settings-4-fill:before {
+  content: "\e623";
+}
+
+.icon-user-2-fill:before {
+  content: "\e624";
+}
+
+.icon-todo-line:before {
+  content: "\e625";
+}
+
+.icon-todo-fill:before {
+  content: "\e626";
+}
+
+.icon-user-5-line:before {
+  content: "\e627";
+}
+
+.icon-user-5-fill:before {
+  content: "\e628";
+}
+
+.icon-wallet-3-line:before {
+  content: "\e629";
+}
+
+.icon-arrow-drop-down-fill:before {
+  content: "\e62a";
+}
+
+.icon-arrow-down-s-fill:before {
+  content: "\e62b";
+}
+
+.icon-arrow-down-s-line:before {
+  content: "\e62c";
+}
+
+.icon-wechat-pay-fill:before {
+  content: "\e62d";
+}
+
+.icon-arrow-drop-down-line:before {
+  content: "\e62e";
+}
+
+.icon-arrow-drop-left-fill:before {
+  content: "\e62f";
+}
+
+.icon-alipay-fill:before {
+  content: "\e630";
+}
+
+.icon-arrow-drop-left-line:before {
+  content: "\e631";
+}
+
+.icon-arrow-drop-right-fill:before {
+  content: "\e632";
+}
+

pages.json

@@ -19,6 +19,36 @@
 		}
 		
 
+        ,{
+            "path" : "pages/login/login",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/login/login",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        
+      
+        
+        ,{
+            "path" : "pages/chargingPileDetails/chargingPileDetails",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 			"navigationStyle": "custom", // 隐藏系统导航栏

pages/index/index.vue

@@ -1,8 +1,495 @@
-<template>
-</template>
-
-<script>
-</script>
-
-<style>
-</style>
+<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="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>
+		</view>
+	</view>
+
+
+
+
+
+
+</template>
+
+<script>
+
+</script>
+
+<style lang="scss">
+
+
+	// 头部图片
+	.banner {
+		width: 375px;
+		height: 300px;
+
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+
+	// 选项列表
+	.option-list {
+		padding-top: 18px;
+		margin-left: 16px;
+		width: 343px;
+		height: 100px;
+		line-height: 20px;
+		border-radius: 8px;
+		text-align: center;
+		background-color: #fff;
+		position: absolute;
+		top: 260px;
+		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;
+		margin-left: 16px;
+		padding-top: 20px;
+		padding: 0 12px;
+		 position: relative;
+       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;
+		   }
+	   }
+		
+	}
+
+
+	//充值
+	.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: 375px;
+		// 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>