zxz

pages/index/index.vue

@@ -19,6 +19,7 @@
 		</view>
 		<view class="chargeImg">
 			<img src="/static/img/charge1.png" alt="">
+			<!-- <img src="/static/img/charge2.png" alt=""> -->
 		</view>
 		<view class="chargeTime">
 			<p>剩余时长</p>

pages/index/none.vue

@@ -0,0 +1,88 @@
+<template>
+	<view>
+		<u-navbar title="充电中" :is-back="false">
+			<view class="slot-wrap">
+				<view class="navbar-left"></view>				
+				<view class="navbar-right">
+					<u-icon name="shuaxin" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
+				</view>
+			</view>
+		</u-navbar>
+		<view class="chargeInfo">
+			<img height="80" width="80" src="/static/img/ddc.png" alt="">
+			<p>暂无充电车辆</p>
+		</view>
+		<view class="chargeBtn">
+			查看附近充电桩
+		</view>
+		<u-tabbar v-model="current" :list="tabbarList" :mid-button="true" active-color="#1677ff"></u-tabbar>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tabbarList: [{
+						iconPath: "motuoche-diandongche",
+						selectedIconPath: "motuoche-diandongche",
+						text: '充电',
+						count: 0,
+						isDot: true,
+						customIcon: true,
+					},
+					{
+						iconPath: "/static/img/min_button_select.png",
+						selectedIconPath: "/static/img/min_button_select.png",
+						text: '充电中',
+						midButton: true,
+						customIcon: true,
+					},
+					{
+						iconPath: "31wode",
+						selectedIconPath: "31wode",
+						text: '我的',
+						count: 0,
+						isDot: false,
+						customIcon: true,
+					},
+				],
+				current: 0
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.slot-wrap {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex: 1;
+	}
+	.navbar-right {
+		display: flex;
+		margin-right: 20rpx;
+		align-items: center;
+	}
+	.chargeInfo{
+		text-align: center;
+		padding:100px 0 50px;
+		p{
+			color:#999;
+			font-size: 20px;
+			margin-top: 10px;
+		}
+	}
+	.chargeBtn{
+		padding: 10px 20px;
+		border-radius:22px ;
+		width: 150px;
+		border: 2px solid #1677FF;
+		color:#1677FF;
+		margin: 0 auto;
+	}
+</style>

pages/user/recharge.vue

@@ -16,14 +16,10 @@
 				选择充值金额
 			</view>
 			<view class="chargeMain">
-				<view class="chargeMain-item active"><p>1元</p></view>
-				<view class="chargeMain-item"><p>2元</p></view>
-				<view class="chargeMain-item"><p>3元</p></view>
-				<view class="chargeMain-item"><p>5元</p></view>
-				<view class="chargeMain-item"><p>8元</p></view>
-				<view class="chargeMain-item"><p>10元</p></view>
-				<view class="chargeMain-item"><p>15元</p></view>
-				<view class="chargeMain-item"><p>20元</p></view>
+				<view class="chargeMain-item active"><p>10元</p> <span>赠1元</span></view>
+				<view class="chargeMain-item"><p>20元</p> <span>赠3元</span></view>
+				<view class="chargeMain-item"><p>50元</p> <span>赠8元</span></view>
+				<view class="chargeMain-item"><p>100元</p> <span>赠20元</span></view>
 			</view>
 		</view>
 		<view class="charge">
@@ -124,20 +120,31 @@
 		justify-content: space-between;
 		margin-top: 20px;
 		.chargeMain-item{
-			width: 23%;
+			width: 48%;
 			text-align: center;
-			padding: 10px;
-			border: 1px solid #1677ff;
+			padding: 25px 10px;
+			border: 2px solid #cacaca;
 			margin-bottom: 10px;
 			border-radius: 10px;
-			color:#1677ff;
+			color:#333;
+			position: relative;
 			p{
 				font-size: 20px;
 			}
+			span{
+				background-color: #ff8d00;
+				color:#fff;
+				padding: 2px 10px;
+				border-radius:0 10px 0 10px;
+				position: absolute;
+				font-size: 12px;
+				right: -2px;
+				top: -2px;
+			}
 		}
 		.active{
-			background-color:#1677ff;
-			color:#fff;
+			border-color:#ff8d00;
+			color:#ff8d00;
 		}
 		.fault{
 			background-color:#e1e1e1;