feat: 设置导航栏的颜色
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -22,3 +22,4 @@ dist
|
||||
*.sw?
|
||||
unpackage
|
||||
.hbuilderx
|
||||
.claude
|
||||
|
||||
@@ -1,37 +1,23 @@
|
||||
<template>
|
||||
<view :class="navBarClass" :style="navBarStyle">
|
||||
<!-- 状态栏占位 -->
|
||||
<view
|
||||
:style="{ height: statusBarHeight + 'px' }"
|
||||
v-if="!hideStatusBar"
|
||||
></view>
|
||||
<view :style="{ height: statusBarHeight + 'px' }" v-if="!hideStatusBar"></view>
|
||||
|
||||
<!-- 导航栏内容 -->
|
||||
<view
|
||||
class="flex flex-items-center flex-justify-between border-box pl-8 pr-8"
|
||||
:style="{ height: navBarHeight + 'px' }"
|
||||
>
|
||||
<view class="flex flex-items-center flex-justify-between border-box pl-8 pr-8"
|
||||
:style="{ height: navBarHeight + 'px' }">
|
||||
<!-- 左侧返回按钮 -->
|
||||
<view
|
||||
class="nav-bar-left flex flex-items-center flex-justify-center"
|
||||
v-if="showBack"
|
||||
@click="handleBack"
|
||||
>
|
||||
<view 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
|
||||
:class="[
|
||||
<view :class="[
|
||||
'nav-bar-center flex flex-items-center flex-justify-center',
|
||||
`nav-bar-center--${titleAlign}`,
|
||||
]"
|
||||
>
|
||||
]">
|
||||
<slot name="title">
|
||||
<text
|
||||
class="font-size-17 font-500 color-000"
|
||||
:style="{ color: titleColor }"
|
||||
>
|
||||
<text 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: {
|
||||
|
||||
@@ -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" />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user