123 lines
2.4 KiB
Vue
123 lines
2.4 KiB
Vue
<template>
|
|
<view class="app-navbar" :style="{'padding-top': `${getSafeTop()}px`, 'padding-bottom': '40px'}">
|
|
<view class="navbar-left" :style="{top: `${getSafeTop()}px`}" v-if="showBack" @click="back">
|
|
<u-icon name="arrow-left" color="white" size="40rpx" v-if="currentPages.length > 1"/>
|
|
<u-icon name="home" color="white" size="40rpx" v-else/>
|
|
|
|
</view>
|
|
<text class="navbar-title" :style="{ fontSize: titleSize }">{{ title }}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
titleSize: {
|
|
type: String,
|
|
default: '34rpx'
|
|
},
|
|
showBack: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
currentPages: []
|
|
}
|
|
},
|
|
methods: {
|
|
getSafeTop() {
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
return systemInfo.statusBarHeight
|
|
},
|
|
back(){
|
|
if (this.currentPages.length === 1) uni.switchTab({url: '/pages/index/index'})
|
|
else uni.navigateBack()
|
|
}
|
|
},
|
|
mounted() {
|
|
this.currentPages = getCurrentPages()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-navbar {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 10rpx;
|
|
min-height: 56rpx;
|
|
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/202ad055d8706f14cd94fae4a8bbc14c.png') no-repeat center/cover;
|
|
}
|
|
|
|
.navbar-left {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
left: 20rpx;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
border-radius: 999rpx;
|
|
}
|
|
|
|
.navbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.navbar-title {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
color: #111827;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.navbar-capsule {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
height: 52rpx;
|
|
padding: 0 16rpx;
|
|
background: #ffffff;
|
|
border-radius: 999rpx;
|
|
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.capsule-dots {
|
|
display: flex;
|
|
gap: 6rpx;
|
|
}
|
|
|
|
.capsule-dot {
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 50%;
|
|
background: #111827;
|
|
}
|
|
|
|
.capsule-divider {
|
|
width: 1rpx;
|
|
height: 24rpx;
|
|
background: #d1d5db;
|
|
}
|
|
|
|
.capsule-ring {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
border-radius: 50%;
|
|
border: 3rpx solid #111827;
|
|
}
|
|
</style>
|