rain
155 lines
3.8 KiB
Vue
155 lines
3.8 KiB
Vue
<!-- 公共组件：根页朱砂页头与普通返回页头；根页背景图层由统一基础资产提供。 -->
|
||
<template>
|
||
<view class="page-header" :class="{ 'page-header--root': root }">
|
||
<!-- 根页头部使用不透明朱砂底图与透明祠堂线稿两层完整资产。 -->
|
||
<image v-if="root" class="header-texture" src="/static/assets/foundation/opaque/root-header-cinnabar.jpg" mode="scaleToFill" />
|
||
<image v-if="root" class="header-hall" src="/static/assets/foundation/transparent/root-header-hall.png" mode="aspectFit" />
|
||
<view class="header-side header-side--left">
|
||
<view v-if="root" class="header-icon-button" @click="$emit('brand')">
|
||
<image class="header-logo" src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" />
|
||
</view>
|
||
<view v-else class="header-back" @click="goBack">{{ backLabel }}</view>
|
||
</view>
|
||
|
||
<text class="header-title">{{ title }}</text>
|
||
|
||
<view class="header-side header-side--right">
|
||
<view v-if="root" class="header-icon-button header-notice" @click="$emit('notice')">
|
||
<image class="header-notice-icon" src="/static/assets/foundation/transparent/notice.png" mode="aspectFit" />
|
||
<view v-if="unreadCount > 0" class="notice-dot"></view>
|
||
</view>
|
||
<view v-else class="header-action" @click="$emit('action')">{{ action }}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
const props = defineProps({
|
||
title: { type: String, required: true },
|
||
action: { type: String, default: '' },
|
||
backLabel: { type: String, default: '返回' },
|
||
root: { type: Boolean, default: false },
|
||
unreadCount: { type: Number, default: 0 }
|
||
})
|
||
|
||
const goBack = () => uni.navigateBack()
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.page-header {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 104rpx;
|
||
padding: 0 24rpx;
|
||
box-sizing: border-box;
|
||
background: $brand-red;
|
||
color: #fff9ed;
|
||
}
|
||
|
||
.page-header--root {
|
||
position: relative;
|
||
z-index: 3;
|
||
height: calc(124rpx + var(--status-bar-height, 0px));
|
||
padding-top: var(--status-bar-height, 0px);
|
||
background-color: #b52e22;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.header-texture {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.header-hall {
|
||
position: absolute;
|
||
bottom: -2rpx;
|
||
left: -48rpx;
|
||
z-index: 1;
|
||
width: 476rpx;
|
||
height: 166rpx;
|
||
opacity: .29;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.page-header--root .header-side,
|
||
.page-header--root .header-title { position: relative; z-index: 2; }
|
||
|
||
.header-side {
|
||
display: flex;
|
||
width: 120rpx;
|
||
min-height: 88rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.header-side--left { justify-content: flex-start; }
|
||
.header-side--right { justify-content: flex-end; }
|
||
|
||
.header-icon-button {
|
||
position: relative;
|
||
display: flex;
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.header-logo { width: 66rpx; height: 66rpx; }
|
||
.header-notice-icon { width: 48rpx; height: 48rpx; }
|
||
|
||
.notice-dot {
|
||
position: absolute;
|
||
top: 15rpx;
|
||
right: 13rpx;
|
||
width: 14rpx;
|
||
height: 14rpx;
|
||
border: 2rpx solid $brand-red;
|
||
border-radius: 50%;
|
||
background: #fff9ed;
|
||
}
|
||
|
||
.header-back,
|
||
.header-action {
|
||
width: 100%;
|
||
font-size: 27rpx;
|
||
}
|
||
|
||
.header-back { text-align: left; }
|
||
.header-action { color: #ffe3a7; text-align: right; }
|
||
|
||
.header-title {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
color: #fff9ed;
|
||
font-family: serif;
|
||
font-size: 35rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 4rpx;
|
||
text-align: center;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.page-header--root .header-title {
|
||
color: #ffe3a7;
|
||
font-family: 'STKaiti', 'KaiTi', serif;
|
||
font-size: 48rpx;
|
||
letter-spacing: 5rpx;
|
||
transform: translateY(2rpx);
|
||
}
|
||
|
||
.page-header--root .header-logo {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
transform: translate(-6rpx, -6rpx);
|
||
}
|
||
|
||
.page-header--root .header-notice { transform: translateY(4rpx); }
|
||
</style>
|