workApp/components/page-header.vue

<template>
	<view class="page_header" :style="{ paddingTop: 80 + 'rpx' }">
		<text class="header_title">{{ currentSchoolName }}</text>
	</view>
</template>

<script setup>
	import { computed, onMounted } from 'vue';
	import { useStore } from 'vuex';
	import { useSafeArea } from '@/common/safeArea';

	const store = useStore();
	const { statusBarHeight, initSafeArea } = useSafeArea();

	// 使用 computed 响应式获取学校名称，当 store 中 userInfo 更新时会自动重新计算
	const currentSchoolName = computed(() => {
		const userInfo = store.state.userStore.userInfo || {};
		return userInfo.schoolName || '';
	});

	onMounted(() => {
		initSafeArea();
	});
</script>

<style lang="scss" scoped>
.page_header {
	position: fixed;
	top: 0;	
	left: 0;
	right: 0;
	background-color: #FFFFFF;
	padding-bottom: 26rpx;
	padding-left: 24rpx;
	padding-right: 24rpx;
	border-bottom: 1rpx solid #F0F0F0;
	z-index: 999;

	.header_title {
		font-size: 44rpx;
		font-weight: 600;
		color: #333333;
	}
}
</style>