113 lines
2.1 KiB
Vue
113 lines
2.1 KiB
Vue
<template>
|
||
<view
|
||
class="nav-bar"
|
||
:class="{ 'nav-bar--transparent': transparent }"
|
||
:style="{ paddingTop: statusBarHeight + 'px' }"
|
||
>
|
||
<view class="nav-bar__inner">
|
||
<!-- Back button -->
|
||
<view v-if="showBack" class="nav-bar__left" @tap="handleBack">
|
||
<text class="nav-bar__back-icon">‹</text>
|
||
</view>
|
||
<view v-else class="nav-bar__left" />
|
||
|
||
<!-- Title -->
|
||
<text class="nav-bar__title">{{ title }}</text>
|
||
|
||
<!-- Right placeholder (balances the back button) -->
|
||
<view class="nav-bar__right" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
|
||
defineProps<{
|
||
title: string
|
||
/** Transparent bg with white text — for pages with colored header */
|
||
transparent?: boolean
|
||
/** Show back arrow (for sub-pages navigated via navigateTo) */
|
||
showBack?: boolean
|
||
}>()
|
||
|
||
const statusBarHeight = ref(0)
|
||
|
||
onMounted(() => {
|
||
const windowInfo = uni.getWindowInfo()
|
||
statusBarHeight.value = windowInfo.statusBarHeight ?? 20
|
||
})
|
||
|
||
function handleBack() {
|
||
uni.navigateBack({ delta: 1 })
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.nav-bar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 101;
|
||
background: #ffffff;
|
||
|
||
&--transparent {
|
||
background: transparent;
|
||
|
||
.nav-bar__title {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.nav-bar__back-icon {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
&__inner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 88rpx;
|
||
padding: 0 24rpx;
|
||
}
|
||
|
||
&__left,
|
||
&__right {
|
||
width: 72rpx;
|
||
height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
&__left {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
&__right {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
&__back-icon {
|
||
font-size: 52rpx;
|
||
font-weight: 300;
|
||
color: #1a1a2e;
|
||
line-height: 1;
|
||
margin-top: -4rpx;
|
||
}
|
||
|
||
&__title {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
color: #1a1a2e;
|
||
letter-spacing: 2rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
</style>
|