workApp/components/page-header.vue

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

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

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

	onMounted(() => {
		initSafeArea();
		schoolName.value = store.state.userStore.userInfo.schoolName || '';
	});
</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>