diff --git a/components/nav-header/nav-header.vue b/components/nav-header/nav-header.vue
index 7e10ab6..ebc29a7 100644
--- a/components/nav-header/nav-header.vue
+++ b/components/nav-header/nav-header.vue
@@ -1,16 +1,51 @@
-
+
+
+
@@ -18,16 +53,46 @@
export default {
name: 'NavHeader',
props: {
+ // 是否暗黑模式
+ dark: {
+ type: Boolean,
+ default: false
+ },
// 标题文字
title: {
type: String,
default: ''
},
+ // 左侧文字
+ leftText: {
+ type: String,
+ default: ''
+ },
+ // 右侧文字
+ rightText: {
+ type: String,
+ default: ''
+ },
+ // 左侧图标
+ leftIcon: {
+ type: String,
+ default: ''
+ },
+ // 右侧图标
+ rightIcon: {
+ type: String,
+ default: ''
+ },
// 是否显示返回按钮
showBack: {
type: Boolean,
default: false
},
+ // 是否显示返回文字
+ showBackText: {
+ type: Boolean,
+ default: false
+ },
// 返回页面路径，不传则返回上一页
backUrl: {
type: String,
@@ -36,12 +101,12 @@ export default {
// 文字颜色
color: {
type: String,
- default: '#000000'
+ default: ''
},
// 背景颜色
backgroundColor: {
type: String,
- default: 'transparent'
+ default: ''
},
// 是否固定在顶部
fixed: {
@@ -53,15 +118,87 @@ export default {
type: Boolean,
default: true
},
- // 是否显示底部边框
- border: {
+ // 是否显示阴影
+ shadow: {
type: Boolean,
default: false
+ },
+ // 导航栏高度
+ height: {
+ type: [Number, String],
+ default: 44
+ },
+ // 左侧宽度
+ leftWidth: {
+ type: [Number, String],
+ default: 60
+ },
+ // 右侧宽度
+ rightWidth: {
+ type: [Number, String],
+ default: 60
+ }
+ },
+ data() {
+ return {
+ statusBarHeight: 20, // 默认状态栏高度
+ innerTitle: '', // 内部使用的标题
+ navbarHeight: 44 // 导航栏高度
+ }
+ },
+ computed: {
+ // 导航栏主题背景色
+ themeBgColor() {
+ if (this.dark) {
+ if (this.backgroundColor) {
+ return this.backgroundColor;
+ } else {
+ return this.dark ? '#333' : '#FFF';
+ }
+ }
+ return this.backgroundColor || '#FFF';
+ },
+ // 导航栏主题文字色
+ themeColor() {
+ if (this.dark) {
+ if (this.color) {
+ return this.color;
+ } else {
+ return this.dark ? '#fff' : '#333';
+ }
+ }
+ return this.color || '#333';
+ }
+ },
+ created() {
+ this.getStatusBarHeight();
+ this.innerTitle = this.title;
+
+ // 转换导航栏高度
+ this.navbarHeight = typeof this.height === 'number' ? this.height : parseInt(this.height);
+ },
+ watch: {
+ title(newVal) {
+ this.innerTitle = newVal;
}
},
methods: {
+ // 获取状态栏高度
+ getStatusBarHeight() {
+ uni.getSystemInfo({
+ success: (res) => {
+ this.statusBarHeight = res.statusBarHeight || 20;
+ }
+ });
+ },
// 返回页面
goBack() {
+ this.onClickLeft();
+ },
+ // 点击左侧按钮
+ onClickLeft() {
+ this.$emit('clickLeft');
+
if (this.backUrl) {
// 如果指定了返回页面路径，则跳转到指定页面
this.$router.navigateTo(this.backUrl, {}, 'redirectTo')
@@ -85,18 +222,152 @@ export default {
this.$router.navigateTo('/pages/shouye/index', {}, 'switchTab');
}
}
+ },
+ // 点击右侧按钮
+ onClickRight() {
+ this.$emit('clickRight');
+ },
+ // 点击标题
+ onClickTitle() {
+ this.$emit('clickTitle');
}
}
}
\ No newline at end of file
diff --git a/components/page-container/page-container.vue b/components/page-container/page-container.vue
index 7474b3c..8e41a11 100644
--- a/components/page-container/page-container.vue
+++ b/components/page-container/page-container.vue
@@ -1,9 +1,28 @@
-
+
+
+
+
-
+
+
@@ -17,17 +36,33 @@ export default {
components: {
NavHeader
},
+ emits: ['clickLeft', 'clickRight', 'clickTitle'],
props: {
// 标题文字
title: {
type: String,
default: ''
},
+ // 是否暗黑模式
+ dark: {
+ type: Boolean,
+ default: false
+ },
// 是否显示返回按钮
showBack: {
type: Boolean,
default: false
},
+ // 左侧文字
+ leftText: {
+ type: String,
+ default: ''
+ },
+ // 右侧文字
+ rightText: {
+ type: String,
+ default: ''
+ },
// 返回页面路径，不传则返回上一页
backUrl: {
type: String,
@@ -58,16 +93,88 @@ export default {
type: Boolean,
default: true
},
- // 是否显示底部边框
- border: {
+ // 是否显示阴影
+ shadow: {
type: Boolean,
default: false
},
+ // 是否显示分隔线
+ divider: {
+ type: Boolean,
+ default: true
+ },
+ // 导航栏高度
+ navHeight: {
+ type: [Number, String],
+ default: 44
+ },
// 底部内边距
paddingBottom: {
type: String,
default: '0px'
}
+ },
+ data() {
+ return {
+ statusBarHeight: 20, // 默认状态栏高度
+ navbarHeight: 44, // 导航栏高度
+ navTitle: '' // 导航栏标题，避免直接使用prop
+ }
+ },
+ computed: {
+ // 内容区样式
+ contentStyle() {
+ let style = {
+ 'padding-bottom': this.paddingBottom
+ };
+
+ // 如果导航栏是固定定位，则需要为内容区添加顶部内边距
+ if (this.fixed) {
+ let paddingTop = this.statusBar ? (this.statusBarHeight + this.navbarHeight) : this.navbarHeight;
+ style['padding-top'] = paddingTop + 'px';
+ }
+
+ return style;
+ }
+ },
+ created() {
+ this.getStatusBarHeight();
+ // 转换导航栏高度
+ this.navbarHeight = typeof this.navHeight === 'number' ? this.navHeight : parseInt(this.navHeight);
+ // 初始化导航栏标题
+ this.navTitle = this.title;
+ },
+ watch: {
+ // 监听title属性变化
+ title(newVal) {
+ this.navTitle = newVal;
+ }
+ },
+ methods: {
+ // 获取状态栏高度
+ getStatusBarHeight() {
+ uni.getSystemInfo({
+ success: (res) => {
+ this.statusBarHeight = res.statusBarHeight || 20;
+ }
+ });
+ },
+ // 点击左侧
+ onClickLeft() {
+ this.$emit('clickLeft');
+ },
+ // 点击右侧
+ onClickRight() {
+ this.$emit('clickRight');
+ },
+ // 点击标题
+ onClickTitle() {
+ this.$emit('clickTitle');
+ },
+ // 设置标题的公共方法（供父组件调用）
+ setNavTitle(title) {
+ this.navTitle = title;
+ }
}
}
@@ -81,6 +188,19 @@ export default {
&__content {
width: 100%;
box-sizing: border-box;
+ position: relative;
+ }
+
+ &__divider {
+ width: 100%;
+ height: 4rpx;
+ background-color: #e5e5e5; /* 使用较浅的灰色 */
+ position: relative;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1;
+ margin-bottom: 10rpx; /* 在分割线下方添加一些间距 */
}
}
\ No newline at end of file
diff --git a/pages/shouye/detail_wuxian.vue b/pages/shouye/detail_wuxian.vue
index 2f9e184..98b2ce7 100644
--- a/pages/shouye/detail_wuxian.vue
+++ b/pages/shouye/detail_wuxian.vue
@@ -1,5 +1,5 @@
-
+