uniapp/pages/deviceManage/deviceDetail/deviceDetail.vue

<template>
	<view class="wrapper flex justify-between padding-lr-lg">
		<view class="device-items">
			<view class="device-item">
				<text class="text-yellow">Uab</text>
				<text>12</text>
				<text>V</text>
			</view>
			<view class="device-item">
				<text class="text-green">Ubc</text>
				<text>{{12000>1000?12000/1000:12000}}</text>

				<text v-if="12000>1000">KV</text>
				<text v-else>V</text>
			</view>
			<view class="device-item">
				<text class="text-red">Uca</text>
				<text>12</text>
				<text>V</text>
			</view>
			<view class="device-item">
				<text class="text-red">F</text>
				<text>12</text>
				<text>V</text>
			</view>
		</view>

		<view class="device-items">
			<view class="device-item">
				<text class="text-yellow">La</text>
				<text>12</text>
				<text>A</text>
			</view>
			<view class="device-item">
				<text class="text-green">Lb</text>
				<text>12</text>
				<text>A</text>
			</view>
			<view class="device-item">
				<text class="text-red">Lc</text>
				<text>12</text>
				<text>A</text>
			</view>
			<view class="device-item">
				<text class="text-yellow">P</text>
				<text>12</text>
				<text>kW</text>
			</view>
			<view class="device-item">
				<text class="text-green">Q</text>
				<text>12</text>
				<text>kvar</text>
			</view>
			<view class="device-item">
				<text class="text-red">cos</text>
				<text>12</text>
				<text>V</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
			uni.setNavigationBarColor({
				frontColor: "#ffffff", //文字颜色
				backgroundColor: "#000033", //底部背景色
			})
		},
		methods: {
		}
	}
</script>

<style lang="scss">
	page {
		height: 100% !important
	}

	.wrapper {
		width: 100%;
		height: 100%;
		background-color: #000033;
		background-image: url(../../../static/device-bg.png);
		background-position: center 60%;
		background-size: cover;
		position: relative;

		.device-items {
			font-family: FANDOLFANG-REGULAR;
			margin-top: 150rpx;
			color: #fff;

			.device-item text:first-child {
				width: 50rpx;
				display: inline-block;
				font-size: 28rpx;
			}
			.device-item text:nth-child(2) {
				display: inline-block;
				width: 100rpx;
				margin: 0 15rpx 30rpx 15rpx;
				height: 42rpx;
				background: #FFFFCC;
				font-size: 28rpx;
				text-align: left;
				padding-left: 10rpx;
				line-height: 42rpx;
				color: #333;
			}
		}
		.device-item:nth-child(3) {
			margin-bottom: 94rpx;
		}
	}
</style>