feat(home): 替换首页轮播图实现为广告系统驱动

- 移除原有的硬编码轮播图组件和相关样式
- 新增 getAdByCode 方法用于获取广告数据
- 实现解析广告数据的工具函数 parseSlides 和 parsePx
- 集成 useAsyncData 获取 flash 广告数据
- 添加备用图片以确保加载失败时的显示
- 更新页面样式适配新的轮播组件结构

app/components/Carousel.vue

@@ -8,15 +8,16 @@
           :autoplay-speed="autoplaySpeed"
           :dots="dotsEnabled"
           :effect="effect"
+          :style="{ height: heightCss }"
         >
-          <div v-for="it in normalizedItems" :key="it.src" class="carousel-item">
+          <div v-for="it in normalizedItems" :key="it.src" class="carousel-item" :style="{ height: heightCss }">
             <NuxtLink
               v-if="it.href && !isExternal(it.href)"
               :to="it.href"
               class="carousel-link"
               aria-label="carousel-slide"
             >
-              <div class="carousel-bg" :style="{ backgroundImage: `url(${it.src})` }"></div>
+              <img class="carousel-img" :src="it.src" :alt="it.alt || 'slide'" loading="lazy" />
             </NuxtLink>
             <a
               v-else-if="it.href"
@@ -26,14 +27,14 @@
               rel="noopener noreferrer"
               aria-label="carousel-slide"
             >
-              <div class="carousel-bg" :style="{ backgroundImage: `url(${it.src})` }"></div>
+              <img class="carousel-img" :src="it.src" :alt="it.alt || 'slide'" loading="lazy" />
             </a>
-            <div v-else class="carousel-bg" :style="{ backgroundImage: `url(${it.src})` }"></div>
+            <img v-else class="carousel-img" :src="it.src" :alt="it.alt || 'slide'" loading="lazy" />
           </div>
         </a-carousel>
 
         <template #fallback>
-          <div class="carousel-bg" :style="{ height: heightCss, backgroundImage: `url(${fallbackSrc})` }"></div>
+          <img class="carousel-img" :style="{ height: heightCss }" :src="fallbackSrc" alt="slide" />
         </template>
       </ClientOnly>
     </div>
@@ -44,6 +45,7 @@
 type CarouselItem = {
   src: string
   href?: string
+  alt?: string
 }
 
 const props = withDefaults(
@@ -77,8 +79,6 @@ function isExternal(href: string) {
 <style scoped>
 .carousel-panel {
   background: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
 }
@@ -96,11 +96,11 @@ function isExternal(href: string) {
   height: 100%;
 }
 
-.carousel-bg {
+.carousel-img {
+  width: 100%;
   height: 100%;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
+  object-fit: cover;
+  display: block;
 }
 
 .carousel :deep(.slick-list),

app/components/SiteHeader.vue

@@ -18,7 +18,7 @@
     </div>
 
     <div v-if="showBrandbar" class="brandbar">
-      <div class="mx-auto grid max-w-screen-xl grid-cols-12 items-center gap-6 px-4 py-8">
+      <div class="mx-auto grid max-w-screen-xl grid-cols-12 items-center gap-6 px-4 py-4">
         <NuxtLink to="/" class="col-span-12 flex items-center gap-4 md:col-span-6">
           <img class="brand-logo" :src="`https://oss.wsdns.cn/20260127/989e5cf82b0847ed9168023baf68f4a9.png`" :alt="siteName" />
         </NuxtLink>

app/pages/index.vue

@@ -1,14 +1,25 @@
 <template>
   <main class="home">
-    <Carousel class="px-4 py-8" :items="flashSlides" :height="flashHeight" />
+    <Carousel arrows class="mx-auto" :items="flashSlides" :height="flashHeight">
+      <template #prevArrow>
+        <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
+          <left-circle-outlined />
+        </div>
+      </template>
+      <template #nextArrow>
+        <div class="custom-slick-arrow" style="right: 10px">
+          <right-circle-outlined />
+        </div>
+      </template>
+    </Carousel>
 
-    <section class="banner">
-      <div class="mx-auto max-w-screen-xl px-4 py-10">
-        <div class="banner-title">以合规经营与品质服务为核心</div>
-      </div>
-    </section>
+<!--    <section class="banner">-->
+<!--      <div class="mx-auto max-w-screen-xl px-4 py-6">-->
+<!--        <div class="banner-title">以合规经营与品质服务为核心</div>-->
+<!--      </div>-->
+<!--    </section>-->
 
-    <section class="mx-auto max-w-screen-xl px-4 py-10">
+    <section class="mx-auto max-w-screen-xl px-4 py-6">
       <div class="section-title">
         <div class="section-title-main">资讯与公告</div>
         <div class="section-title-sub">NEWS & UPDATES</div>
@@ -63,8 +74,8 @@
 import {
   AppstoreOutlined,
   FileTextOutlined,
-  IdcardOutlined,
-  PhoneOutlined,
+  LeftCircleOutlined,
+  RightCircleOutlined,
   SafetyCertificateOutlined,
   ShopOutlined
 } from '@ant-design/icons-vue'
@@ -88,64 +99,29 @@ function parsePx(value?: string) {
   return Number.isFinite(n) ? n : undefined
 }
 
-function parseSlides(ad?: CmsAd | null) {
-  const raw = ad?.imageList
-  const fallbackHref = ad?.path
-
-  function pickString(obj: Record<string, unknown>, keys: string[]) {
-    for (const k of keys) {
-      const v = obj[k]
-      if (typeof v === 'string' && v.trim()) return v
-    }
-    return undefined
-  }
-
-  function asArray(val: unknown): unknown[] {
-    if (!val) return []
-    if (Array.isArray(val)) return val
-    if (typeof val === 'string') {
-      const text = val.trim()
-      if (!text) return []
-      try {
-        const parsed = JSON.parse(text)
-        return Array.isArray(parsed) ? parsed : [parsed]
-      } catch {
-        return text.split(/[,;\n]+/g).map((s) => s.trim()).filter(Boolean)
-      }
-    }
-    if (typeof val === 'object') {
-      const obj = val as Record<string, unknown>
-      if (Array.isArray(obj.list)) return obj.list
-      if (Array.isArray(obj.imageList)) return obj.imageList
-      if (Array.isArray(obj.images)) return obj.images
-      return [obj]
-    }
-    return []
-  }
-
-  return asArray(raw)
-    .map((it) => {
-      if (typeof it === 'string') return { src: it, href: fallbackHref }
-      if (it && typeof it === 'object') {
-        const obj = it as Record<string, unknown>
-        const src = pickString(obj, ['src', 'url', 'image', 'imageUrl', 'img', 'imgUrl', 'pic', 'picUrl'])
-        const href = pickString(obj, ['href', 'link', 'path', 'to']) ?? fallbackHref
-        if (!src) return null
-        return { src, href }
-      }
-      return null
-    })
-    .filter(Boolean) as Array<{ src: string; href?: string }>
+type FlashImage = {
+  url?: string
+  path?: string
+  title?: string
 }
 
-const { data: flashAd } = await useAsyncData('cms-ad-flash', () =>
+const { data: flashAd } = await useAsyncData<CmsAd | null>('cms-ad-flash', () =>
   getAdByCode('flash').catch(() => null)
 )
 
-console.log(flashAd.value?.imageList,'flashAdflashAdflashAd');
-
 const flashSlides = computed(() => {
-  const slides = parseSlides(flashAd.value)
+  const list = (flashAd.value?.imageList || []) as FlashImage[]
+  const slides = list
+    .map((it) => {
+      if (!it?.url) return null
+      return {
+        src: it.url,
+        href: it.path || undefined,
+        alt: it.title || undefined
+      }
+    })
+    .filter(Boolean) as Array<{ src: string; href?: string; alt?: string }>
+
   return slides.length
     ? slides
     : [{ src: 'https://file-cloud.yst.com.cn/photo/website/2024/11/28/5a5cc07336224e54a84561c80899bcac.jpg' }]
@@ -444,4 +420,33 @@ function scrollToCompany() {
   color: rgba(0, 0, 0, 0.55);
   line-height: 1.6;
 }
+:deep(.slick-slide) {
+  text-align: center;
+  height: 160px;
+  line-height: 160px;
+  background: #364d79;
+  overflow: hidden;
+}
+
+:deep(.slick-arrow.custom-slick-arrow) {
+  width: 25px;
+  height: 25px;
+  font-size: 25px;
+  color: #fff;
+  background-color: rgba(31, 45, 61, 0.11);
+  transition: ease all 0.3s;
+  opacity: 0.3;
+  z-index: 1;
+}
+:deep(.slick-arrow.custom-slick-arrow:before) {
+  display: none;
+}
+:deep(.slick-arrow.custom-slick-arrow:hover) {
+  color: #fff;
+  opacity: 0.5;
+}
+
+:deep(.slick-slide h3) {
+  color: #fff;
+}
 </style>