deepChartVueApp/pages/setting/newVersion.vue

<template>
	<view class="main">
		<view :style="{height:iSMT+'px'}"></view>
		<view style="height:1.5vh;" />
		<view class="top">
			<view class="top-list">
				<text v-if="hasNew === true" class="label">已有新版本</text>
				<text v-if="hasNew === false" class="label">已是最新版本</text>
				<view class="right">
					<text style="font-size: 28rpx;">{{ version }}</text>
				</view>
			</view>
		</view>

		<view style="height:1vh;" />

		<view class="bottom">
			<button v-if="hasNew === true" class="bottom-btn">立即更新</button>
			<button v-if="hasNew === false" class="bottom-btn" disabled 
			style="background-color: rgb(204,204,204);color:white;">暂无更新</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	const iSMT = ref(0)
	const hasNew = ref(true)
	const version = ref('2.0')

	onMounted(() => {
		// 状态栏高度
		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
		console.log('看看高度', iSMT.value)
	})
</script>

<style>
	.top {
		height: 7vh;
		background-color: white;
		display: flex;
		justify-content: center;
	}

	.top-list {
		width: 630rpx;
		height: 7vh;
		display: flex;
		align-items: center;
		margin: 0rpx 40rpx;
	}

	.label {
		font-size: 28rpx;
		flex: 1;
	}

	.bottom {
		height: 11vh;
		background-color: white;
		padding: 0 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom-btn {
		width: 670rpx;
		height: 84rpx;
		border-radius: 40rpx;
		background-color: #000;
		color: #fff;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>