zk-driver-wechat-applet/pages/monitoring/index.vue

<template>
	<view>
		<power-change-header></power-change-header>
		<view class="changeCurrent">
			<view class="info">
				<view><image src="../../static/icon7.png"></image></view>
				<view>车辆已上锁，换电完成车辆已上锁</view>
			</view>
			<view class="times">
				2022-12-14 01:32:28 | 渝AUU988
			</view>
		</view>
		<view class="timeline">
			<view class="timeinfo">
				<view class="list" v-for="(item,index) in datetime" :key="index">
					<view>{{item.time}}</view>
					<view>{{item.date}}</view>
				</view>
			</view>
			<view class="line">
				<uni-steps :options="options" :active="2" direction="column"></uni-steps>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datetime:[
					{
						time: '21:13:59',
						date: '2018-11-11'
					},
					{
						time: '21:13:59',
						date: '2018-11-11'
					},
					{
						time: '21:13:59',
						date: '2018-11-11'
					},
					{
						time: '21:13:59',
						date: '2018-11-11'
					},
					{
						time: '21:13:59',
						date: '2018-11-11'
					},
					{
						time: '21:13:59',
						date: '2018-11-11'
					},
					{
						time: '21:13:59',
						date: '2018-11-11'
					},
					{
						time: '21:13:59',
						date: '2018-11-11'
					}
				],
				options:[
					{title: '车辆已上锁、换电完成'}, 
					{title: '站内换电条件验证成功、开始自动换电'}, 
					{title: '站内换电条件验证'}, 
					{title: '司机发起换电申请'}, 
					{title: '车辆已下电、车辆已解锁'}, 
					{title: '车站连接成功,云端开始换电鉴权'}, 
					{title: '车牌识别成功'},
					{title: '车辆驶入初定位,开始车牌识别,开始车站连接'},
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.timeline{
	padding:0 58rpx;
	display: flex;
	margin-top: 60rpx;
	.timeinfo{
		display: flex;
		flex-direction: column;
		text-align: right;
		.list{
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 102rpx;
			color: #c9cdd4;
			font-size: 28rpx;
			view:first-child{
				color:#86909c;
			}
		}
	}
	.line{
		flex: 1;
	}
}
.changeCurrent{
	width: 690rpx;
	margin: 30rpx auto;
	height: 180rpx;
	background-image: url('@/static/change-bg.png');
	background-size: 100% 100%;
	padding: 25rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction:column;
	justify-content: space-around;
	.info{
		display: flex;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		line-height: 36rpx;
		
		image{
			width: 60rpx;
			height: 60rpx;
			padding-right: 25rpx;
		}
		view:last-child{
			padding-top: 12rpx;
		}
	}
	.times{
		color:#ededed;
		text-indent: 10rpx;
	}
}
</style>