feat(home): 添加首页轮播图功能并优化页面样式

- 集成 a-carousel 组件实现首页英雄区域轮播图效果
- 添加 ClientOnly 包装确保轮播图在客户端渲染
- 配置自动播放和淡入淡出动画效果
- 设置背景图片数组包含两个轮播图片地址
- 调整 CSS 样式实现轮播图绝对定位和层级管理
- 修改页脚背景色从黑色调整为灰色
- 恢复显示网站名称文字并设置绿色字体颜色
- 优化轮播图容器和幻灯片的高度适配样式
This commit is contained in:
2026-01-29 12:56:01 +08:00
parent 7bb22a1975
commit 76534dd2de
3 changed files with 51 additions and 5 deletions

View File

@@ -35,9 +35,9 @@
<div class="mx-auto flex max-w-screen-xl items-center justify-between gap-3 px-4">
<NuxtLink to="/" class="navbar-brand">
<img class="navbar-logo" :src="logoUrl" :alt="siteName" />
<!-- <span class="navbar-brand-name">-->
<!-- {{ siteName }}-->
<!-- </span>-->
<span class="navbar-brand-name">
{{ siteName }}
</span>
</NuxtLink>
<nav class="nav hidden md:flex">
<template v-for="item in navItems" :key="item.key">
@@ -377,6 +377,7 @@ const todayText = computed(() => {
}
.navbar-brand-name {
color: #e7ffe5;
font-size: 15px;
letter-spacing: 0.02em;
white-space: nowrap;