uniapp/pages/deviceManage/deviceDetail/deviceDetail.vue

<template>
	<view class="wrapper">
		<image src="../../../static/device-bg.png"></image>
		<!-- <image src="../../static/device-bg.png" alt=""></image> -->
		<view class="left-items">
			<view class="device-item">12</view>
			<view class="device-item">12</view>
			<view class="device-item">1212</view>
			<view class="device-item">2121</view>
		</view>
		
		<view class="right-items">
			<view class="device-item">2121</view>
			<view class="device-item">2121</view>
			<view class="device-item">2121</view>
			<view class="device-item">3333</view>
			<view class="device-item">2121</view>
			<view class="device-item">433</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			uni.setNavigationBarColor({
				frontColor: "#ffffff", //文字颜色
				backgroundColor: "#000033", //底部背景色
		
			})
			
		
		},
		methods: {
			
		}
	}
</script>
	
<style lang="scss">
	image{
		height:1206rpx;
		width:750rpx;
		// height: calc(100vh - 88rpx);
		
	}
	.wrapper{
		width:100%;
		height: calc(100vh - 80rpx);
		background-color:#000033;
		// background-image:url(../../../static/device-bg.png);
		// background-size:cover;
		position:relative;
		.left-items{
			position:absolute;
			top:100rpx;
			left:134rpx;
		}
		.right-items{
			position:absolute;
			top:100rpx;
			left:530rpx;
			
		}
		.device-item{
			width:100rpx;
			margin-bottom:32rpx;
			height:42rpx;
			// background:pink;
			font-size:28rpx;
			text-align:left;
			padding-left:10rpx;
			line-height:42rpx;
		
		}
		.device-item:nth-child(3){
			margin-bottom:94rpx;
		};
		
		
	}

</style>