eafonyang
37 lines
1.2 KiB
Vue
37 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* 内页 Hero 公共区：overline + 标题 + 副标题 + 可选背景图
|
|
*
|
|
* 非首页导航栏为 glass 风格（深色文字），因此无背景图时使用深色文字，
|
|
* 有背景图时叠加半透明遮罩并使用白色文字。
|
|
*/
|
|
defineProps<{
|
|
title: string;
|
|
subtitle?: string;
|
|
overline?: string;
|
|
bgUrl?: string;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<section class="relative overflow-hidden">
|
|
<!-- 背景图 + 遮罩 -->
|
|
<div v-if="bgUrl" class="absolute inset-0 bg-cover bg-center" :style="{ backgroundImage: `url(${bgUrl})` }" />
|
|
<div v-if="bgUrl" class="absolute inset-0 bg-black/45" />
|
|
|
|
<!-- 内容 -->
|
|
<div
|
|
class="section-container relative flex flex-col items-center text-center gap-16px py-72px md:py-96px"
|
|
:class="bgUrl ? 'text-white' : 'text-gray-900 dark:text-white'"
|
|
>
|
|
<p v-if="overline" class="text-sm tracking-[0.35em] uppercase opacity-80 font-medium">
|
|
{{ overline }}
|
|
</p>
|
|
<h1 class="text-3xl md:text-5xl font-bold leading-tight">{{ title }}</h1>
|
|
<p v-if="subtitle" class="max-w-680px text-base md:text-lg opacity-90 leading-relaxed">
|
|
{{ subtitle }}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</template>
|