hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(头部组件): 新增动态样式和返回图标

Browse Source
This commit is contained in:
hzj 2025-10-23 14:29:34 +08:00
parent e3cc52ac5e
commit 8fdd0ab198
1 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/GeneralHeader.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08)"> <div>
<!-- 状态栏占位区域（仅在APP中显示） --> <!-- 状态栏占位区域（仅在APP中显示） -->
<div v-if="isInAppEnvironment" style="height: 30px"></div> <div v-if="isInAppEnvironment" style="height: 30px"></div>
@ -16,11 +16,7 @@
<!-- 返回键 --> <!-- 返回键 -->
<div style="width: 10%; display: flex; align-items: center"> <div style="width: 10%; display: flex; align-items: center">
<button v-if="showBack" class="back-btn" @click="handleBack"> <button v-if="showBack" class="back-btn" @click="handleBack">
<img <img :src="backImg" alt="" style="width: 100%; aspect-ratio: 1/1; display: block" />
src="../assets/icon/arrowBack.png"
alt=""
style="width: 100%; aspect-ratio: 1/1; display: block"
/>
</button> </button>
</div> </div>
<h1 <h1
@ -28,16 +24,21 @@
font-size: 1.2em; font-size: 1.2em;
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
color: #fff;
text-align: center; text-align: center;
flex: 1; flex: 1;
letter-spacing: 0.3px; letter-spacing: 0.3px;
" "
:style="{ color }"
> >
{{ title }} {{ title }}
</h1> </h1>
<button v-if="showHelp" class="help-btn" style="width: 10%" @click="$emit('help')"> <button class="help-btn" style="width: 10%" @click="$emit('help')">
<img src="../assets/icon/helpWhite.png" alt="" style="width: 100%; display: block" /> <img
v-if="showHelp"
src="../assets/icon/helpWhite.png"
alt=""
style="width: 100%; display: block"
/>
</button> </button>
<slot name="extraFunction"></slot> <slot name="extraFunction"></slot>
</div> </div>
@ -67,6 +68,16 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
color: {
type: String,
default: '#fff',
},
backImg: {
type: String,
default: '/src/assets/icon/arrowBack.png',
},
}) })
// 定义emits // 定义emits
@ -112,7 +123,6 @@ onMounted(() => {
<style scoped> <style scoped>
* { * {
color: white;
font-family: 'SF Pro Text'; font-family: 'SF Pro Text';
} }