From 76534dd2de6a23088067cc2e27d62a2bfeb15853 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Thu, 29 Jan 2026 12:56:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(home):=20=E6=B7=BB=E5=8A=A0=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E8=BD=AE=E6=92=AD=E5=9B=BE=E5=8A=9F=E8=83=BD=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 集成 a-carousel 组件实现首页英雄区域轮播图效果
- 添加 ClientOnly 包装确保轮播图在客户端渲染
- 配置自动播放和淡入淡出动画效果
- 设置背景图片数组包含两个轮播图片地址
- 调整 CSS 样式实现轮播图绝对定位和层级管理
- 修改页脚背景色从黑色调整为灰色
- 恢复显示网站名称文字并设置绿色字体颜色
- 优化轮播图容器和幻灯片的高度适配样式
---
 app/components/SiteFooter.vue |  2 +-
 app/components/SiteHeader.vue |  7 +++---
 app/pages/index.vue           | 47 ++++++++++++++++++++++++++++++++++-
 3 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/app/components/SiteFooter.vue b/app/components/SiteFooter.vue
index e4633ea..9cc608a 100644
--- a/app/components/SiteFooter.vue
+++ b/app/components/SiteFooter.vue
@@ -75,7 +75,7 @@ const year = new Date().getFullYear()
 
 <style scoped>
 .footer {
-  background: #000;
+  background: #4b5563;
   padding: 0;
 }
 </style>
diff --git a/app/components/SiteHeader.vue b/app/components/SiteHeader.vue
index bf2d928..8c40190 100644
--- a/app/components/SiteHeader.vue
+++ b/app/components/SiteHeader.vue
@@ -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;
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 033831b..e72fddc 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -4,6 +4,23 @@
       <div class="grid grid-cols-12 gap-6">
         <div class="col-span-12">
           <div class="panel hero">
+            <div class="hero-bg" aria-hidden="true">
+              <ClientOnly>
+                <a-carousel class="hero-carousel" autoplay effect="fade" :autoplaySpeed="4500" :dots="false">
+                  <div
+                    v-for="src in heroSlides"
+                    :key="src"
+                    class="hero-slide"
+                    :style="{ backgroundImage: `url(${src})` }"
+                  ></div>
+                </a-carousel>
+                <template #fallback>
+                  <div class="hero-carousel">
+                    <div class="hero-slide" :style="{ backgroundImage: `url(${heroSlides[0]})` }"></div>
+                  </div>
+                </template>
+              </ClientOnly>
+            </div>
             <div class="hero-inner">
 <!--              <div class="hero-badge">OFFICIAL</div>-->
 <!--              <div class="hero-title">{{ COMPANY.projectName }}</div>-->
@@ -140,6 +157,11 @@ usePageSeo({
   path: '/'
 })
 
+const heroSlides = [
+  'https://file-cloud.yst.com.cn/photo/website/2024/11/28/5a5cc07336224e54a84561c80899bcac.jpg',
+  'https://oss.wsdns.cn/20260115/75690dea8f064ceda03246b198a7d710.jpg'
+]
+
 function splitScope(text: string) {
   return text
     .split(/[；;]+/g)
@@ -253,14 +275,37 @@ function scrollToCompany() {
 }
 
 .hero {
+  position: relative;
   min-height: 360px;
-  background: url('https://oss.wsdns.cn/20260115/75690dea8f064ceda03246b198a7d710.jpg');
+}
+
+.hero-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.hero-carousel {
+  height: 100%;
+}
+
+.hero-slide {
+  height: 100%;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }
 
+.hero-carousel :deep(.slick-list),
+.hero-carousel :deep(.slick-track),
+.hero-carousel :deep(.slick-slide),
+.hero-carousel :deep(.slick-slide > div) {
+  height: 100%;
+}
+
 .hero-inner {
+  position: relative;
+  z-index: 1;
   height: 100%;
   padding: 28px;
   display: flex;