feat(头部组件): 新增动态样式和返回图标

src/components/GeneralHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08)">
+  <div>
     <!-- 状态栏占位区域（仅在APP中显示） -->
     <div v-if="isInAppEnvironment" style="height: 30px"></div>
 
@@ -16,11 +16,7 @@
       <!-- 返回键 -->
       <div style="width: 10%; display: flex; align-items: center">
         <button v-if="showBack" class="back-btn" @click="handleBack">
-          <img
-            src="../assets/icon/arrowBack.png"
-            alt=""
-            style="width: 100%; aspect-ratio: 1/1; display: block"
-          />
+          <img :src="backImg" alt="" style="width: 100%; aspect-ratio: 1/1; display: block" />
         </button>
       </div>
       <h1
@@ -28,16 +24,21 @@
           font-size: 1.2em;
           font-weight: 600;
           margin: 0;
-          color: #fff;
           text-align: center;
           flex: 1;
           letter-spacing: 0.3px;
         "
+        :style="{ color }"
       >
         {{ title }}
       </h1>
-      <button v-if="showHelp" class="help-btn" style="width: 10%" @click="$emit('help')">
-        <img src="../assets/icon/helpWhite.png" alt="" style="width: 100%; display: block" />
+      <button class="help-btn" style="width: 10%" @click="$emit('help')">
+        <img
+          v-if="showHelp"
+          src="../assets/icon/helpWhite.png"
+          alt=""
+          style="width: 100%; display: block"
+        />
       </button>
       <slot name="extraFunction"></slot>
     </div>
@@ -67,6 +68,16 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+
+  color: {
+    type: String,
+    default: '#fff',
+  },
+
+  backImg: {
+    type: String,
+    default: '/src/assets/icon/arrowBack.png',
+  },
 })
 
 // 定义emits
@@ -112,7 +123,6 @@ onMounted(() => {
 
 <style scoped>
 * {
-  color: white;
   font-family: 'SF Pro Text';
 }