feat: 设置导航栏的颜色

.gitignore

@@ -22,3 +22,4 @@ dist
 *.sw?
 unpackage
 .hbuilderx
+.claude

src/components/TopNavBar/index.vue

@@ -1,37 +1,23 @@
 <template>
   <view :class="navBarClass" :style="navBarStyle">
     <!-- 状态栏占位 -->
-    <view
+    <view :style="{ height: statusBarHeight + 'px' }" v-if="!hideStatusBar"></view>
-      :style="{ height: statusBarHeight + 'px' }"
-      v-if="!hideStatusBar"
-    ></view>
 
     <!-- 导航栏内容 -->
-    <view
+    <view class="flex flex-items-center flex-justify-between border-box pl-8 pr-8"
-      class="flex flex-items-center flex-justify-between border-box pl-8 pr-8"
+      :style="{ height: navBarHeight + 'px' }">
-      :style="{ height: navBarHeight + 'px' }"
-    >
       <!-- 左侧返回按钮 -->
-      <view
+      <view class="nav-bar-left flex flex-items-center flex-justify-center" v-if="showBack" @click="handleBack">
-        class="nav-bar-left flex flex-items-center flex-justify-center"
-        v-if="showBack"
-        @click="handleBack"
-      >
         <uni-icons type="left" size="20" :color="backIconColor" />
       </view>
 
       <!-- 中间标题区域 -->
-      <view
+      <view :class="[
-        :class="[
+        'nav-bar-center flex flex-items-center flex-justify-center',
-          'nav-bar-center flex flex-items-center flex-justify-center',
+        `nav-bar-center--${titleAlign}`,
-          `nav-bar-center--${titleAlign}`,
+      ]">
-        ]"
-      >
         <slot name="title">
-          <text
+          <text class="font-size-17 font-500 color-000" :style="{ color: titleColor }">
-            class="font-size-17 font-500 color-000"
-            :style="{ color: titleColor }"
-          >
             {{ title }}
           </text>
         </slot>
@@ -68,7 +54,7 @@ const props = defineProps({
   // 背景颜色
   background: {
     type: String,
-    default: "#d9eeff",
+    default: "$theme-color-100",
   },
   // 标题颜色
   titleColor: {

src/pages-quick/list.vue

@@ -2,7 +2,7 @@
   <z-paging ref="paging" v-model="dataList" use-virtual-list :force-close-inner-list="true" cell-height-mode="dynamic"
     safe-area-inset-bottom @query="queryList">
     <template #top>
-      <TopNavBar title="快速预定" />
+      <TopNavBar title="快速预定" :background="$theme-color-100" />
 
       <Tabs @change="handleTabChange" />