80 lines
2.5 KiB
Vue
80 lines
2.5 KiB
Vue
<template>
|
||
<section class="relative text-white">
|
||
<!-- 背景图层 - 确保完全填充整个红色区域 -->
|
||
<div class="absolute inset-0 bg-cover bg-center bg-no-repeat w-full h-full"
|
||
:style="bgImage ? `background-image: url('${bgImage}')` : ''"
|
||
></div>
|
||
|
||
<!-- 轻微遮罩，确保文字可读性 -->
|
||
<div class="absolute inset-0 bg-black/10"></div>
|
||
|
||
<div class="container relative z-10 h-full flex items-center justify-end">
|
||
<!-- 调整移动端和桌面端的宽度，保持布局结构 -->
|
||
<div class="w-full md:w-3/5 lg:w-2/5 flex flex-col items-center md:items-end pt-12 px-6 md:px-0">
|
||
<div class="text-center md:text-right">
|
||
<!-- 参考图片标题样式 -->
|
||
<h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-1 text-white">
|
||
<span class="transition-opacity duration-300 ease-in-out">{{ title || (titleKey ? $t(titleKey) : '') }}</span>
|
||
</h1>
|
||
<!-- 副标题样式调整：字体更小，颜色改为蓝色，添加加粗 -->
|
||
<p class="text-base sm:text-lg md:text-lg text-blue-500 mb-1 font-semibold">
|
||
<span class="transition-opacity duration-300 ease-in-out">{{ subtitle || (subtitleKey ? $t(subtitleKey) : '') }}</span>
|
||
</p>
|
||
<!-- 描述文本样式调整为细字体 -->
|
||
<p v-if="descriptionKey" class="text-sm sm:text-base text-white mb-5 font-light tracking-wide max-w-md mx-auto md:mx-0 text-left">
|
||
<span class="transition-opacity duration-300 ease-in-out">{{ $t(descriptionKey) }}</span>
|
||
</p>
|
||
<!-- 按钮布局保持不变 -->
|
||
<div class="flex flex-col sm:flex-row gap-3 justify-center md:justify-end">
|
||
<slot></slot>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
defineProps<{
|
||
title?: string;
|
||
subtitle?: string;
|
||
titleKey?: string;
|
||
subtitleKey?: string;
|
||
descriptionKey?: string;
|
||
bgImage?: string;
|
||
}>();
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 添加淡入淡出效果，语言切换时更平滑 */
|
||
.transition-opacity {
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
:deep([i18n-in-progress]) .transition-opacity {
|
||
opacity: 0;
|
||
}
|
||
|
||
/* 确保Banner高度与设计图一致，移动端更小 */
|
||
section {
|
||
height: 450px;
|
||
}
|
||
|
||
/* 移除文字阴影，符合参考图 */
|
||
h1, p {
|
||
text-shadow: none;
|
||
}
|
||
|
||
/* 移动端响应式高度和内容调整 */
|
||
@media (max-width: 768px) {
|
||
section {
|
||
height: 400px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
section {
|
||
height: 350px;
|
||
}
|
||
}
|
||
</style> |