sailun-tbr-web/pages/me/index.vue

<template>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view> 状态栏下的文字 </view>
		<view class="u-page">
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar v-model="current" :list="list"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
						pagePath: '/pages/home/index'
					},
					{
						iconPath: "chat",
						selectedIconPath: "chat-fill",
						text: '消息',
						count: 2,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/msg/index'
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						customIcon: false,
						pagePath: '/pages/me/index'
					},
				],
				current: 2
			};
		}
	}
</script>

<style lang="scss" scoped>
  .status_bar {
      height: var(--status-bar-height);
      width: 100%;
	  background-color:#0095FF;
  }
</style>