From 77861fcc5ee1c4f8e7c6412b373cb438c7313930 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 03 九月 2025 10:06:26 +0800
Subject: [PATCH] 头部样式修改、适配不同机型
---
src/components/PageHeader.vue | 147 ++++++++++++++++++++++---------------------------
1 files changed, 66 insertions(+), 81 deletions(-)
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index 58acaca..fd8be07 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -1,20 +1,17 @@
<template>
- <view class="page-header">
- <view class="header-left">
- <up-icon
- name="arrow-left"
- size="20"
- color="#333"
- @click="handleBack"
- ></up-icon>
- </view>
- <view class="header-center">
- <text class="page-title">{{ title }}</text>
- </view>
- <view class="header-right" v-if="$slots.right">
- <slot name="right"></slot>
- </view>
- </view>
+ <up-navbar
+ :title="title"
+ :show-back="showBack"
+ @leftClick="handleBack"
+ :color="color"
+ :border="true"
+ :fixed="true"
+ :placeholder="true"
+ >
+ <template v-if="$slots.right" #right>
+ <slot name="right"></slot>
+ </template>
+ </up-navbar>
</template>
<script setup>
@@ -22,21 +19,41 @@
// 瀹氫箟缁勪欢灞炴��
const props = defineProps({
- // 椤甸潰鏍囬
- title: {
- type: String,
- default: ''
- },
- // 鏄惁鏄剧ず杩斿洖鎸夐挳
- showBack: {
- type: Boolean,
- default: true
- },
- // 鑷畾涔夎繑鍥炰簨浠�
- customBack: {
- type: Function,
- default: null
- }
+ // 椤甸潰鏍囬
+ title: {
+ type: String,
+ default: ''
+ },
+ // 鏄惁鏄剧ず杩斿洖鎸夐挳
+ showBack: {
+ type: Boolean,
+ default: true
+ },
+ // 鑷畾涔夎繑鍥炰簨浠�
+ customBack: {
+ type: Function,
+ default: null
+ },
+ // 鑳屾櫙鑹�
+ background: {
+ type: String,
+ default: '#ffffff'
+ },
+ // 鏂囧瓧棰滆壊
+ color: {
+ type: String,
+ default: '#333333'
+ },
+ // 鏄惁鏄剧ず搴曢儴鍒嗗壊绾�
+ borderBottom: {
+ type: Boolean,
+ default: true
+ },
+ // 鏄惁鍥哄畾鍦ㄩ《閮�
+ isFixed: {
+ type: Boolean,
+ default: true
+ }
});
// 瀹氫箟浜嬩欢
@@ -44,60 +61,28 @@
// 澶勭悊杩斿洖浜嬩欢
const handleBack = () => {
- if (props.customBack) {
- props.customBack();
- } else {
- emit('back');
- // uni.navigateBack();
- }
+ if (props.customBack) {
+ props.customBack();
+ } else {
+ emit('back');
+ // uni.navigateBack();
+ }
};
</script>
<style scoped lang="scss">
-.page-header {
- background: #ffffff;
- padding: 16px 20px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- border-bottom: 1px solid #f0f0f0;
- position: sticky;
- /* 鍏煎 iOS 鍒樻捣/鐏靛姩宀涘畨鍏ㄥ尯 */
- padding-top: calc(env(safe-area-inset-top));
- top: 0;
- z-index: 100;
- position: relative;
-}
+/* up-navbar 缁勪欢宸茬粡鍐呯疆浜嗗畨鍏ㄥ尯鍩熼�傞厤锛屼笉闇�瑕侀澶栫殑鏍峰紡璋冩暣 */
-.header-left {
- display: flex;
- align-items: center;
- gap: 8px;
- min-width: 30px; /* 纭繚鐐瑰嚮鍖哄煙瓒冲澶� */
-}
-
-.header-center {
- flex: 1;
- display: flex;
- justify-content: center;
- align-items: center;
- position: absolute;
- left: 0;
- right: 0;
- pointer-events: none;
-}
-
-.page-title {
- font-size: 18px;
- font-weight: 600;
- color: #333;
- pointer-events: auto;
-}
-
-.header-right {
- display: flex;
- align-items: center;
- min-width: 44px; /* 纭繚鍙充晶鍖哄煙鏈夎冻澶熺┖闂� */
- justify-content: flex-end;
+/* 鏆楄壊妯″紡閫傞厤 */
+@media (prefers-color-scheme: dark) {
+ :deep(.up-navbar) {
+ background: #1e1f24 !important;
+ .up-navbar__title {
+ color: #e9edf3 !important;
+ }
+ .up-navbar__back {
+ color: #e9edf3 !important;
+ }
+ }
}
</style>
--
Gitblit v1.9.3