367 lines
7.6 KiB
Vue
367 lines
7.6 KiB
Vue
<template>
|
|
<view class="page-header-slot" :class="{ 'page-header-slot--root': root }">
|
|
<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"
|
|
aria-hidden="true"
|
|
/>
|
|
<image
|
|
v-if="root"
|
|
class="header-hall"
|
|
src="/static/assets/foundation/transparent/root-header-hall.png"
|
|
mode="aspectFit"
|
|
aria-hidden="true"
|
|
/>
|
|
<view class="header-side header-side--left">
|
|
<view
|
|
v-if="root"
|
|
class="header-brand"
|
|
aria-hidden="true"
|
|
>
|
|
<image
|
|
class="header-logo"
|
|
src="/static/assets/foundation/transparent/brand-seal.png"
|
|
mode="aspectFit"
|
|
aria-hidden="true"
|
|
/>
|
|
</view>
|
|
<button
|
|
v-else
|
|
class="header-back"
|
|
aria-label="返回上一页"
|
|
hover-class="header-back--pressed"
|
|
@click="handleBack"
|
|
>
|
|
<image
|
|
class="header-back__icon"
|
|
src="/static/assets/foundation/transparent/chevron-right.png"
|
|
mode="aspectFit"
|
|
aria-hidden="true"
|
|
/>
|
|
</button>
|
|
</view>
|
|
|
|
<view
|
|
class="header-project-lockup"
|
|
:class="{ 'header-project-lockup--root': root }"
|
|
>
|
|
<image
|
|
v-if="!root"
|
|
class="header-project-lockup__logo"
|
|
src="/static/assets/foundation/transparent/brand-seal.png"
|
|
mode="aspectFit"
|
|
aria-hidden="true"
|
|
/>
|
|
<text class="header-project-name">代代相传</text>
|
|
</view>
|
|
<text class="header-title app-single-line">{{ title }}</text>
|
|
|
|
<view class="header-side header-side--right">
|
|
<button
|
|
v-if="root && notice"
|
|
class="header-icon-button header-notice"
|
|
:aria-label="unreadCount > 0 ? `打开消息中心，${unreadCount} 条未读` : '打开消息中心'"
|
|
@click="$emit('notice')"
|
|
>
|
|
<image
|
|
class="header-notice-icon"
|
|
src="/static/assets/foundation/transparent/notice.png"
|
|
mode="aspectFit"
|
|
aria-hidden="true"
|
|
/>
|
|
<view v-if="unreadCount > 0" class="notice-dot"></view>
|
|
</button>
|
|
<button
|
|
v-else-if="root && action"
|
|
class="header-action header-action--root app-single-line"
|
|
@click="$emit('action')"
|
|
>{{ action }}</button>
|
|
<button v-else-if="action" class="header-action app-single-line" @click="$emit('action')">{{
|
|
action
|
|
}}</button>
|
|
<view
|
|
v-else
|
|
class="header-action-placeholder"
|
|
aria-hidden="true"
|
|
></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { goBack } from "@/utils/navigation/gateway.js";
|
|
|
|
const props = defineProps({
|
|
title: { type: String, required: true },
|
|
action: { type: String, default: "" },
|
|
root: { type: Boolean, default: false },
|
|
unreadCount: { type: Number, default: 0 },
|
|
notice: { type: Boolean, default: false },
|
|
customBack: { type: Boolean, default: false },
|
|
});
|
|
|
|
const emit = defineEmits(["notice", "action", "back"]);
|
|
|
|
const handleBack = () => {
|
|
if (props.customBack) {
|
|
emit("back");
|
|
return;
|
|
}
|
|
return goBack();
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page-header-slot {
|
|
height: calc(104rpx + var(--status-bar-height, 0px));
|
|
flex: none;
|
|
}
|
|
|
|
.page-header-slot--root {
|
|
height: calc(124rpx + var(--status-bar-height, 0px));
|
|
}
|
|
|
|
.page-header {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 30;
|
|
display: flex;
|
|
align-items: center;
|
|
height: calc(104rpx + var(--status-bar-height, 0px));
|
|
padding: 0 24rpx;
|
|
padding-top: var(--status-bar-height, 0px);
|
|
box-sizing: border-box;
|
|
background: $brand-red;
|
|
color: #fff9ed;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.page-header--root {
|
|
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: 0.29;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.page-header--root .header-side,
|
|
.page-header--root .header-title {
|
|
z-index: 2;
|
|
}
|
|
|
|
.header-side {
|
|
display: flex;
|
|
flex: 0 0 120rpx;
|
|
width: 120rpx;
|
|
min-height: 88rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-side--left {
|
|
justify-content: flex-start;
|
|
}
|
|
.header-side--right {
|
|
justify-content: flex-end;
|
|
}
|
|
.page-header:not(.page-header--root) .header-side--right {
|
|
flex-basis: 152rpx;
|
|
width: 152rpx;
|
|
}
|
|
|
|
.header-icon-button {
|
|
display: grid;
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
place-items: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
line-height: normal;
|
|
}
|
|
.header-brand {
|
|
display: grid;
|
|
width: 88rpx;
|
|
min-height: 88rpx;
|
|
place-items: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
line-height: normal;
|
|
}
|
|
.header-icon-button::after,
|
|
.header-back::after,
|
|
.header-action::after {
|
|
border: 0;
|
|
}
|
|
|
|
.header-logo {
|
|
width: 66rpx;
|
|
height: 66rpx;
|
|
}
|
|
.header-notice-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.header-logo,
|
|
.header-notice-icon,
|
|
.notice-dot {
|
|
grid-area: 1 / 1;
|
|
}
|
|
|
|
.notice-dot {
|
|
align-self: start;
|
|
justify-self: end;
|
|
width: 14rpx;
|
|
height: 14rpx;
|
|
margin-top: 15rpx;
|
|
margin-right: 13rpx;
|
|
border: 2rpx solid $brand-red;
|
|
border-radius: 50%;
|
|
background: #fff9ed;
|
|
}
|
|
|
|
.header-action {
|
|
display: flex;
|
|
width: 100%;
|
|
min-height: 88rpx;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #ffe3a7;
|
|
font-size: clamp(16px, 27rpx, 20px);
|
|
line-height: normal;
|
|
text-align: right;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.header-action-placeholder {
|
|
width: 100%;
|
|
min-height: 88rpx;
|
|
}
|
|
.header-action--root {
|
|
color: #ffe3a7;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.header-back {
|
|
display: flex;
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
line-height: normal;
|
|
}
|
|
.header-back__icon {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
filter: brightness(0) invert(1);
|
|
transform: scaleX(-1);
|
|
}
|
|
.header-back--pressed {
|
|
opacity: 0.62;
|
|
}
|
|
.header-project-lockup {
|
|
position: absolute;
|
|
top: calc(var(--status-bar-height, 0px) + 52rpx);
|
|
left: 112rpx;
|
|
z-index: 3;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7rpx;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.header-project-lockup--root {
|
|
top: calc(var(--status-bar-height, 0px) + 62rpx);
|
|
left: 116rpx;
|
|
}
|
|
|
|
.header-project-lockup__logo {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.header-project-name {
|
|
color: #ffe3a7;
|
|
font-family: "STKaiti", "KaiTi", serif;
|
|
font-size: clamp(11px, 19rpx, 14px);
|
|
font-weight: 700;
|
|
letter-spacing: 3rpx;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
.header-title {
|
|
min-width: 0;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
color: #fff9ed;
|
|
font-family: serif;
|
|
font-size: clamp(19px, 35rpx, 24px);
|
|
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: clamp(24px, 48rpx, 30px);
|
|
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>
|