51 lines
1.0 KiB
Vue
51 lines
1.0 KiB
Vue
<template>
|
|
<view class="navbar">
|
|
<view class="statusBar" :style="{height:getStatusBarHeight()+'px'}"></view>
|
|
<view class="titleBar" :style="{height:getTitleBarHeight()+'px'}">
|
|
<wd-navbar v-if="title" :title="title" :left-arrow="leftArrow" @click-left="handleClickLeft"></wd-navbar>
|
|
<wd-navbar v-else :left-arrow="leftArrow" @click-left="handleClickLeft">
|
|
<template #title>
|
|
<slot name="title"></slot>
|
|
</template>
|
|
</wd-navbar>
|
|
</view>
|
|
</view>
|
|
<view :style="{height:getNavBarHeight() +'px'}"></view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight } from "@/utils/system"
|
|
|
|
defineProps({
|
|
title:{
|
|
type:String,
|
|
default:""
|
|
},
|
|
leftArrow:{
|
|
type:Boolean,
|
|
default:true
|
|
}
|
|
})
|
|
|
|
const handleClickLeft = () => {
|
|
uni.navigateBack()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.navbar{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 9;
|
|
|
|
.statusBar{
|
|
background: var(--wot-navbar-background);
|
|
}
|
|
|
|
.titleBar{
|
|
background: var(--wot-navbar-background);
|
|
}
|
|
}
|
|
</style> |