zx_flk_app/pages/moreInfo/moreInfo.vue

<template>
	<view class="container-view">
		<view :style="'padding-top:'+sumHeight+'px;height:0'"></view>
		<!-- <img src="https://qiniu.bms16.com/Fg8_p7083jpsy8BXG4bR6yMs7jQX" style="width: 100%;height: 526rpx;" alt=""> -->
		<image src="https://qiniu.bms16.com/Fg8_p7083jpsy8BXG4bR6yMs7jQX" style="width: 100%;height: 526rpx;"
			mode="aspectFit"></image>
		<view class="btnWrap">
			<view class="btnClass" @tap="toDashboard">
				<view class="margin_r">
					<image src="https://qiniu.bms16.com/Fjx1qYpRoVX6dqg1sGqn1Lzn6Bpc"
						style="width: 80rpx;height: 80rpx;" mode="aspectFit"></image>
				</view>
				<view class="text">
					仪表盘
				</view>
				<image src="https://qiniu.bms16.com/FqnbZ2iKHmzCGJA8XD30sf5g_CAm" style="width: 28rpx;height: 28rpx;"
					mode="aspectFit"></image>
			</view>
			<view class="btnClass" @tap="toDeviceInfo">
				<view class="margin_r">
					<image src="https://qiniu.bms16.com/FpRgmuTWpd-QyPbl_yuavOM7NtVb"
						style="width: 80rpx;height: 80rpx;" mode="aspectFit"></image>
				</view>
				<view class="text">
					设备信息
				</view>
				<image src="https://qiniu.bms16.com/FqnbZ2iKHmzCGJA8XD30sf5g_CAm" style="width: 28rpx;height: 28rpx;"
					mode="aspectFit"></image>
			</view>
		</view>
		<view class="imgWrpa" @tap="toBack">
			<image src="https://qiniu.bms16.com/FpfRLdpO1VjkzytUI72T36V1_j9n" style="width: 112rpx;height: 112rpx;"
				mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				navabarHeight: 0,
				sumHeight: 0
			}
		},
		onLoad() {
			const clientRect = uni.getMenuButtonBoundingClientRect()
			const sysinfo = uni.getSystemInfoSync()
			let GAP = 8
			// #ifdef MP-ALIPAY
			GAP = 0
			// #endif
			const navabarHeight = (clientRect.bottom - sysinfo.statusBarHeight) + (clientRect.top - sysinfo
				.statusBarHeight) + GAP
			this.navabarHeight = navabarHeight
			this.statusBarHeight = sysinfo.statusBarHeight
			this.sumHeight = this.statusBarHeight + this.navabarHeight
		},
		methods: {
			toDashboard() {
				uni.navigateTo({
					url: '/pages/dashboard/dashboard'
				})
			},
			toDeviceInfo() {
				uni.navigateTo({
					url: '/pages/deviceInfo/deviceInfo'
				})
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container-view {
		height: 100vh;
		background-image: url('https://qiniu.bms16.com/Fj2y3PaoJrfoS5XOk9YACac7TNQQ');

		.btnWrap {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.btnClass {
			padding: 0 48rpx;
			display: flex;
			align-items: center;
			width: 686rpx;
			height: 176rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			margin-bottom: 28rpx;
			font-weight: 600;
			font-size: 40rpx;
			color: #060809;
			font-style: normal;

			.margin_r {
				margin-right: 24rpx;
			}

			.text {
				flex: 1;
			}
		}

		.imgWrpa {
			display: flex;
			justify-content: center;
			margin-top: 36rpx;
		}
	}
</style>