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

- 移除原有的硬编码轮播图组件和相关样式 - 新增 getAdByCode 方法用于获取广告数据 - 实现解析广告数据的工具函数 parseSlides 和 parsePx - 集成 useAsyncData 获取 flash 广告数据 - 添加备用图片以确保加载失败时的显示 - 更新页面样式适配新的轮播组件结构
2026-01-29 14:05:01 +08:00
parent 08134d4598
commit aaef9e0dba
3 changed files with 78 additions and 73 deletions
--- a/app/components/Carousel.vue
+++ b/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),
--- a/app/components/SiteHeader.vue
+++ b/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>
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,14 +1,25 @@
 <template>
  <main class="home">
-    <Carousel class="px-4 py-8" :items="flashSlides" :height="flashHeight" />
-
-    <section class="banner">
-      <div class="mx-auto max-w-screen-xl px-4 py-10">
-        <div class="banner-title">以合规经营与品质服务为核心</div>
+    <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>
-    </section>
+      </template>
+      <template #nextArrow>
+        <div class="custom-slick-arrow" style="right: 10px">
+          <right-circle-outlined />
+        </div>
+      </template>
+    </Carousel>

-    <section class="mx-auto max-w-screen-xl px-4 py-10">
+<!--    <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-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>