jp-charge/pages/index/index.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">
			<view class="chargeInfo-text">
				<p>桩名：打赏打赏安舒打赏</p>
				<p>桩号：121564</p>
			</view>
			<view class="chargeInfo-btn">
				通道:5
			</view>
		</view>
		<view class="chargeImg">
			<img src="/static/img/charge1.png" alt="">
			<!-- <img src="/static/img/charge2.png" alt=""> -->
		</view>
		<view class="chargeTime">
			<p>剩余时长</p>
			<u-line-progress active-color="#2979ff" :percent="70"></u-line-progress>
		</view>
		<view class="chargeData">
			<view class="chargeData-item">
				<u-icon name="jiagebaohu" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
				<h2>0.25元</h2>
				<p>消费金额</p>
			</view>
			<view class="chargeData-item">
				<u-icon name="dian" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
				<h2>100</h2>
				<p>充电功率</p>
			</view>
		</view>
		<view class="chargeBtn">
			<view class="chargeBtn-item">退款</view>
			<view class="chargeBtn-item">费用说明</view>
		</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{
		padding: 10px;
		position: relative;
		.chargeInfo-text{
			p{
				color:#777;
				margin-bottom: 5px;
			}
		}
		.chargeInfo-btn{
			background-color: #E0EDFF;
			width: 72px;
			height: 32px;
			border-radius:16px 0 0 16px;
			line-height: 32px;
			text-align: center;
			position: absolute;
			right: 0;
			top:16px;
			color:#1677FF;
		}
	}
	.chargeImg{
		height: 300px;
		width: 300px;
		margin: 10px auto 0;
		img{
			height: 100%;
			width: 100%;
		}
	}
	.chargeTime{
		padding: 20px 30px;
		text-align: center;
		p{
			color:#999;
			margin-bottom: 10px;
		}
	}
	.chargeBtn{
		display: flex;
		justify-content: space-around;
		padding: 20px 50px;
		.chargeBtn-item{
			width: 80px;
			height: 32px;
			background-color: #1677FF;
			line-height: 32px;
			color:#fff;
			text-align: center;
			border-radius: 16px;
		}

	}
	.chargeData{
		display: flex;
		justify-content: space-around;
		.chargeData-item{
			text-align: center;
			h2{
				font-size: 24px;
				font-weight: normal;
				color:#1677FF;
				margin: 10px 0;
			}
			p{
				color:#999;
			}
		}
	}
</style>