parking_inspection/pages/index/deviceDetails/deviceDetails.vue

<template>
	<view class="details">
		<view class="details-list">
			<view class="details-item" v-if="type == 1 || type == 2">
				<view class="left">
					<view>泊位号：</view>
					<view>BJ001</view>
				</view>
				<view class="right">例行巡查</view>
			</view>
			<view class="details-item" v-if="type == 3">
				<view class="left">
					<view>停车场：</view>
					<view>政务大楼停车场-入口处</view>
				</view>
				<view class="right">例行巡查</view>
			</view>
			<view class="details-item">
				<view class="left">
					<view>设备编号：</view>
					<view>2021505862</view>
				</view>
			</view>
			<view class="details-item" v-if="type == 1">
				<view class="left">
					<view>电量值：</view>
					<view>9.9v</view>
				</view>
			</view>
			<view class="details-item" v-if="type == 2 || type == 3">
				<view class="left">
					<view>设备状态：</view>
					<view>降板</view>
				</view>
			</view>
			<view class="details-item" v-if="type == 1">
				<view class="left">
					<view>信号值：</view>
					<view>-90</view>
				</view>
			</view>
			<view class="details-item" v-if="type == 2">
				<view class="left">
					<view>电量值：</view>
					<view>9.9V</view>
				</view>
			</view>
			<view class="details-item" v-if="type == 1">
				<view class="left">
					<view>车牌号：</view>
					<view>贵A12345</view>
				</view>
			</view>
			<view class="details-item" v-if="type == 2">
				<view class="left">
					<view>停车情况：</view>
					<view>有车</view>
				</view>
			</view>
			<view class="details-item" v-if="type == 1 || type == 2">
				<view class="left">
					<view>入场时间：</view>
					<view>10月28日18:21:30</view>
				</view>
			</view>
			<view class="details-item" v-if="type == 1 || type == 2">
				<view class="left">
					<view>停车时长：</view>
					<view>1小时30分40秒</view>
				</view>
			</view>
		</view>
		<view class="details-recent">
			<view class="details-recent-title">
				<view></view>
				<view>最近事件</view>
				<view></view>
			</view>
			<view class="details-recent-list">
				<view class="details-recent-list-header">
					<view>时间</view>
					<view>事件类型</view>
				</view>
				<view class="details-recent-list-content">
					<view class="drlc-item" v-for="(item, index) in recentList" :key="index">
						<view>{{ item.date }}</view>
						<view>{{ item.event }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				recentList: [
					{ date: '12月17日 15:15:30', event: '心跳事件' },
					{ date: '12月17日 15:15:30', event: '心跳事件' },
					{ date: '12月17日 15:15:30', event: '心跳事件' },
					{ date: '12月17日 15:15:30', event: '心跳事件' },
					{ date: '12月17日 15:15:30', event: '心跳事件' },
					{ date: '12月17日 15:15:30', event: '心跳事件' },
					{ date: '12月17日 15:15:30', event: '心跳事件' }
				]
			}
		},
		onLoad(page) {
			this.type = page?.type ?? 1
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.details {
	padding: 60rpx 40rpx;
	font-family: PingFangSC-regular;
	&-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 38rpx;
		font-size: 26rpx;
		color: #101010;
		.left {
			display: flex;
			view {
				&:first-child {
					width: 160rpx;
					text-align: right;
				}
			}
		}
		.right {
			color: #5991E8;
		}
	}
	&-recent {
		&-title {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			view {
				color: #3D3C3C;
				font-size: 26rpx;
				&:first-child, &:last-child {
					width: 35%;
					border-top: dashed 1px #d6d6d6;
				}
			}
		}
		&-list {
			margin-top: 52rpx;
			&-header {
				display: flex;
				justify-content: space-between;
				view {
					color: #101010;
					font-size: 26rpx;
					&:first-child {
						margin-left: 60rpx;
					}
					&:last-child {
						margin-right: 60rpx;
					}
				}
			}
			&-content {
				margin-top: 32rpx;
				.drlc-item {
					display: flex;
					justify-content: space-between;
					color: #a2a2a2;
					font-size: 26rpx;
					margin-bottom: 32rpx;
					view {
						&:last-child {
							margin-right: 60rpx;
						}
					}
				}
			}
		}
	}
}
</style>