153 lines
3.6 KiB
Vue
153 lines
3.6 KiB
Vue
<template>
|
|
<view class="page-header" :class="{ 'page-header--root': root }">
|
|
<image v-if="root" class="header-texture" src="/static/assets/backgrounds/header-cinnabar-texture-v2.jpg" mode="scaleToFill" />
|
|
<image v-if="root" class="header-hall" src="/static/assets/backgrounds/header-hall-lineart.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/icons/brand/jiapu-seal-logo-header.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/icons/common/notice-v3.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: 184rpx;
|
|
padding-top: env(safe-area-inset-top);
|
|
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: -8rpx;
|
|
left: -34rpx;
|
|
z-index: 1;
|
|
width: 368rpx;
|
|
height: 147rpx;
|
|
opacity: .16;
|
|
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(8rpx);
|
|
}
|
|
|
|
.page-header--root .header-logo {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
transform: translate(-8rpx, -12rpx);
|
|
}
|
|
|
|
.page-header--root .header-notice { transform: translateY(10rpx); }
|
|
</style>
|