jp-charge/pages/index/none.vue

<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>