NavHeader.vue
1.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!--
* @Date: 2026-01-29 21:09:28
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-29 21:18:14
* @FilePath: /manulife-weapp/src/components/NavHeader.vue
* @Description: 通用导航头组件，用于页面顶部固定导航栏，展示页面标题。
-->
<template>
<!-- Placeholder to prevent content from being hidden behind fixed header -->
<div class="w-full h-[250rpx]"></div>
<!-- Fixed Header -->
<div class="fixed top-0 left-0 z-50 w-full h-[250rpx] bg-gradient-to-b from-[#1E3A8A] to-[#2563EB] pt-[100rpx]">
<div class="relative w-full h-full flex items-center justify-center px-[32rpx]">
<div v-if="canGoBack" class="absolute left-[32rpx] flex items-center justify-center w-[60rpx] h-[60rpx]" @tap="goBack">
<IconFont name="RectLeft" size="18" color="#fff" />
</div>
<span class="text-white text-[35rpx] font-normal">{{ title }}</span>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import IconFont from '@/components/IconFont.vue'
defineProps({
title: {
type: String,
required: true
}
})
const canGoBack = ref(false)
onMounted(() => {
const pages = Taro.getCurrentPages()
canGoBack.value = pages.length > 1
})
const goBack = () => {
Taro.navigateBack()
}
</script>