feat: 完善职业图谱功能

pages/service/components/PageHeader.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="page-header">
+    <view class="page-header" :style="{ paddingTop: statusBarHeight > 0 ? `calc(40rpx + ${statusBarHeight * 2}rpx)` : '40rpx' }">
         <view class="header-top">
             <view class="title-section">
                 <text class="main-title">职业规划推荐指导平台</text>
@@ -54,7 +54,7 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits } from 'vue';
+import { defineProps, defineEmits, ref, onMounted } from 'vue';
 
 const props = defineProps({
     activeTab: {
@@ -65,6 +65,18 @@ const props = defineProps({
 
 const emit = defineEmits(['tab-change', 'search-click', 'menu-click', 'more-click']);
 
+// 状态栏高度
+const statusBarHeight = ref(0);
+
+onMounted(() => {
+    try {
+        const systemInfo = uni.getSystemInfoSync();
+        statusBarHeight.value = systemInfo.statusBarHeight || 0;
+    } catch (error) {
+        statusBarHeight.value = 0;
+    }
+});
+
 function handleTabClick(index) {
     emit('tab-change', index);
 }
@@ -86,6 +98,12 @@ function handleMoreClick() {
 .page-header {
     padding: 40rpx 28rpx 0;
     flex-shrink: 0;
+    /* #ifdef MP-WEIXIN */
+    padding-top: calc(40rpx + env(safe-area-inset-top));
+    /* #endif */
+    /* #ifdef H5 */
+    padding-top: calc(40rpx + var(--status-bar-height, 0px));
+    /* #endif */
 }
 
 .header-top {