1

components/hr-statusbar/hr-statusbar.uvue

@@ -0,0 +1,30 @@
+<template>
+	<view :style="barStyle"></view>
+</template>
+
+<script lang="uts" setup>
+	import { ref, computed, onMounted } from 'vue'
+
+	/**
+	 * 状态栏占位
+	 * 设计稿中为 44px 的「9:41 + 状态图标」区域；真机上由系统状态栏承担，
+	 * 因此这里只做高度占位，避免真机出现双状态栏。
+	 */
+	const props = defineProps({
+		/** 背景色，默认白 */
+		bg : { type: String, default: '#FFFFFF' }
+	})
+
+	const statusHeight = ref(44)
+
+	const barStyle = computed(() : string => {
+		return `height:${statusHeight.value}px;background-color:${props.bg};`
+	})
+
+	onMounted(() => {
+		const info = uni.getWindowInfo()
+		if (info.statusBarHeight > 0) {
+			statusHeight.value = info.statusBarHeight
+		}
+	})
+</script>