108 lines
2.2 KiB
Vue
108 lines
2.2 KiB
Vue
<template>
|
||
<view class="hd" :style="{ paddingTop: status + 'px' }">
|
||
<view class="bar">
|
||
<view class="left" @click="onLeft">
|
||
<text v-if="leftLabel" class="leftlab">{{ leftLabel }}</text>
|
||
<text v-else-if="back" class="back">‹</text>
|
||
</view>
|
||
<view class="mid">
|
||
<text class="title">{{ title }}</text>
|
||
<text v-if="extra" class="extra">{{ extra }}</text>
|
||
</view>
|
||
<view class="right">
|
||
<slot name="right" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'FyHeader',
|
||
props: {
|
||
title: { type: String, default: '' },
|
||
back: { type: Boolean, default: false },
|
||
leftLabel: { type: String, default: '' },
|
||
extra: { type: String, default: '' }
|
||
},
|
||
data() {
|
||
return { status: 20 }
|
||
},
|
||
created() {
|
||
try {
|
||
this.status = uni.getSystemInfoSync().statusBarHeight || 20
|
||
} catch (_) {}
|
||
},
|
||
methods: {
|
||
onLeft() {
|
||
if (this.leftLabel) {
|
||
this.$emit('left')
|
||
return
|
||
}
|
||
if (this.back) {
|
||
const pages = getCurrentPages()
|
||
if (pages.length > 1) uni.navigateBack()
|
||
else uni.switchTab({ url: '/pages/tabs/messages' })
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.hd {
|
||
background: rgba(245, 247, 250, 0.94);
|
||
border-bottom: 1rpx solid rgba(17, 24, 39, 0.06);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 20;
|
||
}
|
||
.bar {
|
||
height: 88rpx;
|
||
padding: 0 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
.left, .right {
|
||
width: 160rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
z-index: 1;
|
||
}
|
||
.right { margin-left: auto; justify-content: flex-end; gap: 4rpx; }
|
||
.back {
|
||
font-size: 52rpx;
|
||
line-height: 1;
|
||
color: #111827;
|
||
width: 56rpx;
|
||
font-weight: 300;
|
||
}
|
||
.leftlab { font-size: 28rpx; color: #1677FF; }
|
||
.mid {
|
||
position: absolute;
|
||
left: 160rpx;
|
||
right: 160rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #111827;
|
||
letter-spacing: 0.2rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.extra {
|
||
margin-left: 6rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #111827;
|
||
flex-shrink: 0;
|
||
}
|
||
</style>
|