From 7eebd7981c1f5d2c569556d1e87f7818cef18cce Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 21 八月 2025 13:15:15 +0800
Subject: [PATCH] 1.样式修改
---
src/components/PageHeader.vue | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 103 insertions(+), 0 deletions(-)
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
new file mode 100644
index 0000000..6d50e54
--- /dev/null
+++ b/src/components/PageHeader.vue
@@ -0,0 +1,103 @@
+<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>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+// 瀹氫箟缁勪欢灞炴��
+const props = defineProps({
+ // 椤甸潰鏍囬
+ title: {
+ type: String,
+ default: ''
+ },
+ // 鏄惁鏄剧ず杩斿洖鎸夐挳
+ showBack: {
+ type: Boolean,
+ default: true
+ },
+ // 鑷畾涔夎繑鍥炰簨浠�
+ customBack: {
+ type: Function,
+ default: null
+ }
+});
+
+// 瀹氫箟浜嬩欢
+const emit = defineEmits(['back']);
+
+// 澶勭悊杩斿洖浜嬩欢
+const handleBack = () => {
+ 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;
+}
+
+.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;
+}
+</style>
--
Gitblit v1.9.3