CommandDetail.vue 2.42 KB
<template>
	<view class="command-detail">
		<view class="detail-top">网关设备1</view>
		<view class="detail">
			<view class="detail-item">
				<view class="detail-label">设备类型</view>
				<view class="detail-value">网关子设备</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">设备编号</view>
				<view class="detail-value">SN98489123471829</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">所属组织</view>
				<view class="detail-value">云腾汽车</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">命令下发时间</view>
				<view class="detail-value">2022-01-25 12:44:22</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">命令类型</view>
				<view class="detail-value">Mqtt命令</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">响应类型</view>
				<view class="detail-value">OneWay</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">下发结果</view>
				<view class="detail-value">成功</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">响应结果</view>
				<view class="detail-value">成功</view>
			</view>
		</view>
		<view class="command">命令内容</view>
		<u-textarea></u-textarea>
	</view>
</template>

<script></script>

<style lang="scss" scoped>
.command-detail {
	padding: 0 30rpx;
	.detail-top {
		height: 118rpx;
		width: 690rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		color: #333;
		border-radius: 20rpx;
		font-size: 30rpx;
		margin-top: 30rpx;
		padding: 30rpx;
	}
	.detail {
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 20rpx;
		width: 690rpx;
		.detail-item {
			padding: 30rpx;
			display: flex;
			align-items: center;
			.detail-label {
				color: #333;
				font-size: 30rpx;
			}
			.detail-value {
				color: #666;
				font-size: 28rpx;
				margin-left: 30rpx;
			}
		}
	}
	.command{
		margin: 30rpx 0;
	}
}
</style>