From 6b0265dc3a61e0178e206b36db4bcca921b2534a Mon Sep 17 00:00:00 2001
From: tianfeng <769204422@qq.com>
Date: Fri, 22 Aug 2025 16:57:14 +0800
Subject: [PATCH] =?UTF-8?q?mobileHeader=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MobileHeader.vue | 141 +++++++++++++++-----------------
 1 file changed, 64 insertions(+), 77 deletions(-)

diff --git a/src/components/MobileHeader.vue b/src/components/MobileHeader.vue
index 0942fc5..bc72f86 100644
--- a/src/components/MobileHeader.vue
+++ b/src/components/MobileHeader.vue
@@ -1,25 +1,31 @@
 <template>
-  <div class="mobile-header">
-    <button v-if="showBack" class="back-btn" @click="handleBack">
-      <svg class="back-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-    </button>
-    <h1 class="title">{{ title }}</h1>
-    <button v-if="showHelp" class="help-btn" @click="$emit('help')">
-      <svg class="help-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-        <path d="M9.09 9A3 3 0 0 1 12 6a3 3 0 0 1 3 3c0 2-3 3-3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M12 17h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-    </button>
-    <div v-else class="placeholder"></div>
+  <div class="mobile-header" :class="{ 'in-app': isInAppEnvironment }">
+    <!-- 状态栏占位区域（仅在APP中显示） -->
+    <div v-if="isInAppEnvironment" class="status-bar-spacer"></div>
+    
+    <!-- header内容 -->
+    <div class="header-content">
+      <button v-if="showBack" class="back-btn" @click="handleBack">
+        <svg class="back-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+      <h1 class="title">{{ title }}</h1>
+      <button v-if="showHelp" class="help-btn" @click="$emit('help')">
+        <svg class="help-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+          <path d="M9.09 9A3 3 0 0 1 12 6a3 3 0 0 1 3 3c0 2-3 3-3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M12 17h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+      <div v-else class="placeholder"></div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { useRouter, useRoute } from 'vue-router'
-import { computed } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { closePage, isInApp } from '../utils/appBridge.js'
 
 // 定义props
@@ -48,6 +54,9 @@ defineEmits(['help'])
 const router = useRouter()
 const route = useRoute()
 
+// 检测是否在APP环境中
+const isInAppEnvironment = ref(false)
+
 // 定义首页路由列表
 const homeRoutes = ['/host-center', '/agency-center', '/coin-seller', '/']
 
@@ -73,51 +82,55 @@ const handleBack = () => {
     router.go(-1)
   }
 }
+
+// 组件挂载时检测环境
+onMounted(() => {
+  isInAppEnvironment.value = isInApp()
+})
 </script>
 
 <style scoped>
 .mobile-header {
+  background: white;
+  border-bottom: 1px solid #f0f0f0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+/* 状态栏占位区域 - 固定30px */
+.status-bar-spacer {
+  height: 30px;
+  background: white;
+}
+
+/* header内容区域 - 固定60px */
+.header-content {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 16px; /* 减少上下内边距 */
-  min-height: 44px; /* 设置最小高度而不是固定高度 */
-  background: white; /* 保持白色背景 */
-  border-bottom: 1px solid #f0f0f0; /* 更淡的边框 */
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* 轻微阴影 */
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  /* 适配手机屏幕的安全区域 */
-  padding-top: max(8px, env(safe-area-inset-top));
-}
-
-/* 适配 iOS设备的屏幕顶部缺口 */
-@supports (padding: max(0px)) {
-  .mobile-header {
-    padding-top: max(8px, env(safe-area-inset-top));
-  }
+  padding: 12px 16px;
+  height: 60px;
+  background: white;
 }
 
 .back-btn, .help-btn {
-  width: 36px; /* 稍微减小尺寸 */
+  width: 36px;
   height: 36px;
   border: none;
-  background: #f8f9fa; /* 浅灰色背景 */
-  border-radius: 50%; /* 圆形按钮 */
+  background: #f8f9fa;
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #495057; /* 深灰色图标 */
+  color: #495057;
   cursor: pointer;
   transition: all 0.2s ease;
-  border: 1px solid #e9ecef; /* 浅边框 */
+  border: 1px solid #e9ecef;
 }
 
 .back-btn:hover, .help-btn:hover {
   background: #e9ecef;
-  color: #343a40; /* 更深的灰色 */
-  transform: scale(1.05); /* 微微放大 */
+  color: #343a40;
+  transform: scale(1.05);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
@@ -130,17 +143,17 @@ const handleBack = () => {
   width: 20px;
   height: 20px;
   color: inherit;
-  stroke-width: 2.5; /* 加粗线条确保清晰 */
+  stroke-width: 2.5;
 }
 
 .title {
   font-size: 18px;
   font-weight: 600;
   margin: 0;
-  color: #212529; /* 深色标题 */
+  color: #212529;
   text-align: center;
   flex: 1;
-  letter-spacing: 0.3px; /* 轻微字母间距 */
+  letter-spacing: 0.3px;
 }
 
 .placeholder {
@@ -148,40 +161,6 @@ const handleBack = () => {
   height: 36px;
 }
 
-/* 小屏幕优化 */
-@media (max-width: 375px) {
-  .mobile-header {
-    padding: 6px 12px;
-    min-height: 40px;
-  }
-  
-  .back-btn, .help-btn {
-    width: 32px;
-    height: 32px;
-  }
-  
-  .back-icon, .help-icon {
-    width: 18px;
-    height: 18px;
-  }
-  
-  .title {
-    font-size: 16px;
-  }
-  
-  .placeholder {
-    width: 32px;
-    height: 32px;
-  }
-}
-
-/* 高分辨率屏幕优化 */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  .back-icon, .help-icon {
-    stroke-width: 2.2;
-  }
-}
-
 /* 暗黑模式适配 */
 @media (prefers-color-scheme: dark) {
   .mobile-header {
@@ -189,6 +168,14 @@ const handleBack = () => {
     border-bottom-color: #333;
   }
   
+  .status-bar-spacer {
+    background: #1a1a1a;
+  }
+  
+  .header-content {
+    background: #1a1a1a;
+  }
+  
   .back-btn, .help-btn {
     background: #2d2d2d;
     border-color: #444;