1111

pages/searchPile/chargeProcess/charge.vue

@@ -0,0 +1,165 @@
+<template>
+	<view>
+		<u-navbar title="充电"></u-navbar>
+		<view class="recharge">
+			<view class="title">请选择充电金额</view>
+			<p>当前余额￥10.00</p>
+			<view class="rechargeMain">
+				<view class="recharge-item" v-for="(item,index) in moneyList" :key="item.id">{{item.name}}</view>
+			</view>
+			<p>其他充电模式</p>
+			<view class="self-stop">
+				充满自停
+			</view>
+ 
+
+
+		</view>
+	<view class="but-box">
+		<u-button shape="circle">开始充电</u-button>
+	</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+				moneyList: [{
+						id: '1',
+						name: '5'
+					},
+					{
+						id: '2',
+						name: '10'
+					},
+					{
+						id: '3',
+						name: '20'
+					},
+					{
+						id: '4',
+						name: '50'
+					},
+					{
+						id: '5',
+						name: '100'
+					},
+					{
+						id: '6',
+						name: '其他充值金额'
+					},
+				],
+
+
+			}
+		},
+
+	}
+</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-item:last-child {
+		font-size: 14px !important;
+		color: #999999;
+	}
+
+	.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;
+			}
+		}
+
+		.self-stop {
+			width: 105px;
+			height: 48px;
+			line-height: 48px;
+			border-radius: 4px;
+			color: #101010;
+			font-size: 16px;
+			text-align: center;
+			font-family: Arial;
+			border: 1px solid rgba(227, 227, 227, 100);
+			margin-top: 12px;
+		}
+	}
+
+	.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;
+		}
+	}
+	.but-box{
+		width: 335px;
+		height: 44px;
+		margin: 0 auto;
+		.u-size-default[data-v-3bf2dba7]{
+			background-color: rgba(0, 185, 98, 100);
+			color: rgba(255, 255, 255, 100);
+			font-size: 16px;
+			text-align: center;
+		}
+	}
+	
+</style>

pages/searchPile/chargeProcess/chargeProcess.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/searchPile/chargeProcess/dcChargeEnd.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/searchPile/chargeProcess/dcCharging.vue

@@ -0,0 +1,65 @@
+<template>
+	<view style="background-color: #fff;">
+		<u-navbar title="启动中">
+		</u-navbar>
+		<view class="iconfont tittle-font">
+			&#xe616;
+		</view>
+		
+		<view class="progress-bar">
+				<u-circle-progress width="300" active-color="#2979ff" :percent="0">
+					<view class="u-progress-content">
+						<view class="u-progress-dot"></view>
+						<text class='u-progress-info'>0.0%</text>
+					</view>
+				</u-circle-progress>
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+	.tittle-font {
+		font-size: 24px;
+		position: fixed;
+		top: 12px;
+		right: 16px;
+		z-index: 99999;
+
+	}
+	
+.progress-bar{
+	margin:10px auto;
+	width: 220px;
+	height: 220px;
+	
+	
+	.u-progress-content {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		
+		.u-progress-dot {
+			width: 16rpx;
+			height: 16rpx;
+			border-radius: 50%;
+			background-color: #fb9126;
+		}
+		
+		.u-progress-info {
+			font-size: 28rpx;
+			padding-left: 16rpx;
+			letter-spacing: 2rpx
+		}
+		/deep/.u-progress-dot[data-v-05b104e0]{
+			display: none;
+		}
+		/deep/.u-circle-progress[data-v-cab6fc66]{
+			margin: 30px ;
+		}
+	
+}
+</style>

pages/searchPile/chargeProcess/exChanging.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/searchPile/chargeProcess/exChargeEnd.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/searchPile/searchPileMap.vue

@@ -0,0 +1,352 @@
+<template>
+	<view>
+		<!-- 头部 -->
+		<view>
+			<view class="top">
+				<view class="">
+					荆州市 <text class="iconfont" style="color: #bdbdbd;">&#xe62a;</text>
+				</view>
+				<u-search :show-action="false" placeholder="搜索站点名称"></u-search>
+				<view class="">
+					<text class="iconfont">&#xe613;</text> <text class="list">列表</text>
+				</view>
+			</view>
+		</view>
+		<!-- 条件选项 -->
+		<view class="condition">
+			<view class="condition-distance">
+				10公里<text class="iconfont" style="color: #bdbdbd;">&#xe62a;</text>
+			</view>
+			<view class="condition-type">
+				直流快充<text class="iconfont" style="color: #bdbdbd;">&#xe62a;</text>
+			</view>
+			<view class="condition-screen">
+				筛选<text class="iconfont" style="color: #bdbdbd;">&#xe62a;</text>
+			</view>
+
+		</view>
+		<!-- 地图 -->
+		<view class="map">
+			<view class="station-icon"><text class="iconfont">&#xe606;</text>
+			<view class="corner"></view>
+			</view>
+			<view class="station-icon2">
+				<view class="iconfont icon2-left">&#xe606;</view>
+				<view class="icon2-right">
+					<view class="corner2"></view>
+					<view class="">
+						￥1.25
+					</view>
+					<view class="">
+						空闲10
+					</view>
+				</view>
+			</view>
+			
+			<img src="/static/img/地图@1x.png" alt="">
+		</view>
+		<view class="charing-slow">
+			<text class="fast-charge">快充</text> <text class="station-items">荆沙大道救助站充电站</text>
+			<view class="address">
+				湖北省荆州市沙市区江津东路附155号
+			</view>
+			<view class="price">
+				<view class="num">1.25</view>
+				<view class="unit">
+					起 元/度
+				</view>
+			</view>
+			<view class="park">
+				<text class="park-p">p</text>
+				<text class="park-text">2小时免费停车</text>
+			</view>
+			<view class="free">
+				<view class="free-num">
+					<text style="color:#009143;">空闲10</text>/总数10
+				</view>
+				<view class="distance">
+					<text class="iconfont distance-font">&#xe615;</text>1.2公里 3分钟
+				</view>
+			</view>
+		</view>
+
+		<u-tabbar v-model="current" :list="tabbarList" active-color="#009143"></u-tabbar>
+	</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" scoped>
+	.top {
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		height: 44px;
+		color: #666666;
+		background-color: rgba(255, 255, 255, 100);
+		padding: 12px 16px;
+		position: fixed;
+		top: 0;
+		left: 0;
+
+		.u-search[data-v-1a326067] {
+			flex: 0.9;
+		}
+
+		.list {
+			margin-left: 2px;
+
+		}
+	}
+
+	.condition {
+		height: 44px;
+		line-height: 20px;
+		padding: 12px 16px;
+		display: flex;
+		justify-content: space-between;
+		background-color: #fff;
+
+		.condition-type {
+			margin-left: 12px;
+		}
+
+		.condition-screen {
+			margin-left: 135px;
+		}
+	}
+
+	.map {
+		width: 100%;
+
+		height: 100%;
+		position: relative;
+
+		img {
+			width: 100%;
+			height: 100%;
+		}
+
+		.station-icon {
+			width: 36px;
+			height: 36px;
+			line-height: 36px;
+			text-align: center;
+			border: 1px solid rgba(133, 140, 255, 100);
+			color: #b58cff;
+			border-radius: 999px;
+			position: absolute;
+			top: 89px;
+			left: 38px;
+			.corner{
+			   width: 0;
+			   height: 0;
+				position: absolute;
+				top: 34px;
+				left: 0;
+				right: 0;
+				margin: auto;
+				border-bottom: 4px solid transparent;
+				border-left: 4px solid transparent;
+				border-right: 4px solid transparent;
+				border-top: 6px solid #b58cff ;
+			}
+		}
+
+		.station-icon2 {
+			width: 100px;
+			height: 36px;
+			line-height: 20px;
+			border-radius: 50px;
+			background-color: rgba(0, 185, 98, 100);
+			text-align: center;
+			display: flex;
+			position: absolute;
+			top: 191px;
+			left: 168px;
+			.icon2-left{
+				width: 36px;
+				height: 36px;
+				line-height: 36px;
+				text-align: center;
+				border: 1px solid rgba(0, 185, 98, 100);
+				border-radius: 999px;
+				background-color: #fff;
+				color: #00b962;
+			}
+			.icon2-right{
+				color: #ffffff;
+				line-height: 14px;
+				padding: 4px;
+			}
+		}
+		.corner2{
+		   width: 0;
+		   height: 0;
+			position: absolute;
+			top: 36px;
+			left: 0;
+			right: 0;
+			margin: auto;
+			border-bottom: 6px solid transparent;
+			border-left: 6px solid transparent;
+			border-right: 6px solid transparent;
+			border-top: 8px solid #00b962 ;
+			
+		}
+	}
+
+	.charing-slow {
+		background-color: #fff;
+		margin: 0 12px;
+		border-radius: 8px;
+		padding: 10px 12px 0px;
+		position: fixed;
+		bottom: 68px;
+		left: 0;
+		right: 0;
+
+		.fast-charge {
+			display: inline-block;
+			width: 44px;
+			height: 20px;
+			line-height: 20px;
+			border-radius: 50px;
+			background-color: #9d9fff;
+			color: rgba(255, 255, 255, 100);
+			font-size: 12px;
+			text-align: center;
+		}
+
+		.station-items {
+			display: inline-block;
+			height: 16px;
+			line-height: 16px;
+			font-size: 16px;
+			margin-left: 4px;
+			color: #101010;
+
+
+		}
+
+		.address {
+			margin-top: 8px;
+			line-height: 16px;
+			font-size: 11px;
+			color: rgba(119, 119, 119, 100);
+		}
+
+		.price {
+			display: flex;
+			height: 20px;
+
+			.num {
+				height: 20px;
+				color: rgba(255, 98, 0, 100);
+				font-size: 20px;
+				text-align: left;
+				font-family: Roboto-medium;
+			}
+
+			.unit {
+				height: 14px;
+				line-height: 14px;
+				color: rgba(102, 102, 102, 100);
+				font-size: 14px;
+				text-align: left;
+				font-family: AlibabaPuHui-regular;
+				margin-top: 6px;
+				margin-left: 4px;
+			}
+		}
+
+		.park {
+			margin-top: 8px;
+			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: 4px;
+				margin-top: 2px;
+			}
+		}
+
+		.free {
+			display: flex;
+			justify-content: space-between;
+			height: 52px;
+			border-top: 1px solid rgba(238, 242, 240, 100);
+			margin-top: 10px;
+
+			.free-num {
+				line-height: 52px;
+				font-size: 16px
+			}
+
+			.distance {
+				width: 130px;
+				height: 28px;
+				line-height: 28px;
+				color: rgba(255, 255, 255, 100);
+				font-size: 14px;
+				background-color: #00b962;
+				border-radius: 50px;
+				margin: 12px;
+				text-align: center;
+
+				.distance-font {
+					font-size: 16px
+				}
+
+			}
+		}
+	}
+</style>

pages/searchPile/stationAndPile/chargePriceDetails.vue

@@ -0,0 +1,200 @@
+<template>
+	<view style="padding-bottom: 148px;">
+		<u-navbar title="充电价格详情"></u-navbar>
+		<view class="main">
+			<view class="tabs-box">
+				<u-tabs inactive-color="#888888" active-color="#101010" :list="list" :is-scroll="false"
+					:current="current" @change="change"></u-tabs>
+			</view>
+			<view class="line-box"><u-line color="#999999" /></view>
+			<view class="time-frame">
+				<view class="time-items">
+					<view class="time-price">
+						<view class="time">
+							00:00-07:00
+						</view>
+						<view class="price">
+							<text style="color: #ff3d00; font-size: 18px;">1.2500</text>
+							<text class="unit">元/度</text>
+						</view>
+					</view>
+					<view class="unitPrice-serviceCharge">
+						充电单价：￥1.0000 | 服务费：￥0.2500
+					</view>
+				</view>
+				<view class="time-items">
+					<view class="time-price">
+						<view class="time">
+							00:70-09:00
+						</view>
+						<view class="price">
+							<text style="color: #ff3d00; font-size: 18px;">1.2500</text>
+							<text class="unit">元/度</text>
+						</view>
+					</view>
+					<view class="unitPrice-serviceCharge">
+						充电单价：￥1.0000 | 服务费：￥0.2500
+					</view>
+				</view>
+				<view class="time-items">
+					<view class="time-price">
+						<view class="time">
+							09:00-15:00
+						</view>
+						<view class="price">
+							<text style="color: #ff3d00; font-size: 18px;">1.2500</text>
+							<text class="unit">元/度</text>
+						</view>
+					</view>
+					<view class="unitPrice-serviceCharge">
+						充电单价：￥1.0000 | 服务费：￥0.2500
+					</view>
+				</view>
+				<view class="time-items">
+					<view class="time-price">
+						<view class="time">
+							15:00-20:00
+						</view>
+						<view class="price">
+							<text style="color: #ff3d00; font-size: 18px;">1.2500</text>
+							<text class="unit">元/度</text>
+						</view>
+					</view>
+					<view class="unitPrice-serviceCharge">
+						充电单价：￥1.0000 | 服务费：￥0.2500
+					</view>
+				</view>
+				<view class="time-items">
+					<view class="time-price">
+						<view class="time">
+							20:00-22:00
+						</view>
+						<view class="price">
+							<text style="color: #ff3d00; font-size: 18px;">1.2500</text>
+							<text class="unit">元/度</text>
+						</view>
+					</view>
+					<view class="unitPrice-serviceCharge">
+						充电单价：￥1.0000 | 服务费：￥0.2500
+					</view>
+				</view>
+				<view class="time-items">
+					<view class="time-price">
+						<view class="time">
+							22:00-23:00
+						</view>
+						<view class="price">
+							<text style="color: #ff3d00; font-size: 18px;">1.2500</text>
+							<text class="unit">元/度</text>
+						</view>
+					</view>
+					<view class="unitPrice-serviceCharge">
+						充电单价：￥1.0000 | 服务费：￥0.2500
+					</view>
+				</view>
+				<view class="time-items">
+					<view class="time-price">
+						<view class="time">
+							23:00-23:59
+						</view>
+						<view class="price">
+							<text style="color: #ff3d00; font-size: 18px;">1.2500</text>
+							<text class="unit">元/度</text>
+						</view>
+					</view>
+					<view class="unitPrice-serviceCharge">
+						充电单价：￥1.0000 | 服务费：￥0.2500
+					</view>
+				</view>
+			</view>
+		</view>
+	<view class="hint">
+		*充电费用仅供参考，请以充电桩上的费用为准。
+	</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					name: '直流快充'
+				}, {
+					name: '交流慢充'
+				}],
+				current: 0
+			}
+		},
+		methods: {
+			change(index) {
+				this.current = index;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.main {
+		background-color: #fff;
+       
+		.tabs-box {
+			width: 55%;
+			margin: 0 auto;
+			line-height: 44px;
+			position: relative;
+		}
+			.line-box{
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				top: 79px;
+			}
+
+		.time-frame {
+			padding-left: 16px;
+
+			.time-items {
+				padding-right: 16px;
+				height: 76px;
+				border-bottom: #F2F4F4 1px solid;
+                  position: relative;
+				.time-price {
+					display: flex;
+					justify-content: space-between;
+					padding: 16px 0 10px;
+
+					.time {
+						color: rgba(16, 16, 16, 100);
+						font-size: 16px;
+					}
+
+					.price {
+						.unit {
+							color: rgba(102, 102, 102, 100);
+							font-size: 14px;
+							margin-left: 4px;
+						}
+					}
+
+				}
+
+				.unitPrice-serviceCharge {
+					float: right;
+					font-size: 12px;
+					color: #888888;
+				}
+			}
+		}
+	}
+	.hint{
+		width: 100%;
+		text-align: center;
+		color: #999999;
+		font-size: 12px;
+		position: absolute;
+		bottom: 12px;
+		left: 0;
+		
+		}
+</style>

pages/searchPile/stationAndPile/chargingPileDetails.vue

@@ -0,0 +1,350 @@
+<template>
+	<view >
+		<!-- 头部 -->
+		<view class="title"> <text class="iconfont back">&#xe602;</text><text>充电桩详情</text></view>
+<!-- 主体 -->
+<!-- 充电桩信息 -->
+       <view class="main">
+		   <view class="main-detail">
+			   <view class="detail-name">
+			   	充电桩编号
+			   </view>
+		   	    <view class="detail-content" style="font-weight: 900;">A000152</view>
+		   </view>
+		   <view class="main-detail">
+		   			   <view class="detail-name">
+		   			   	接口类型
+		   			   </view>
+		   	    <view class="detail-content">国际直流</view>
+		   </view>
+		   <view class="main-detail">
+		   			   <view class="detail-name">
+		   			   	类型
+		   			   </view>
+		   	    <view class="detail-content">快充</view>
+		   </view>
+		   <view class="main-detail">
+		   			   <view class="detail-name">
+		   			   	充电功率
+		   			   </view>
+		   	    <view class="detail-content"  style="font-weight: 900;">60000.0kW</view>
+		   </view>
+	    <!-- 收费标准 -->
+		<view class="rates">
+			<view class="rates-title">
+				<view class="title-left">
+					收费标准
+				</view>
+				<view class="title-right">
+					峰谷平电价计费
+				</view>
+				
+			</view>
+			<!-- 时段分类 -->
+		<view class="time-rates">
+			<view class="time-part">
+				<view class="part-top">
+					<view class="time">
+						00:00-07:00
+					</view>
+					<view class="price">
+						
+						<text class="price-number">1.2500</text>
+						<text class="price-unit">元/度</text>
+					</view>
+				</view>
+				<view class="part-bottom">
+					<view class="unitPrice-servicePrice">
+						充电单价：￥1.0000 | 服务费：￥0.2500
+					</view>
+				</view>
+			</view>
+			<view class="time-part">
+				<view class="part-top">
+					<view class="time">
+						00:70-09:00
+					</view>
+					<view class="price">
+						
+						<text class="price-number">1.2500</text>
+						<text class="price-unit">元/度</text>
+					</view>
+				</view>
+				<view class="part-bottom">
+					<view class="unitPrice-servicePrice">
+						充电单价：￥1.0000 | 服务费：￥0.2500
+					</view>
+				</view>
+			</view>
+			<view class="time-part">
+				<view class="part-top">
+					<view class="time">
+						09:00-15:00
+					</view>
+					<view class="price">
+						
+						<text class="price-number">1.2500</text>
+						<text class="price-unit">元/度</text>
+					</view>
+				</view>
+				<view class="part-bottom">
+					<view class="unitPrice-servicePrice">
+						充电单价：￥1.0000 | 服务费：￥0.2500
+					</view>
+				</view>
+			</view>
+			<view class="time-part">
+				<view class="part-top">
+					<view class="time">
+						15:00-20:00
+					</view>
+					<view class="price">
+						
+						<text class="price-number">1.2500</text>
+						<text class="price-unit">元/度</text>
+					</view>
+				</view>
+				<view class="part-bottom">
+					<view class="unitPrice-servicePrice">
+						充电单价：￥1.0000 | 服务费：￥0.2500
+					</view>
+				</view>
+			</view>
+			<view class="time-part">
+				<view class="part-top">
+					<view class="time">
+						20:00-22:00
+					</view>
+					<view class="price">
+						
+						<text class="price-number">1.2500</text>
+						<text class="price-unit">元/度</text>
+					</view>
+				</view>
+				<view class="part-bottom">
+					<view class="unitPrice-servicePrice">
+						充电单价：￥1.0000 | 服务费：￥0.2500
+					</view>
+				</view>
+			</view>
+			<view class="time-part">
+				<view class="part-top">
+					<view class="time">
+						22:00-23:00
+					</view>
+					<view class="price">
+						
+						<text class="price-number">1.2500</text>
+						<text class="price-unit">元/度</text>
+					</view>
+				</view>
+				<view class="part-bottom">
+					<view class="unitPrice-servicePrice">
+						充电单价：￥1.0000 | 服务费：￥0.2500
+					</view>
+				</view>
+			</view>
+			<view class="time-part">
+				<view class="part-top">
+					<view class="time">
+						23:00-23:59
+					</view>
+					<view class="price">
+						
+						<text class="price-number">1.2500</text>
+						<text class="price-unit">元/度</text>
+					</view>
+				</view>
+				<view class="part-bottom">
+					<view class="unitPrice-servicePrice">
+						充电单价：￥1.0000 | 服务费：￥0.2500
+					</view>
+				</view>
+			</view>
+			
+			
+		</view>
+
+		</view >
+			
+			<!-- 提示 -->
+			<view class="tips">
+				  <u-alert-tips size="12"  type="warning"  :description="description" ></u-alert-tips>
+				  <view class="iconfont tips-font">
+				  	&#xe60f;
+				  </view>
+			</view>
+	   </view>
+<!-- 底部按钮 -->
+
+<view class="bottom">
+	<view class="botton">开始充电</view>
+</view>
+	</view>
+	
+	
+</template>
+<script>
+	export default {
+		data() {
+		return{
+			
+			description: '温馨提示：充电前请确保您的车辆已与充电桩连接！并关闭车内电源。'
+		}
+		}
+	}
+</script>
+
+
+<style lang="scss">
+	// 头部
+	.title {
+		width: 100%;
+		line-height: 44px;
+		background-color: rgba(255, 255, 255, 100);
+		text-align: center;
+		border: 1px solid rgba(242, 242, 242, 100);
+		position: fixed;
+		top: 0;
+		
+	}
+	
+	// 主体
+	.main{
+		width: 100%;
+		margin-top: 44px;
+		// margin-bottom: 64px;
+		padding-bottom: 234px;
+		.main-detail{
+			display: flex;
+			justify-content: space-between;
+			padding: 14px 16px 0 0;
+			height: 48px;
+			line-height: 48px;
+			background-color: #fff;
+			border-bottom: 1px solid rgba(242, 242, 242, 100);
+			.detail-name{
+               margin-left: 16px;
+				height: 20px;
+				line-height: 23px;
+				color: rgba(102, 102, 102, 100);
+				font-size: 14px;
+				
+			}
+			.detail-content{
+				height: 23px;
+				line-height: 23px;
+				color: rgba(51, 51, 51, 100);
+				font-size: 14px;
+				
+			}
+		}
+		// 收费标准
+	   .rates{
+		   width: 100%;
+		   background-color: #fff;
+		   margin-top: 12px;
+		   .rates-title{
+			   display: flex;
+			   justify-content: space-between;
+			   height: 48px;
+			   line-height: 48px;
+			   padding: 0px 16px 0 ;
+			   border-bottom: 1px solid rgba(242, 242, 242, 100);
+		   }
+		   .time-part{
+			   width: 100%;
+			   .part-top{
+				   display: flex;
+				   justify-content: space-between;
+				   padding: 16px;
+				   .time{
+					   color: rgba(16, 16, 16, 100);
+					   font-size: 16px;
+				   }
+				   .price{
+					   .price-number{
+						   color: rgba(255, 61, 0, 100);
+						   font-size: 18px;
+						   text-align: right;
+						   font-family: Roboto-regular;
+						   display: inline-block;
+						   height: 20px;
+						   font-weight: 600;
+					   }
+					   .price-unit{
+						   color: rgba(102, 102, 102, 100);
+						   font-size: 14px;
+						   text-align: right;
+						   margin-left: 4px;
+						   display: inline-block;
+						   height: 20px;
+					   }
+				   }
+			   }
+			   .part-bottom{
+				   .unitPrice-servicePrice{
+					   eight: 18px;
+					   color: rgba(136, 136, 136, 100);
+					   font-size: 12px;
+					   text-align: right;
+					   padding-right: 16px;
+					   padding-bottom: 18px;
+				   }
+			   }
+		   }
+	   }
+	 .tips{
+		
+		 font-size: 12px;
+		 margin-top: 12px;
+		  background-color: #fff;
+		  position: relative;
+		  .tips-font{
+			  color: #ff7300;
+			  position: absolute;
+			  top: 16px;
+			  left: 16px;
+		  }
+		  /deep/.u-alert-tips--border--warning-disabled[data-v-4d234687]{
+			  border-color: #fff;
+		  }
+		  /deep/.u-alert-tips--bg--warning-light[data-v-4d234687]{
+			  background-color: #fff;
+			  padding: 12px 16px 12px 36px;
+			  line-height: 17px;
+		  }
+		 
+		 /deep/.u-alert-desc[data-v-4d234687]{
+		 			 font-size: 12px;
+					 color: #ff7300;
+					
+		 }
+	 }
+	}
+	
+	// 尾部
+	.bottom{
+		background-color: #fff;;
+		width: 100%;
+		height: 64px;
+		line-height: 64px;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		z-index:999;
+		padding: 12px 16px;
+		.botton{
+			width: 343px;
+			height: 40px;
+			line-height: 40px;
+			border-radius: 50px;
+			background-color: rgba(0, 185, 98, 100);
+			color: rgba(255, 255, 255, 100);
+			font-size: 16px;
+			text-align: center;
+			margin: 0 auto;
+		}
+		
+	}
+</style>

pages/searchPile/stationAndPile/stationDetailsMap.vue

@@ -0,0 +1,234 @@
+<template>
+	<view>
+		<u-navbar title="站点详情"></u-navbar>
+		<view class="main">
+			<img src="/static/img/地图@1x.png" alt="">
+			<view class="station-icon2">
+				<view class="iconfont icon2-left">&#xe606;</view>
+				<view class="icon2-right">
+					<view class="corner2"></view>
+					<view class="">
+						￥1.25
+					</view>
+					<view class="" style="font-size: 10px;">
+						空闲10
+					</view>
+				</view>
+			</view>
+			<view class="charing-slow">
+				<text class="slow-charge">慢充</text> <text class="station-items">荆沙大道救助站充电站</text>
+				<view class="address">
+					湖北省荆州市沙市区江津东路附155号
+				</view>
+				<view class="price">
+					<view class="num">1.25</view>
+					<view class="unit">
+						起 元/度
+					</view>
+				</view>
+				<view class="park">
+					<view class="park-text">
+						<text class="park-p">p</text>
+						<text class="park-text">以实际费用为准</text>
+					</view>
+					<view class="">
+						<text style="color: #009143;">空闲10/</text><text>总数10</text>
+					</view>
+				</view>
+				<view class="bottom">
+					<view class="scan-qrcode">
+						<text class="iconfont">&#xe61a;</text>
+						<text class="text">扫码充电</text>
+						</view>
+					<view class="distance-time">
+						<text class="iconfont">&#xe615;</text>
+						<text class="text">0.1公里 1分钟</text>
+						</view>
+				</view>
+				
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+	.main{
+		width: 100%;
+		height: 100%;
+		img{
+			width: 100%;
+			height: 100%;
+		}
+		.station-icon2 {
+			width: 100px;
+			height: 36px;
+			line-height: 20px;
+			border-radius: 50px;
+			background-color: rgba(0, 185, 98, 100);
+			text-align: center;
+			display: flex;
+			position: absolute;
+			top: 275px;
+			left: 138px;
+		
+			.icon2-left{
+				width: 36px;
+				height: 36px;
+				line-height: 36px;
+				text-align: center;
+				border: 1px solid rgba(0, 185, 98, 100);
+				border-radius: 999px;
+				background-color: #fff;
+				color: #00b962;
+			}
+			.icon2-right{
+				color: #ffffff;
+				line-height: 14px;
+				padding: 4px;
+			}
+		}
+		.corner2{
+		   width: 0;
+		   height: 0;
+			position: absolute;
+			top: 36px;
+			left: 0;
+			right: 0;
+			margin: auto;
+			border-bottom: 6px solid transparent;
+			border-left: 6px solid transparent;
+			border-right: 6px solid transparent;
+			border-top: 8px solid #00b962 ;
+			
+		}
+		.charing-slow {
+			background-color: #fff;
+			margin: 0 12px;
+			border-radius: 8px;
+			padding: 10px 12px 0px;
+			position: fixed;
+			bottom: 12px;
+			left: 0;
+			right: 0;
+		
+			.slow-charge {
+				display: inline-block;
+				width: 44px;
+				height: 20px;
+				line-height: 20px;
+				border-radius: 50px;
+				background-color: #00b962;
+				color: rgba(255, 255, 255, 100);
+				font-size: 12px;
+				text-align: center;
+			}
+		
+			.station-items {
+				display: inline-block;
+				height: 16px;
+				line-height: 16px;
+				font-size: 16px;
+				margin-left: 4px;
+				color: #101010;
+		
+		
+			}
+		
+			.address {
+				margin-top: 8px;
+				line-height: 16px;
+				font-size: 11px;
+				color: rgba(119, 119, 119, 100);
+			}
+		
+			.price {
+				display: flex;
+				height: 20px;
+		
+				.num {
+					height: 20px;
+					color: rgba(255, 98, 0, 100);
+					font-size: 20px;
+					text-align: left;
+					font-family: Roboto-medium;
+				}
+		
+				.unit {
+					height: 14px;
+					line-height: 14px;
+					color: rgba(102, 102, 102, 100);
+					font-size: 14px;
+					text-align: left;
+					font-family: AlibabaPuHui-regular;
+					margin-top: 6px;
+					margin-left: 4px;
+				}
+			}
+		
+			.park {
+				margin-top: 8px;
+				display: flex;
+				justify-content: space-between;
+		
+				.park-p {
+					display: inline-block;
+					width: 20px;
+					height: 18px;
+					line-height: 18px;
+					text-align: center;
+					background-color: rgba(125, 177, 255, 100);
+					color: #fff;
+				}
+		
+				.park-text {
+					display: inline-block;
+					
+					height: 17px;
+					color: rgba(102, 102, 102, 100);
+					font-size: 12px;
+					text-align: left;
+					margin-left: 4px;
+					margin-top: 2px;
+				}
+			}
+			.bottom{
+				height: 52px;
+				display: flex;
+				margin-top: 9px;
+				margin-left: 77px;
+				border-top:  1px solid rgba(238, 242, 240, 100);
+				.text{
+					display: inline-block;
+					margin-left: 4px;
+					
+				}
+				.scan-qrcode{
+					width: 100px;
+					height: 28px;
+					line-height: 28px;
+					border-radius: 50px;
+					text-align: center;
+					border: 1px solid rgba(0, 185, 98, 100);
+					margin-top: 12px;
+					color: rgba(0, 185, 98, 100);
+				}
+				.distance-time{
+					width: 130px;
+					height: 28px;
+					line-height: 28px;
+					border-radius: 50px;
+					background-color: rgba(0, 185, 98, 100);
+					text-align: center;
+					margin-top: 12px;
+					margin-left: 12px;
+					color:#fff
+				}
+			}
+		
+			
+		}
+	}
+</style>