hookehuyr

style(GradientHeader): 调整布局和样式以提升可读性和交互性

调整了按钮和标题的布局,使其在显示返回按钮时居中。添加了 z-index 以确保元素层叠顺序正确,提升用户体验。
<template>
<header class="bg-gradient-to-r from-green-50 to-blue-50 p-4 relative">
<div class="flex items-center justify-between">
<div class="flex items-center justify-between relative">
<button
v-if="showBackButton"
@click="onBack"
class="p-2 rounded-full bg-white/30 backdrop-blur-sm"
class="p-2 rounded-full bg-white/30 backdrop-blur-sm z-10"
aria-label="返回"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<h1 :class="['text-xl font-medium text-center', showBackButton ? 'flex-1' : '']">
<h1 :class="{
'absolute left-1/2 -translate-x-1/2': showBackButton,
'text-xl font-medium': true
}">
{{ title }}
</h1>
<div v-if="rightContent" v-html="rightContent.content"></div>
<div v-if="rightContent" class="z-10" v-html="rightContent.content"></div>
</div>
</header>
</template>
......