81 lines
1.4 KiB
Vue
81 lines
1.4 KiB
Vue
|
<script setup>
|
||
|
|
/**
|
||
|
|
* 顶部导航栏
|
||
|
|
* @property {String} title 导航栏标题
|
||
|
|
* @property {String} bgColor 背景颜色 默认#fff
|
||
|
|
*/
|
||
|
|
// 顶部状态栏
|
||
|
|
import statusBar from '@/components/header/statusBar.vue'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
// 页面标题
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
},
|
||
|
|
// 背景颜色
|
||
|
|
bgColor: {
|
||
|
|
type: String,
|
||
|
|
default: '#fff'
|
||
|
|
},
|
||
|
|
// 前景色
|
||
|
|
color: {
|
||
|
|
type: String,
|
||
|
|
default: '#333'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 返回
|
||
|
|
*/
|
||
|
|
function handleBack() {
|
||
|
|
const pages = getCurrentPages()
|
||
|
|
|
||
|
|
// 如果页面栈数量大于1
|
||
|
|
if (pages.length > 1) {
|
||
|
|
uni.navigateBack()
|
||
|
|
} else {
|
||
|
|
uni.switchTab({
|
||
|
|
url: '/pages/index/index'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<!-- 顶部盒子 -->
|
||
|
|
<view class="apex pf t0 l0 r0" :style="{
|
||
|
|
background: bgColor,
|
||
|
|
}">
|
||
|
|
<statusBar />
|
||
|
|
|
||
|
|
<view class="head rows plr10">
|
||
|
|
<view class="left col w180">
|
||
|
|
<slot name="left">
|
||
|
|
<uni-icons type="left" :color="color" size="48rpx" @click="handleBack" />
|
||
|
|
</slot>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="tac">
|
||
|
|
<slot name="content">
|
||
|
|
<text class="f32" :style="{color: color,}">{{title}}</text>
|
||
|
|
</slot>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="right col df jcr w180">
|
||
|
|
<slot name="right"></slot>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 幽灵盒子 -->
|
||
|
|
<view class="ghost">
|
||
|
|
<statusBar />
|
||
|
|
<view class="head"></view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.apex {
|
||
|
|
z-index: 10;
|
||
|
|
transition: .3s;
|
||
|
|
}
|
||
|
|
</style>
|