|
|
@@ -0,0 +1,63 @@
|
|
|
+<template>
|
|
|
+ <view class="custom-nav">
|
|
|
+ <view v-if="showBackBtn" @click="handleBack"><</view>
|
|
|
+ <!-- 状态栏填充（兼容刘海屏） -->
|
|
|
+ <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
|
|
+ <!-- 标题区域 -->
|
|
|
+ <view class="nav-content">
|
|
|
+ <text class="nav-title" :style="{ fontSize: titleSize + 'px', color: titleColor }">
|
|
|
+ {{ title }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ title: String,
|
|
|
+ titleSize: { type: Number, default: 18 }, // 默认字号
|
|
|
+ titleColor: { type: String, default: '#000000' },
|
|
|
+ showBackBtn:{type:Boolean, default: false}
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ statusBarHeight: 0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleBack() {
|
|
|
+ this.$emit('back')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 获取状态栏高度（兼容不同设备）
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: (res) => {
|
|
|
+ this.statusBarHeight = res.statusBarHeight;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.custom-nav {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #FFFFFF; /* 背景色 */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.status-bar {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.nav-content {
|
|
|
+ height: 44px; /* 导航栏主体高度 */
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.nav-title {
|
|
|
+ font-weight: bold; /* 可加粗 */
|
|
|
+}
|
|
|
+</style>
|
wangxy