fix: 拆分组件, 移动端弹窗适配

app/components/ConsultationModal.vue

@@ -13,26 +13,26 @@
       @click.self="close"
     >
       <div
-        class="relative w-1200px bg-white rounded-8px shadow-2xl overflow-hidden animate-zoom-in"
+        class="relative w-1200px bg-white rounded-8px shadow-2xl overflow-hidden animate-zoom-in lt-sm:w-[calc(100vw-35px)] lt-sm:max-h-[90vh] lt-sm:overflow-y-auto"
       >
         <!-- Close Button -->
         <i
-          class="i-ep-close wh-22px font-semibold absolute top-20px right-20px text-gray-500 cursor-pointer"
+          class="i-ep-close wh-22px font-semibold absolute top-20px right-20px text-gray-500 cursor-pointer lt-sm:top-16px lt-sm:right-16px"
           @click="close"
         ></i>
 
-        <div class="py-46px px-36px">
+        <div class="py-46px px-36px lt-sm:px-40px lt-sm:py-60px">
           <!-- Header -->
-          <div class="text-center mb-45px">
-            <div class="font-s-36px pf-sc-semibold text-#000000 mb-4px">
+          <div class="text-center mb-45px lt-sm:mb-24px">
+            <div class="font-s-36px pf-sc-semibold text-#000000 mb-4px lt-sm:font-s-48px">
               开启您的智慧社区转型之旅
             </div>
-            <div class="font-s-16px text-#091221/70 lh-30px pf-sc-regular">
+            <div class="font-s-16px text-#091221/70 lh-30px pf-sc-regular lt-sm:font-s-26px">
               提交您的需求，我们的专属顾问将在24小时内为您提供定制化解决方案
             </div>
           </div>
 
-          <div class="flex gap-60px">
+          <div class="flex gap-60px lt-sm:flex-col lt-sm:gap-0">
             <!-- Left Form -->
             <div class="flex-1">
               <el-form
@@ -40,7 +40,7 @@
                 :model="form"
                 :rules="rules"
                 label-position="top"
-                class="flex flex-col gap-24px"
+                class="flex flex-col gap-24px lt-sm:gap-32px"
                 :hide-required-asterisk="true"
                 @submit.prevent="handleSubmit"
               >
@@ -52,13 +52,16 @@
                       <span class="text-red-500">*</span>
                     </span>
                   </template>
-                  <div class="flex gap-28px w-full">
+                  <div class="flex gap-28px w-full lt-sm:flex-col lt-sm:gap-12px">
                     <el-input
                       v-model="form.name"
                       placeholder="请输入您的称谓"
-                      class="custom-input flex-1"
+                      class="custom-input flex-1 lt-sm:w-full"
                     />
-                    <el-radio-group v-model="form.gender" class="shrink-0 flex-1">
+                    <el-radio-group
+                      v-model="form.gender"
+                      class="shrink-0 flex-1 lt-sm:w-full lt-sm:justify-start"
+                    >
                       <el-radio value="mr">先生</el-radio>
                       <el-radio value="ms">女士</el-radio>
                     </el-radio-group>
@@ -94,7 +97,6 @@
                     class="custom-input w-full"
                   />
                 </el-form-item>
-
                 <!-- Description -->
                 <el-form-item prop="desc" class="custom-form-item">
                   <el-input
@@ -110,17 +112,20 @@
                 <!-- Submit Button -->
                 <button
                   v-loading="loading"
-                  class="mt-56px h-48px! w-268px! bg-#0F67F8 text-white pf-sc-regular rounded-8px px-16px flex items-center justify-between hover:opacity-80"
+                  class="mt-56px h-48px w-268px bg-#0F67F8 text-white pf-sc-regular rounded-8px px-16px flex items-center justify-between hover:opacity-80 lt-sm:w-453px lt-sm:m-auto lt-sm:rounded-16px lt-sm:h-84px lt-sm:mt-60px lt-sm:justify-between lt-sm:gap-8px"
                   @click="handleSubmit"
                 >
-                  <span class="font-s-16px">立即咨询</span>
-                  <i class="i-custom-arrow-right wh-18px"></i>
+                  <span class="font-s-16px lt-sm:hidden">立即咨询</span>
+                  <span class="hidden lt-sm:block lt-sm:font-s-26px">提交需求，获取专属方案</span>
+                  <i class="i-custom-arrow-right wh-18px lt-sm:wh-21px"></i>
                 </button>
               </el-form>
             </div>
 
             <!-- Right Info -->
-            <div class="w-390px rounded-8px p-40px flex flex-col overflow-hidden right-info">
+            <div
+              class="w-390px rounded-8px p-40px flex flex-col overflow-hidden right-info lt-sm:hidden"
+            >
               <div class="relative flex flex-col items-start">
                 <div class="wh-40px bg-white rounded-10px flex-center">
                   <i class="i-custom-phone wh-23px"></i>
@@ -206,10 +211,12 @@
 <style scoped lang="scss">
   .form-label {
     @apply font-s-16px text-#334155 mb-14px;
+    @apply lt-sm:font-s-26px lt-sm:mb-14px;
   }
 
   /* Custom Input Styles to match design */
   :deep(.custom-input .el-input__wrapper) {
+    @apply lt-sm:h-82px lt-sm:rounded-8px lt-sm:px-24px;
     height: 52px;
     border-radius: 4px;
     box-shadow: 0 0 0 1px #e2e8f0; /* border-gray-200 */
@@ -229,13 +236,14 @@
   }
 
   :deep(.custom-input .el-input__inner) {
-    @apply h-52px!;
+    @apply h-52px lt-sm:h-82px;
     font-size: 14px;
     color: #0f172a;
   }
 
   :deep(.custom-textarea .el-textarea__inner) {
-    @apply min-h-127px!;
+    @apply min-h-127px lt-sm:min-h-166px;
+    @apply lt-sm:rounded-8px lt-sm:p-24px;
     border-radius: 4px;
     box-shadow: 0 0 0 1px #e2e8f0;
     padding: 12px 16px;

app/pages/index/components/AbilitySection.vue

@@ -0,0 +1,228 @@
+<template>
+  <section
+    id="ability"
+    ref="abilityRef"
+    class="ability transition-all duration-1000 ease-out"
+    :class="[isAbilityVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
+  >
+    <div class="ability-title pf-sc-semibold">一体化智慧解决方案</div>
+    <div class="ability-desc pf-sc-regular">
+      绘家科技提供从软件到硬件的完整解决方案，覆盖物业管理的全场景需求
+    </div>
+    <div class="ability-content">
+      <div class="ability-tabs">
+        <div class="ability-tab-indicator" :style="abilityTabIndicatorStyle"></div>
+
+        <div
+          v-for="tab in abilityTabs"
+          :key="tab.title"
+          class="ability-tab-item"
+          :class="[activeAbilityTab.id === tab.id ? 'text-white' : 'text-#091221 hover:text-#0F67F8']"
+          @click="handleAbilityTabClick(tab)"
+        >
+          {{ tab.title }}
+        </div>
+      </div>
+      <div class="tab-content">
+        <Transition name="tab-fade" mode="out-in">
+          <div :key="activeAbilityTab.id" class="ability-grid">
+            <div
+              v-for="ability in abilities[activeAbilityTab.id]"
+              :key="ability.title"
+              class="ability-card"
+            >
+              <i :class="ability.icon" class="ability-card-icon"></i>
+              <div class="ability-card-title pf-sc-semibold">
+                {{ ability.title }}
+              </div>
+              <div class="ability-card-desc pf-sc-regular">
+                {{ ability.desc }}
+              </div>
+              <div class="ability-card-link">
+                查看详情
+                <i
+                  class="i-custom-arrow-right-c color-#0F67F8 wh-18px lt-sm:wh-28px transition-transform group-hover:translate-x-4px"
+                ></i>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { abilityTabs, abilities } from '@/constants/common'
+
+  const abilityRef = ref<HTMLElement | null>(null)
+  const isAbilityVisible = ref(false)
+
+  const activeAbilityTab = ref<AbilityTab>(abilityTabs[0] as AbilityTab)
+
+  const abilityTabIndicatorStyle = computed(() => {
+    const activeTabIndex = abilityTabs.findIndex((tab) => tab.id === activeAbilityTab.value.id)
+    return {
+      transform: `translateX(${activeTabIndex * 100}%)`,
+    }
+  })
+
+  const handleAbilityTabClick = (tab: AbilityTab) => {
+    activeAbilityTab.value = tab
+  }
+
+  onMounted(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) return
+          isAbilityVisible.value = true
+          observer.unobserve(entry.target)
+        })
+      },
+      { threshold: 0.1 }
+    )
+
+    if (abilityRef.value) {
+      observer.observe(abilityRef.value)
+    }
+  })
+</script>
+
+<style scoped lang="scss">
+  .ability {
+    @apply py-120px;
+    @extend %landing-container;
+    @apply lt-sm:py-120px lt-sm:px-32px;
+    background-size: 100% 100%;
+    background-image: url('@/assets/images/bg-ability.png');
+
+    @screen lt-sm {
+      background-size: 100% 100%;
+      background-image: url('@/assets/images/bg-ability-mobile.png');
+    }
+  }
+
+  .ability-title {
+    @apply font-s-36px text-#000000 pf-sc-semibold flex-center lh-60px;
+    @apply lt-sm:font-s-48px lt-sm:lh-60px;
+  }
+
+  .ability-desc {
+    @apply font-s-16px text-#091221/70 pf-sc-regular lh-30px flex-center mt-4px;
+    @apply lt-sm:font-s-24px lt-sm:lh-40px lt-sm:text-center lt-sm:px-60px;
+  }
+
+  .ability-content {
+    @apply mt-24px flex-center flex-col;
+    @apply lt-sm:mt-40px;
+  }
+
+  .ability-tabs {
+    @apply relative flex items-center rounded-14px border border-#ECEFF6 bg-#F6F8FD p-6px;
+    @apply lt-sm:rounded-16px lt-sm:p-8px lt-sm:w-[calc(100%-40px)];
+  }
+
+  .ability-tab-indicator {
+    @apply absolute w-136px h-[calc(100%-12px)] transition-all duration-300 ease-out rounded-8px bg-#0F67F8;
+    @apply lt-sm:w-[calc((100%-16px)/3)] lt-sm:h-[calc(100%-16px)] lt-sm:rounded-12px;
+  }
+
+  .ability-tab-item {
+    @apply relative z-1 cursor-pointer py-14px px-20px text-center font-s-16px transition-colors duration-300 pf-sc-regular;
+    @apply lt-sm:flex-1 lt-sm:px-0 lt-sm:py-20px lt-sm:font-s-24px;
+  }
+
+  .tab-content {
+    @apply pt-45px;
+    @apply lt-sm:pt-40px lt-sm:w-full;
+  }
+
+  .ability-grid {
+    @apply grid grid-cols-3 gap-24px;
+    @apply lt-sm:grid-cols-2 lt-sm:gap-25px;
+  }
+
+  .ability-card {
+    @apply group relative flex flex-col rounded-16px border border-#ECEFF6 bg-[linear-gradient(0deg,_#FFFFFF_0%,_rgba(255,255,255,0.6)_100%)] p-24px transition-all duration-300 hover:border-#0F67F8/30 hover:shadow-[0_8px_24px_rgba(15,103,248,0.08)];
+    @apply lt-sm:p-24px lt-sm:rounded-16px;
+  }
+
+  .ability-card-icon {
+    @apply wh-48px;
+    @apply lt-sm:wh-78px;
+  }
+
+  .ability-card-title {
+    @apply mt-16px font-s-18px font-semibold text-#091221 pf-sc-semibold;
+    @apply lt-sm:font-s-32px;
+  }
+
+  .ability-card-desc {
+    @apply mt-8px flex-1 font-s-14px text-#091221/70 pf-sc-regular;
+    @apply lt-sm:font-s-24px lt-sm:mt-16px;
+  }
+
+  .ability-card-link {
+    @apply mt-24px flex items-center gap-8px font-s-16px pf-sc-regular text-#0F67F8 transition-colors hover:text-#0A50FF cursor-pointer;
+    @apply lt-sm:mt-48px lt-sm:font-s-28px;
+  }
+
+  .tab-fade-enter-active {
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  .tab-fade-leave-active {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .tab-fade-enter-from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+
+  .tab-fade-leave-to {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+
+  .grid > div {
+    animation: card-slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  }
+
+  .grid > div:nth-child(1) {
+    animation-delay: 0.05s;
+  }
+  .grid > div:nth-child(2) {
+    animation-delay: 0.1s;
+  }
+  .grid > div:nth-child(3) {
+    animation-delay: 0.15s;
+  }
+  .grid > div:nth-child(4) {
+    animation-delay: 0.2s;
+  }
+  .grid > div:nth-child(5) {
+    animation-delay: 0.25s;
+  }
+  .grid > div:nth-child(6) {
+    animation-delay: 0.3s;
+  }
+  .grid > div:nth-child(7) {
+    animation-delay: 0.35s;
+  }
+  .grid > div:nth-child(8) {
+    animation-delay: 0.4s;
+  }
+
+  @keyframes card-slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>

app/pages/index/components/CasesSection.vue

@@ -0,0 +1,213 @@
+<template>
+  <section
+    id="cases"
+    ref="casesRef"
+    class="cases transition-all duration-1000 ease-out"
+    :class="[isCasesVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
+  >
+    <div class="cases-header">
+      <div class="cases-title pf-sc-semibold">知识产权和案例</div>
+      <div class="cases-desc pf-sc-regular">
+        绘家科技凭借强大的技术实力和丰富的实践经验，为客户提供卓越的智慧社区解决方案
+      </div>
+    </div>
+
+    <div ref="casesListRef" class="cases-list" @scroll="handleCaseScroll">
+      <div
+        v-for="(caseItem, index) in cases"
+        :key="caseItem.title"
+        class="cases-card"
+        :class="{ active: index === activeCaseIndex }"
+      >
+        <div class="flex flex-col h-full">
+          <img :src="caseItem.img" class="cases-card-img" alt="" />
+          <div class="cases-card-title pf-sc-semibold">
+            {{ caseItem.title }}
+          </div>
+          <div class="cases-card-desc pf-sc-regular">
+            {{ caseItem.desc }}
+          </div>
+          <div class="cases-card-points">
+            <div v-for="point in caseItem.points" :key="point.title" class="cases-card-point">
+              <i class="i-custom-check-one cases-card-point-icon"></i>
+              <div class="cases-card-point-title pf-sc-semibold">
+                {{ point.title }}
+              </div>
+              <div class="cases-card-point-desc pf-sc-regular">
+                {{ point.itemDesc }}
+              </div>
+            </div>
+          </div>
+
+          <button class="cases-btn">
+            {{ caseItem.btnText }}
+            <i class="i-custom-arrow-right-c cases-card-btn-icon"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="cases-dots lt-sm:flex hidden">
+      <div
+        v-for="(_, index) in cases"
+        :key="index"
+        class="dot"
+        :class="{ active: index === activeCaseIndex }"
+        @click="scrollToCase(index)"
+      ></div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { cases } from '@/constants/common'
+
+  const casesRef = ref<HTMLElement | null>(null)
+  const isCasesVisible = ref(false)
+  const activeCaseIndex = ref(0)
+  const casesListRef = ref<HTMLElement | null>(null)
+
+  const handleCaseScroll = (e: Event) => {
+    const el = e.target as HTMLElement
+    const scrollLeft = el.scrollLeft
+    const width = el.offsetWidth
+    const cardWidth = width * 0.9
+    const gap = 16
+    const newIndex = Math.round(scrollLeft / (cardWidth + gap))
+    if (newIndex !== activeCaseIndex.value) {
+      activeCaseIndex.value = newIndex
+    }
+  }
+
+  const scrollToCase = (index: number) => {
+    if (!casesListRef.value) return
+    const width = casesListRef.value.offsetWidth
+    const cardWidth = width * 0.9
+    const gap = 16
+    casesListRef.value.scrollTo({
+      left: index * (cardWidth + gap),
+      behavior: 'smooth',
+    })
+  }
+
+  onMounted(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) return
+          isCasesVisible.value = true
+          observer.unobserve(entry.target)
+        })
+      },
+      { threshold: 0.1 }
+    )
+
+    if (casesRef.value) {
+      observer.observe(casesRef.value)
+    }
+  })
+</script>
+
+<style scoped lang="scss">
+  .cases {
+    @apply pt-120px pb-46px lt-sm:pt-120px lt-sm:pb-60px lt-sm:px-32px;
+    @extend %landing-container;
+  }
+
+  .cases-header {
+    @apply text-center mb-60px lt-sm:mb-60px lt-sm:px-32px;
+  }
+
+  .cases-title {
+    @apply font-s-36px font-semibold text-#000000 mb-4px lh-60px;
+    @apply lt-sm:font-s-48px lt-sm:mb-16px;
+  }
+
+  .cases-desc {
+    @apply font-s-16px text-#091221/70 lh-30px;
+    @apply lt-sm:font-s-24px lt-sm:lh-40px lt-sm:px-70px;
+  }
+
+  .cases-list {
+    @apply flex gap-24px;
+    @apply lt-sm:gap-36px lt-sm:overflow-x-auto lt-sm:overflow-y-hidden lt-sm:px-0 lt-sm:pb-10px;
+    @apply lt-sm:[scroll-snap-type:x_mandatory] lt-sm:[scrollbar-width:none];
+    &::-webkit-scrollbar {
+      @apply lt-sm:hidden;
+    }
+  }
+
+  .cases-card {
+    @apply group flex-1 overflow-hidden rounded-16px bg-#F6F8FD p-32px transition-all duration-300;
+    @apply lt-sm:flex-none lt-sm:w-[calc(100vw-84px)] lt-sm:min-w-[calc(100vw-84px)] lt-sm:p-32px lt-sm:rounded-16px;
+    @apply lt-sm:[scroll-snap-align:center];
+
+    &:first-child {
+      @apply lt-sm:ml-42px;
+    }
+
+    &:last-child {
+      @apply lt-sm:mr-42px;
+    }
+  }
+
+  .cases-card-img {
+    @apply w-full h-218px rounded-12px;
+    @apply lt-sm:h-320px lt-sm:rounded-12px;
+  }
+
+  .cases-card-title {
+    @apply font-s-18px font-semibold text-#091221 mt-24px;
+    @apply lt-sm:font-s-32px lt-sm:mt-32px;
+  }
+
+  .cases-card-desc {
+    @apply mt-8px font-s-14px lh-24px text-#091221/70;
+    @apply lt-sm:font-s-24px lt-sm:lh-36px lt-sm:mt-16px;
+  }
+
+  .cases-card-points {
+    @apply mt-24px flex flex-col gap-8px flex-1;
+    @apply lt-sm:mt-32px lt-sm:gap-16px;
+  }
+
+  .cases-card-point {
+    @apply flex items-center gap-8px;
+    @apply lt-sm:gap-12px;
+  }
+
+  .cases-card-point-icon {
+    @apply wh-20px mt-2px;
+    @apply lt-sm:wh-32px;
+  }
+
+  .cases-card-point-title {
+    @apply font-s-14px font-semibold text-#091221;
+    @apply lt-sm:font-s-24px;
+  }
+
+  .cases-card-point-desc {
+    @apply font-s-14px text-#091221/70;
+    @apply lt-sm:font-s-24px;
+  }
+
+  .cases-btn {
+    @apply mt-56px flex items-center justify-between gap-8px rounded-8px bg-white px-16px py-15px font-s-16px text-#0F67F8 transition-all hover:bg-#0F67F8 hover:text-white;
+    @apply lt-sm:mt-48px lt-sm:h-96px lt-sm:rounded-8px lt-sm:px-32px lt-sm:font-s-28px lt-sm:bg-#0F67F8 lt-sm:text-white;
+  }
+
+  .cases-card-btn-icon {
+    @apply wh-18px;
+    @apply lt-sm:wh-32px lt-sm:text-white;
+  }
+
+  .cases-dots {
+    @apply lt-sm:mt-40px lt-sm:flex-center lt-sm:gap-16px;
+    .dot {
+      @apply lt-sm:w-60px lt-sm:h-10px bg-#E5E9F5 rounded-full transition-all cursor-pointer;
+      &.active {
+        @apply bg-#0F67F8;
+      }
+    }
+  }
+</style>

app/pages/index/components/CtaSection.vue

@@ -0,0 +1,55 @@
+<template>
+  <section class="cta">
+    <div class="cta-title pf-sc-semibold">开启您的智慧社区转型之旅</div>
+    <div class="cta-desc pf-sc-light">
+      提交您的需求，我们的专属顾问将在24小时内为您提供定制化解决方案
+    </div>
+    <button class="cta-btn pf-sc-regular" @click="openConsultation">
+      <span class="cta-btn-text">立即咨询</span>
+      <i class="i-custom-arrow-right cta-btn-icon"></i>
+    </button>
+  </section>
+</template>
+
+<script setup lang="ts">
+  const { openConsultation } = useConsultation()
+</script>
+
+<style scoped lang="scss">
+  .cta {
+    @apply w-full h-276px py-60px flex-center flex-col;
+    @apply lt-sm:h-345px lt-sm:py-60px;
+    background-size: cover;
+    background-position: center;
+    background-image: url('@/assets/images/bg-3.png');
+    @screen lt-sm {
+      background-size: cover;
+      background-position: center;
+      background-image: url('@/assets/images/bg-3-mobile.png');
+    }
+  }
+
+  .cta-title {
+    @apply font-s-40px lh-56px text-center;
+    @apply lt-sm:font-s-40px lt-sm:lh-56px;
+  }
+
+  .cta-desc {
+    @apply font-s-18px text-#232325;
+    @apply lt-sm:font-s-18px lt-sm:mt-24px;
+  }
+
+  .cta-btn {
+    @apply h-52px mt-22px w-268px bg-#0F67F8 text-white rounded-8px px-16px flex items-center justify-between hover:opacity-80;
+    @apply lt-sm:h-84px lt-sm:w-391px lt-sm:mt-24px lt-sm:rounded-8px;
+  }
+
+  .cta-btn-text {
+    @apply font-s-16px;
+    @apply lt-sm:font-s-26px;
+  }
+
+  .cta-btn-icon {
+    @apply i-custom-arrow-right wh-18px;
+  }
+</style>

app/pages/index/components/HeroSection.vue

@@ -0,0 +1,119 @@
+<template>
+  <section class="hero">
+    <div class="hero-content">
+      <div class="hero-text">
+        <div class="hero-title">智慧社区整体解决方案</div>
+        <div class="hero-subtitle">绘家科技助力物业管理数字化转型，提升服务品质与业主满意度。</div>
+
+        <div class="hero-metrics">
+          <div class="metric">
+            <div class="metric-value">300+</div>
+            <div class="metric-label">服务客户</div>
+          </div>
+          <div class="metric">
+            <div class="metric-value">800+</div>
+            <div class="metric-label">管理小区</div>
+          </div>
+          <div class="metric">
+            <div class="metric-value">50w+</div>
+            <div class="metric-label">管理房屋</div>
+          </div>
+        </div>
+        <div class="hero-actions">
+          <button class="btn-primary hero-btn-primary">查看方案</button>
+          <button class="hero-btn-outline" @click="openConsultation">免费咨询</button>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  const { openConsultation } = useConsultation()
+</script>
+
+<style scoped lang="scss">
+  .hero {
+    @apply h-680px relative overflow-hidden;
+    @apply lt-sm:w-full lt-sm:h-auto lt-sm:aspect-[750/880];
+
+    background-size: cover;
+    background-position: center;
+    background-image: url('@/assets/images/banner.png');
+
+    @screen lt-sm {
+      @apply w-full h-auto;
+      aspect-ratio: 750/880;
+      background-image: url('@/assets/images/banner-mobile.png');
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+
+    .hero-content {
+      @extend %landing-container;
+      @apply flex items-center pb-48px pt-200px;
+      @apply lt-sm:pt-80px;
+    }
+
+    .hero-text {
+      @apply text-left w-full;
+      @apply lt-sm:text-center;
+    }
+
+    .hero-metrics {
+      @apply mt-35px flex items-center gap-48px;
+      @apply lt-sm:justify-center lt-sm:mt-20px lt-sm:gap-76px;
+    }
+
+    .hero-title {
+      @apply font-s-48px font-semibold text-#000000;
+      @apply lt-sm:font-s-58px;
+    }
+
+    .hero-subtitle {
+      @apply font-s-18px text-#091221/70;
+      @apply lt-sm:mt-12px lt-sm:font-s-26px lt-sm:px-25px;
+      @apply lt-xs:px-0;
+    }
+
+    .hero-actions {
+      @apply mt-35px flex items-center gap-16px;
+      @apply lt-sm:justify-center lt-sm:absolute lt-sm:bottom-80px lt-sm:left-1/2 lt-sm:-translate-x-1/2;
+    }
+
+    .hero-btn-primary {
+      @apply w-127px h-56px rounded-8px text-white font-s-18px pf-sc-semibold;
+      @apply lt-sm:w-168px lt-sm:h-71px lt-sm:font-s-24px lt-sm:rounded-8px;
+    }
+
+    .hero-btn-outline {
+      @apply w-127px h-56px bg-white border-#0F67F8 border-1 rounded-8px hover:opacity-80 font-s-18px font-semibold text-#0F67F8;
+      @apply lt-sm:w-168px lt-sm:h-71px lt-sm:font-s-24px lt-sm:rounded-8px;
+    }
+
+    .metric {
+      @apply flex items-start flex-col;
+      @apply lt-sm:items-center;
+
+      .metric-value {
+        @apply font-s-32px font-semibold text-#0F67F8;
+        @apply lt-sm:font-s-52px;
+      }
+
+      .metric-label {
+        @apply font-s-14px text-#384146;
+        @apply lt-sm:font-s-24px;
+      }
+    }
+  }
+
+  .btn-primary {
+    @apply bg-gradient-to-r from-[#779EFF] to-[#0A50FF];
+    border: none;
+    outline: none;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+</style>

app/pages/index/components/HistorySection.vue

@@ -0,0 +1,484 @@
+<template>
+  <section id="history" ref="timelineRef" class="history">
+    <div
+      class="history-container"
+      :class="[isTimelineVisible ? 'translate-y-0 opacity-100' : 'translate-y-40px opacity-0']"
+    >
+      <div class="history-title pf-sc-semibold">发展历程</div>
+      <div class="history-subtitle pf-sc-regular">从探索到引领，绘家科技每一步都坚实有力</div>
+
+      <div class="history-top">
+        <div class="history-year-wrapper">
+          <Transition name="year-flow">
+            <div :key="currentYearData?.year" class="history-year-content">
+              <span class="history-year-text pf-sc-bold">
+                {{ currentYearData?.year }}
+              </span>
+            </div>
+          </Transition>
+        </div>
+
+        <div class="history-event-wrapper">
+          <Transition name="event-fade" mode="out-in">
+            <div
+              :key="currentYearData?.year + '-' + currentEventIndex"
+              class="history-event-content"
+            >
+              <div class="history-event-header">
+                <span class="history-event-month pf-sc-semibold">
+                  {{ currentEventData?.month }}
+                </span>
+                <div
+                  v-if="(currentYearData?.events?.length ?? 0) > 1"
+                  class="history-event-controls"
+                >
+                  <i
+                    class="i-custom-arrow-circle-left history-event-arrow"
+                    :class="[
+                      currentEventIndex === 0
+                        ? 'opacity-30 cursor-not-allowed'
+                        : 'cursor-pointer hover:i-custom-arrow-circle-left-active hover:scale-110 active:scale-95',
+                    ]"
+                    @click="prevEvent"
+                  ></i>
+                  <i
+                    class="i-custom-arrow-circle-right history-event-arrow"
+                    :class="[
+                      currentEventIndex === (currentYearData?.events?.length ?? 0) - 1
+                        ? 'opacity-30 cursor-not-allowed'
+                        : 'cursor-pointer hover:i-custom-arrow-circle-right-active hover:scale-110 active:scale-95',
+                    ]"
+                    @click="nextEvent"
+                  ></i>
+                </div>
+              </div>
+              <div class="history-event-line"></div>
+              <div class="history-event-desc pf-sc-regular">
+                {{ currentEventData?.content }}
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </div>
+
+      <div class="history-timeline lt-sm:hidden">
+        <div class="history-timeline-track">
+          <div class="history-timeline-progress" :style="progressStyle"></div>
+
+          <div class="history-timeline-nodes">
+            <div
+              v-for="(item, index) in historyYears"
+              :key="item.year"
+              class="history-timeline-node"
+              :style="getTimelineNodePositionStyle(index)"
+              @click="selectYear(index)"
+            >
+              <div
+                class="history-timeline-dot"
+                :class="getTimelineDotClasses(index)"
+                :style="getTimelineDotStyle(index)"
+              ></div>
+              <span class="history-timeline-year" :class="getTimelineYearTextClasses(index)">
+                {{ item.year }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="history-timeline-mobile lt-sm:flex hidden">
+        <i
+          class="i-custom-button-previous-mobile history-mobile-btn"
+          :class="[
+            currentYearIndex === 0
+              ? 'cursor-not-allowed i-custom-button-previous-mobile-disabled'
+              : 'active:i-custom-button-previous-mobile-active',
+          ]"
+          @click="prevYear"
+        ></i>
+
+        <div class="history-mobile-track-container">
+          <div class="history-mobile-track-line"></div>
+          <div class="history-mobile-nodes">
+            <div
+              v-for="(yearIndex, i) in mobileTimelineIndices"
+              :key="i"
+              class="history-mobile-node"
+              :class="{ invisible: yearIndex < 0 || yearIndex >= historyYears.length }"
+              @click="yearIndex >= 0 && yearIndex < historyYears.length && selectYear(yearIndex)"
+            >
+              <div
+                class="history-mobile-dot"
+                :class="{ active: yearIndex === currentYearIndex }"
+              ></div>
+              <div class="history-mobile-year" :class="{ active: yearIndex === currentYearIndex }">
+                {{ historyYears[yearIndex]?.year }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <i
+          class="i-custom-button-next-mobile history-mobile-btn"
+          :class="[
+            currentYearIndex === historyYears.length - 1
+              ? 'cursor-not-allowed i-custom-button-next-mobile-disabled'
+              : 'active:i-custom-button-next-mobile-active',
+          ]"
+          @click="nextYear"
+        ></i>
+      </div>
+
+      <div class="history-nav">
+        <i
+          class="i-custom-button-previous history-nav-btn"
+          :class="{
+            'opacity-30 cursor-not-allowed hover:i-custom-button-previous!': currentYearIndex === 0,
+          }"
+          @click="prevYear"
+        ></i>
+        <i
+          class="i-custom-button-next history-nav-btn"
+          :class="{
+            'opacity-30 cursor-not-allowed hover:i-custom-button-next!':
+              currentYearIndex === historyYears.length - 1,
+          }"
+          @click="nextYear"
+        ></i>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { historyYears } from '@/constants/common'
+
+  const timelineRef = ref<HTMLElement | null>(null)
+  const isTimelineVisible = ref(false)
+
+  const currentYearIndex = ref(historyYears.length - 1)
+  const currentEventIndex = ref(0)
+
+  const currentYearData = computed(() => {
+    const data = historyYears[currentYearIndex.value]
+    return data || historyYears[0]
+  })
+  const currentEventData = computed(() => {
+    const events = currentYearData.value?.events || []
+    return events[currentEventIndex.value] || events[0]
+  })
+
+  const mobileTimelineIndices = computed(() => {
+    const total = historyYears.length
+    if (total <= 0) return []
+    const prev = currentYearIndex.value - 1
+    const curr = currentYearIndex.value
+    const next = currentYearIndex.value + 1
+    return [prev, curr, next]
+  })
+
+  const progressStyle = computed(() => {
+    const totalSteps = Math.max(historyYears.length - 1, 1)
+    if (currentYearIndex.value === totalSteps) {
+      return {
+        width: '100%',
+      }
+    }
+    const percentage = currentYearIndex.value / totalSteps
+    return {
+      width: `calc(60px + ${percentage} * (100% - 120px))`,
+    }
+  })
+
+  const nextYear = () => {
+    if (currentYearIndex.value < historyYears.length - 1) {
+      currentYearIndex.value++
+      currentEventIndex.value = 0
+    }
+  }
+
+  const prevYear = () => {
+    if (currentYearIndex.value > 0) {
+      currentYearIndex.value--
+      currentEventIndex.value = 0
+    }
+  }
+
+  const nextEvent = () => {
+    const events = currentYearData.value?.events || []
+    if (currentEventIndex.value < events.length - 1) {
+      currentEventIndex.value++
+    }
+  }
+
+  const prevEvent = () => {
+    if (currentEventIndex.value > 0) {
+      currentEventIndex.value--
+    }
+  }
+
+  const selectYear = (index: number) => {
+    currentYearIndex.value = index
+    currentEventIndex.value = 0
+  }
+
+  const getTimelineNodePositionStyle = (index: number) => {
+    return { left: `${(index / (historyYears.length - 1)) * 100}%` }
+  }
+
+  const getTimelineDotClasses = (index: number) => {
+    return [
+      index < currentYearIndex.value
+        ? 'wh-13px'
+        : 'wh-16px border-#0F67F8 group-hover:border-[#2563EB]  border-1',
+      index === currentYearIndex.value
+        ? 'wh-16px scale-150 outline-6px outline-#CEE0FF outline-solid border-none'
+        : '',
+    ]
+  }
+
+  const getTimelineDotStyle = (index: number) => {
+    if (index === currentYearIndex.value) {
+      return { background: 'linear-gradient(90deg, #779EFF 0%, #0A50FF 100%)' }
+    }
+    if (index < currentYearIndex.value) {
+      return { background: '#FFFFFF' }
+    }
+    return {}
+  }
+
+  const getTimelineYearTextClasses = (index: number) => {
+    return [
+      index === currentYearIndex.value
+        ? 'text-#2563EB font-bold pf-sc-bold scale-110'
+        : 'text-#94A3B8 group-hover:text-[#64748B]',
+    ]
+  }
+
+  onMounted(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) return
+          isTimelineVisible.value = true
+          observer.unobserve(entry.target)
+        })
+      },
+      { threshold: 0.1 }
+    )
+
+    if (timelineRef.value) {
+      observer.observe(timelineRef.value)
+    }
+  })
+</script>
+
+<style scoped lang="scss">
+  .history {
+    @apply overflow-hidden relative py-60px;
+    @apply lt-sm:pt-60px lt-sm:pb-160px lt-sm:px-32px;
+    @extend %landing-container;
+    background-size: cover;
+    background-position: center;
+    background-image: url('@/assets/images/history-bg.png');
+  }
+
+  .history-container {
+    @apply flex flex-col items-center transition-all duration-1000;
+  }
+
+  .history-title {
+    @apply font-semibold font-s-36px text-#000000 lh-60px text-center mb-4px;
+    @apply lt-sm:font-s-48px lt-sm:lh-60px;
+  }
+
+  .history-subtitle {
+    @apply font-s-16px text-#091221/70 text-center lh-30px mb-50px;
+    @apply lt-sm:font-s-24px lt-sm:lh-40px lt-sm:mb-88px;
+  }
+
+  .history-top {
+    @apply w-full h-255px flex py-50px items-center;
+    @apply lt-sm:h-176px;
+  }
+
+  .history-year-wrapper {
+    @apply relative pl-127px w-600px shrink-0 h-170px overflow-hidden;
+    @apply lt-sm:hidden;
+  }
+
+  .history-year-content {
+    @apply absolute left-127px top-0 h-full flex items-center w-full;
+  }
+
+  .history-year-text {
+    @apply text-170px font-bold text-#0F67F8 select-none leading-none;
+    -webkit-text-stroke: 1px #2563eb;
+    text-shadow: 0 0 20px rgba(37, 99, 235, 0.1);
+  }
+
+  .history-event-wrapper {
+    @apply flex-1 h-full relative overflow-hidden pt-14px;
+    @apply lt-sm:h-176px lt-sm:pt-0;
+  }
+
+  .history-event-content {
+    @apply absolute left-0 top-14px w-full flex flex-col pr-114px;
+    @apply lt-sm:pr-0 static;
+  }
+
+  .history-event-header {
+    @apply flex justify-between items-center w-full;
+    @apply lt-sm:h-45px;
+  }
+
+  .history-event-month {
+    @apply font-s-22px font-semibold lh-30.8px text-#091221 flex-1;
+    @apply lt-sm:font-s-32px lt-sm:lh-30.8px;
+  }
+
+  .history-event-controls {
+    @apply flex gap-12px relative z-10;
+    @apply lt-sm:gap-16px;
+  }
+
+  .history-event-arrow {
+    @apply wh-32px transition-all;
+    @apply lt-sm:wh-45px;
+  }
+
+  .history-event-line {
+    @apply h-2px w-34px bg-#0F67F8 mt-11px origin-left;
+    @apply lt-sm:h-4px lt-sm:w-68px lt-sm:mt-25px;
+  }
+
+  .history-event-desc {
+    @apply w-full font-s-20px lh-35px text-#091221/70 mt-26px;
+    @apply lt-sm:font-s-24px lt-sm:mt-26px lt-sm:lh-normal;
+  }
+
+  .history-timeline {
+    @apply w-full relative pt-47px pb-60px;
+    @apply lt-sm:py-0 lt-sm:mt-70px;
+  }
+
+  .history-timeline-track {
+    @apply relative h-16px w-full bg-white rounded-full px-60px;
+    @apply lt-sm:h-16px lt-sm:px-60px;
+  }
+
+  .history-timeline-progress {
+    @apply absolute left-0 top-0 h-full bg-gradient-to-r from-[#60A5FA] to-[#2563EB] rounded-full transition-all duration-500 ease-out z-1;
+  }
+
+  .history-timeline-nodes {
+    @apply relative h-full w-full;
+  }
+
+  .history-timeline-node {
+    @apply absolute top-1/2 -translate-y-1/2 -translate-x-1/2 flex flex-col items-center cursor-pointer group z-2;
+  }
+
+  .history-timeline-dot {
+    @apply rounded-full transition-all duration-300 relative bg-white;
+    @apply lt-sm:wh-14px;
+  }
+
+  .history-timeline-year {
+    @apply absolute top-24px text-16px transition-all duration-300 whitespace-nowrap;
+  }
+
+  .history-nav {
+    @apply flex gap-24px mt-45px;
+    @apply lt-sm:hidden;
+  }
+
+  .history-nav-btn {
+    @apply wh-56px flex-center cursor-pointer;
+  }
+
+  .year-flow-enter-active,
+  .year-flow-leave-active {
+    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .year-flow-enter-from {
+    opacity: 0;
+    transform: translateY(100%) scale(0.9);
+  }
+
+  .year-flow-leave-to {
+    opacity: 0;
+    transform: translateY(-100%) scale(0.9);
+  }
+
+  .event-fade-enter-active,
+  .event-fade-leave-active {
+    transition: opacity 0.3s ease;
+  }
+
+  .event-fade-enter-from,
+  .event-fade-leave-to {
+    opacity: 0;
+  }
+
+  .history-timeline-mobile {
+    @apply flex items-center justify-between w-full px-0;
+    @apply lt-sm:mt-70px;
+  }
+
+  .history-mobile-btn {
+    @apply shrink-0 cursor-pointer transition-all absolute;
+    @apply lt-sm:wh-64px z-10;
+    &.i-custom-button-previous-mobile {
+      @apply left-0;
+    }
+    &.i-custom-button-next-mobile {
+      @apply right-0;
+    }
+  }
+
+  .history-mobile-track-container {
+    @apply relative flex-1;
+  }
+
+  .history-mobile-track-line {
+    @apply absolute left-0 right-0 bg-white rounded-full;
+    @apply lt-sm:h-16px lt-sm:top-1/2 lt-sm:translate-y--1/2;
+  }
+
+  .history-mobile-nodes {
+    @apply hidden relative w-full h-full justify-between items-center z-1;
+    @apply lt-sm:px-100px lt-sm:h-16px lt-sm:flex;
+  }
+
+  .history-mobile-node {
+    @apply relative flex flex-col items-center cursor-pointer;
+    @apply lt-sm:w-60px;
+    &.invisible {
+      @apply transition-none;
+      .history-mobile-dot,
+      .history-mobile-year {
+        @apply transition-none;
+      }
+    }
+  }
+
+  .history-mobile-dot {
+    @apply rounded-full bg-white transition-all z-2 border-#0F67F8 border-1;
+    @apply lt-sm:wh-18px;
+
+    &.active {
+      @apply scale-150 outline-#CEE0FF outline-solid border-none bg-[linear-gradient(90deg,#779EFF_0%,#0A50FF_100%)];
+      @apply lt-sm:wh-22px lt-sm:outline-8px;
+    }
+  }
+
+  .history-mobile-year {
+    @apply hidden absolute text-#091221/60 pf-sc-regular transition-all whitespace-nowrap;
+    @apply lt-sm:font-s-22px lt-sm:top-58px lt-sm:block;
+    &.active {
+      @apply text-#0F67F8 font-semibold scale-110;
+    }
+  }
+</style>

app/pages/index/components/PartnershipSection.vue

@@ -0,0 +1,110 @@
+<template>
+  <section
+    id="partnership"
+    ref="partnershipRef"
+    class="partnership transition-all duration-1000 ease-out"
+    :class="[isPartnershipVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
+  >
+    <div class="partnership-header">
+      <div class="partnership-line-left"></div>
+      <div class="partnership-title pf-sc-regular">与合作伙伴携手，深入产业共创价值</div>
+      <div class="partnership-line-right"></div>
+    </div>
+
+    <div class="partnership-content">
+      <InspiraMarquee class="partnership-marquee-row1">
+        <div v-for="partner in partnersRow1" :key="partner" class="partner-item">
+          <img :src="partner" alt="" class="wh-full object-contain" />
+        </div>
+      </InspiraMarquee>
+      <InspiraMarquee reverse class="partnership-marquee-row2">
+        <div v-for="partner in partnersRow2" :key="partner" class="partner-item">
+          <img :src="partner" alt="" class="wh-full object-contain" />
+        </div>
+      </InspiraMarquee>
+      <div class="partnership-mask-left"></div>
+      <div class="partnership-mask-right"></div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { partnersRow1, partnersRow2 } from '@/constants/common'
+
+  const partnershipRef = ref<HTMLElement | null>(null)
+  const isPartnershipVisible = ref(false)
+
+  onMounted(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) return
+          isPartnershipVisible.value = true
+          observer.unobserve(entry.target)
+        })
+      },
+      { threshold: 0.1 }
+    )
+
+    if (partnershipRef.value) {
+      observer.observe(partnershipRef.value)
+    }
+  })
+</script>
+
+<style scoped lang="scss">
+  .partnership {
+    @extend %landing-container;
+    @media screen and (min-width: 1920px) {
+      padding-left: 220px;
+      padding-right: 220px;
+    }
+    @apply py-60px overflow-hidden;
+    @apply lt-sm:py-60px lt-sm:px-0;
+  }
+
+  .partnership-header {
+    @apply flex-center gap-32px mb-40px;
+    @apply lt-sm:mb-40px lt-sm:gap-30px;
+  }
+
+  .partnership-line-left {
+    @apply h-2px w-320px bg-[linear-gradient(90deg,transparent_0%,#E5E9F5_100%)];
+    @apply lt-sm:w-85px;
+  }
+
+  .partnership-title {
+    @apply text-center font-s-18px lh-21px text-#9CA0A7 whitespace-nowrap;
+    @apply lt-sm:font-s-28px;
+  }
+
+  .partnership-line-right {
+    @apply h-2px w-320px bg-[linear-gradient(90deg,#E5E9F5_0%,transparent_100%)];
+    @apply lt-sm:w-85px;
+  }
+
+  .partnership-content {
+    @apply relative flex flex-col gap-0px -mt-24px;
+  }
+
+  .partnership-marquee-row1 {
+    @apply [--duration:80s] [--gap:24px] mb--31px;
+  }
+
+  .partnership-marquee-row2 {
+    @apply [--duration:80s] [--delay:-20s] [--gap:24px];
+  }
+
+  .partnership-mask-left {
+    @apply pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-[linear-gradient(to_right,#fff,transparent)];
+  }
+
+  .partnership-mask-right {
+    @apply pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-[linear-gradient(to_left,#fff,transparent)];
+  }
+
+  .partner-item {
+    @apply flex-center h-80px w-200px bg-white rounded-8px shadow-[0_2px_8px_2px_rgba(0,0,0,0.06)] px-24px;
+    @apply lt-sm:h-105px lt-sm:w-290px;
+  }
+</style>

app/pages/index/components/SolutionSection.vue

@@ -0,0 +1,376 @@
+<template>
+  <section
+    id="solution"
+    ref="solutionRef"
+    class="solution transition-all duration-1000 ease-out"
+    :class="[isSolutionVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
+  >
+    <div class="solution-header">
+      <div class="solution-title">物业管理正面临这些挑战</div>
+      <div class="solution-desc">
+        传统物业管理模式效率低下、成本高昂、服务体验差，急需数字化转型
+      </div>
+    </div>
+
+    <div ref="solutionListRef" class="solution-list" @scroll="handleSolutionScroll">
+      <div
+        v-for="(solution, index) in solutions"
+        :key="solution.id"
+        class="solution-card"
+        :class="[
+          index === activeIndex
+            ? 'active bg-[linear-gradient(0deg,#E5E9F5_0%,#EFF2FB_100%)]'
+            : 'bg-[linear-gradient(180deg,#E8F6FD_50.48%,#A5D7FD_100%)] lt-sm:bg-[linear-gradient(0deg,#E5E9F5_0%,#EFF2FB_100%)]',
+        ]"
+        @mouseenter="activeIndex = index"
+        @click="scrollToSolution(index)"
+      >
+        <div
+          class="solution-card-hover"
+          :class="[
+            index === activeIndex
+              ? 'opacity-100 translate-y-0 duration-500'
+              : 'opacity-0 translate-y-20px pointer-events-none duration-300 mobile-show',
+          ]"
+        >
+          <div
+            class="solution-card-title pf-sc-semibold text-overflow"
+            :class="[
+              index === activeIndex
+                ? 'opacity-100 translate-y-0 delay-100 duration-500'
+                : 'opacity-0 translate-y-20px delay-0 duration-200',
+            ]"
+          >
+            <span class="lt-sm:hidden">{{ solution.hoverTitle }}</span>
+            <span>{{ solution.title }}解决方案</span>
+          </div>
+          <div
+            class="solution-card-desc pf-sc-regular"
+            :class="[
+              index === activeIndex
+                ? 'opacity-100 translate-y-0 delay-150 duration-500'
+                : 'opacity-0 translate-y-20px delay-0 duration-200',
+            ]"
+          >
+            <span>{{ solution.hoverDesc }}</span>
+          </div>
+          <div
+            class="solution-card-items"
+            :class="[
+              index === activeIndex
+                ? 'opacity-100 translate-y-0 delay-400 duration-700'
+                : 'opacity-0 translate-y-20px delay-0 duration-300',
+            ]"
+          >
+            <div v-for="item in solution.hoverItems" :key="item.title" class="solution-card-item">
+              <div class="solution-card-item-header">
+                <i class="i-custom-check-one solution-card-item-icon"></i>
+                <div class="solution-card-item-content">
+                  <span class="text-#091221 pf-sc-semibold">
+                    {{ item.title }}
+                  </span>
+                  <span class="text-#091221/70 pf-sc-regular line-clamp-1">
+                    {{ item.itemDesc }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <button
+            class="solution-card-btn pf-sc-regular"
+            :class="[
+              index === activeIndex
+                ? 'opacity-100 translate-y-0 delay-500 duration-700'
+                : 'opacity-0 translate-y-20px delay-0 duration-200',
+            ]"
+            @click="openConsultation"
+          >
+            <span class="font-s-16px lt-sm:font-s-26px">立即咨询</span>
+            <i class="i-custom-arrow-right wh-18px lt-sm:wh-28px"></i>
+          </button>
+          <img
+            :src="solution.hoverImg"
+            alt=""
+            class="solution-card-img"
+            :class="[
+              index === activeIndex
+                ? 'opacity-100 scale-100 delay-200 duration-500'
+                : 'opacity-0 scale-50 delay-0 duration-300',
+            ]"
+          />
+        </div>
+
+        <div
+          class="solution-card-normal"
+          :class="[
+            index === activeIndex
+              ? 'opacity-0 pointer-events-none duration-300'
+              : 'opacity-100 duration-500',
+          ]"
+        >
+          <div
+            class="solution-card-icon-wrapper"
+            :class="[
+              index === activeIndex
+                ? 'scale-150 opacity-0 delay-0 duration-300'
+                : 'scale-100 opacity-100 delay-0 duration-500',
+            ]"
+          >
+            <img :src="solution.img" alt="" class="wh-35px" />
+          </div>
+
+          <div
+            class="solution-card-normal-title pf-sc-semibold"
+            :class="[
+              index === activeIndex
+                ? 'opacity-0 translate-y-10px delay-0 duration-200'
+                : 'opacity-100 translate-y-0 delay-100 duration-500',
+            ]"
+          >
+            {{ solution.title }}
+          </div>
+          <div
+            class="solution-card-normal-desc pf-sc-regular"
+            :class="[
+              index === activeIndex
+                ? 'opacity-0 translate-y-10px delay-0 duration-200'
+                : 'opacity-100 translate-y-0 delay-150 duration-500',
+            ]"
+          >
+            {{ solution.desc }}
+          </div>
+          <i
+            class="i-custom-circle-right-up solution-card-normal-arrow"
+            :class="[
+              index === activeIndex
+                ? 'opacity-0 scale-50 delay-0 duration-200'
+                : 'opacity-100 scale-100 delay-100 duration-500',
+            ]"
+          ></i>
+        </div>
+      </div>
+    </div>
+
+    <div class="solution-dots lt-sm:flex hidden">
+      <div
+        v-for="(_, index) in solutions"
+        :key="index"
+        class="dot"
+        :class="{ active: index === activeIndex }"
+        @click="scrollToSolution(index)"
+      ></div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { solutions } from '@/constants/common'
+
+  const { openConsultation } = useConsultation()
+
+  const activeIndex = ref(0)
+  const solutionListRef = ref<HTMLElement | null>(null)
+  const solutionRef = ref<HTMLElement | null>(null)
+  const isSolutionVisible = ref(false)
+
+  const handleSolutionScroll = (e: Event) => {
+    const el = e.target as HTMLElement
+    const scrollLeft = el.scrollLeft
+    const width = el.offsetWidth
+    const cardWidth = width * 0.85
+    const gap = 16
+    const newIndex = Math.round(scrollLeft / (cardWidth + gap))
+    if (newIndex !== activeIndex.value) {
+      activeIndex.value = newIndex
+    }
+  }
+
+  const scrollToSolution = (index: number) => {
+    if (window.innerWidth >= 640) return
+    if (!solutionListRef.value) return
+
+    activeIndex.value = index
+
+    const width = solutionListRef.value.offsetWidth
+    const cardWidth = width * 0.85
+    const gap = 16
+    solutionListRef.value.scrollTo({
+      left: index * (cardWidth + gap),
+      behavior: 'smooth',
+    })
+  }
+
+  onMounted(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) return
+          isSolutionVisible.value = true
+          observer.unobserve(entry.target)
+        })
+      },
+      { threshold: 0.1 }
+    )
+
+    if (solutionRef.value) {
+      observer.observe(solutionRef.value)
+    }
+  })
+</script>
+
+<style scoped lang="scss">
+  .solution {
+    @extend %landing-container;
+    @apply py-120px lt-sm:py-120px lt-sm:px-0;
+  }
+
+  .solution-header {
+    @apply text-center mb-45px;
+  }
+
+  .solution-title {
+    @apply font-s-36px font-semibold text-#000000 mb-4px lh-60px;
+    @apply lt-sm:font-s-48px lt-sm:lh-60px;
+  }
+
+  .solution-desc {
+    @apply font-s-16px text-#091221/70 lh-30px;
+    @apply lt-sm:font-s-24px lt-sm:px-110px lt-sm:mt-16px lt-sm:lh-40px;
+  }
+
+  .solution-list {
+    @apply flex h-365px w-full gap-24px;
+    @apply lt-sm:h-auto lt-sm:gap-16px lt-sm:overflow-x-auto lt-sm:overflow-y-hidden lt-sm:px-24px;
+    @apply lt-sm:[scroll-snap-type:x_mandatory] lt-sm:[scrollbar-width:none];
+    &::-webkit-scrollbar {
+      @apply lt-sm:hidden;
+    }
+  }
+
+  .solution-card {
+    position: relative;
+    display: flex;
+    height: 100%;
+    cursor: pointer;
+    overflow: hidden;
+    border-radius: 24px;
+    will-change: transform, opacity;
+    transition:
+      transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
+      opacity 600ms ease,
+      flex 600ms ease-in-out,
+      background-color 600ms ease-in-out;
+
+    @media (min-width: 768px) {
+      &.active {
+        flex: 1 1 0%;
+      }
+      &:not(.active) {
+        flex: 0 0 220px;
+      }
+    }
+
+    @apply lt-sm:flex-[0_0_90%] lt-sm:min-h-750px lt-sm:w-630px;
+    @apply lt-sm:[scroll-snap-align:center];
+
+    &:not(.active) {
+      @apply lt-sm:scale-96 lt-sm:opacity-50;
+    }
+
+    &.active {
+      @apply lt-sm:scale-100 lt-sm:opacity-100;
+    }
+
+    &:first-child {
+      @apply lt-sm:ml-36px;
+    }
+
+    &:last-child {
+      @apply lt-sm:mr-36px;
+    }
+  }
+
+  .solution-card-hover {
+    @apply h-full w-full pt-40px px-48px absolute left-0 top-0 transition-all ease-in-out;
+    @apply lt-sm:relative lt-sm:pt-40px lt-sm:px-36px lt-sm:pb-32px lt-sm:opacity-100 lt-sm:translate-y-0 lt-sm:pointer-events-auto;
+
+    &.mobile-show {
+      @apply lt-sm:opacity-100 lt-sm:translate-y-0 lt-sm:pointer-events-auto;
+    }
+  }
+
+  .solution-card-title {
+    @apply font-s-22px text-#000000 transition-all;
+    @apply lt-sm:font-s-32px;
+  }
+
+  .solution-card-desc {
+    @apply font-s-14px lh-24px mt-8px text-#091221/70 pf-sc-regular text-overflow transition-all;
+    @apply lt-sm:font-s-24px lt-sm:mt-8px lt-sm:lh-normal;
+  }
+
+  .solution-card-items {
+    @apply mt-24px flex flex-col gap-8px transition-all;
+    @apply lt-sm:mt-48px;
+  }
+
+  .solution-card-item {
+    @apply flex flex-col;
+  }
+
+  .solution-card-item-header {
+    @apply flex gap-8px items-center font-s-14px;
+    @apply lt-sm:font-s-24px lt-sm:gap-12px;
+  }
+
+  .solution-card-item-icon {
+    @apply wh-18px;
+    @apply lt-sm:wh-32px;
+  }
+
+  .solution-card-item-content {
+    @apply flex items-center gap-8px;
+    @apply lt-sm:flex-col lt-sm:items-start lt-sm:gap-8px;
+  }
+
+  .solution-card-btn {
+    @apply mt-56px h-48px w-268px bg-#0F67F8 text-white pf-sc-regular rounded-8px px-16px flex items-center justify-between hover:opacity-80 transition-all;
+    @apply lt-sm:w-270px lt-sm:h-95px lt-sm:rounded-16px lt-sm:mt-102px;
+  }
+
+  .solution-card-img {
+    @apply wh-280px absolute bottom--37px right-0 transition-all duration-300 ease-in-out;
+    @apply lt-sm:wh-264px lt-sm:bottom--26px;
+  }
+
+  .solution-card-normal {
+    @apply h-full w-220px pt-40px px-24px absolute left-0 top-0 transition-all ease-in-out;
+    @apply lt-sm:hidden;
+  }
+
+  .solution-card-icon-wrapper {
+    @apply wh-40px ml-2px bg-white rounded-10px flex-center transition-all ease-in-out;
+  }
+
+  .solution-card-normal-title {
+    @apply mt-18px font-s-18px text-#091221 pf-sc-semibold transition-all;
+  }
+
+  .solution-card-normal-desc {
+    @apply mt-8px font-s-14px lh-24px text-#091221/60 pf-sc-regular w-172px transition-all;
+  }
+
+  .solution-card-normal-arrow {
+    @apply wh-48px absolute bottom-24px left-24px transition-all;
+  }
+
+  .solution-dots {
+    @apply lt-sm:mt-40px flex-center lt-sm:gap-16px;
+    .dot {
+      @apply lt-sm:w-60px lt-sm:h-10px bg-#E5E9F5 rounded-full transition-all cursor-pointer;
+      &.active {
+        @apply bg-#0F67F8;
+      }
+    }
+  }
+</style>

app/pages/index/index.vue

@@ -1,1543 +1,35 @@
 <!--
  * @Author: LiZhiWei
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-20 10:29:56
+ * @LastEditTime: 2026-01-20 11:18:49
  * @Description: 
 -->
 <template>
   <div class="landing">
-    <section class="hero">
-      <div class="hero-content">
-        <div class="hero-text">
-          <div class="hero-title">智慧社区整体解决方案</div>
-          <div class="hero-subtitle">
-            绘家科技助力物业管理数字化转型，提升服务品质与业主满意度。
-          </div>
-
-          <div class="hero-metrics">
-            <div class="metric">
-              <div class="metric-value">300+</div>
-              <div class="metric-label">服务客户</div>
-            </div>
-            <div class="metric">
-              <div class="metric-value">800+</div>
-              <div class="metric-label">管理小区</div>
-            </div>
-            <div class="metric">
-              <div class="metric-value">50w+</div>
-              <div class="metric-label">管理房屋</div>
-            </div>
-          </div>
-          <div class="hero-actions">
-            <button class="btn-primary hero-btn-primary">查看方案</button>
-            <button class="hero-btn-outline" @click="openConsultation">免费咨询</button>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <section
-      id="solution"
-      ref="solutionRef"
-      class="solution transition-all duration-1000 ease-out"
-      :class="[isSolutionVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
-    >
-      <div class="solution-header">
-        <div class="solution-title">物业管理正面临这些挑战</div>
-        <div class="solution-desc">
-          传统物业管理模式效率低下、成本高昂、服务体验差，急需数字化转型
-        </div>
-      </div>
-
-      <div ref="solutionListRef" class="solution-list" @scroll="handleSolutionScroll">
-        <div
-          v-for="(solution, index) in solutions"
-          :key="solution.id"
-          class="solution-card"
-          :class="[
-            index === activeIndex
-              ? 'active bg-[linear-gradient(0deg,#E5E9F5_0%,#EFF2FB_100%)]'
-              : 'bg-[linear-gradient(180deg,#E8F6FD_50.48%,#A5D7FD_100%)] lt-sm:bg-[linear-gradient(0deg,#E5E9F5_0%,#EFF2FB_100%)]',
-          ]"
-          @mouseenter="activeIndex = index"
-          @click="scrollToSolution(index)"
-        >
-          <!-- Hover State Content -->
-          <div
-            class="solution-card-hover"
-            :class="[
-              index === activeIndex
-                ? 'opacity-100 translate-y-0 duration-500'
-                : 'opacity-0 translate-y-20px pointer-events-none duration-300 mobile-show',
-            ]"
-          >
-            <div
-              class="solution-card-title pf-sc-semibold text-overflow"
-              :class="[
-                index === activeIndex
-                  ? 'opacity-100 translate-y-0 delay-100 duration-500'
-                  : 'opacity-0 translate-y-20px delay-0 duration-200',
-              ]"
-            >
-              <span class="lt-sm:hidden">{{ solution.hoverTitle }}</span>
-              <span>{{ solution.title }}解决方案</span>
-            </div>
-            <div
-              class="solution-card-desc pf-sc-regular"
-              :class="[
-                index === activeIndex
-                  ? 'opacity-100 translate-y-0 delay-150 duration-500'
-                  : 'opacity-0 translate-y-20px delay-0 duration-200',
-              ]"
-            >
-              <span>{{ solution.hoverDesc }}</span>
-            </div>
-            <div
-              class="solution-card-items"
-              :class="[
-                index === activeIndex
-                  ? 'opacity-100 translate-y-0 delay-400 duration-700'
-                  : 'opacity-0 translate-y-20px delay-0 duration-300',
-              ]"
-            >
-              <div v-for="item in solution.hoverItems" :key="item.title" class="solution-card-item">
-                <div class="solution-card-item-header">
-                  <i class="i-custom-check-one solution-card-item-icon"></i>
-                  <div class="solution-card-item-content">
-                    <span class="text-#091221 pf-sc-semibold">
-                      {{ item.title }}
-                    </span>
-                    <span class="text-#091221/70 pf-sc-regular line-clamp-1">
-                      {{ item.itemDesc }}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <button
-              class="solution-card-btn pf-sc-regular"
-              :class="[
-                index === activeIndex
-                  ? 'opacity-100 translate-y-0 delay-500 duration-700'
-                  : 'opacity-0 translate-y-20px delay-0 duration-200',
-              ]"
-              @click="openConsultation"
-            >
-              <span class="font-s-16px lt-sm:font-s-26px">立即咨询</span>
-              <i class="i-custom-arrow-right wh-18px lt-sm:wh-28px"></i>
-            </button>
-            <img
-              :src="solution.hoverImg"
-              alt=""
-              class="solution-card-img"
-              :class="[
-                index === activeIndex
-                  ? 'opacity-100 scale-100 delay-200 duration-500'
-                  : 'opacity-0 scale-50 delay-0 duration-300',
-              ]"
-            />
-          </div>
-
-          <!-- Normal State Content -->
-          <div
-            class="solution-card-normal"
-            :class="[
-              index === activeIndex
-                ? 'opacity-0 pointer-events-none duration-300'
-                : 'opacity-100 duration-500',
-            ]"
-          >
-            <div
-              class="solution-card-icon-wrapper"
-              :class="[
-                index === activeIndex
-                  ? 'scale-150 opacity-0 delay-0 duration-300'
-                  : 'scale-100 opacity-100 delay-0 duration-500',
-              ]"
-            >
-              <img :src="solution.img" alt="" class="wh-35px" />
-            </div>
-
-            <div
-              class="solution-card-normal-title pf-sc-semibold"
-              :class="[
-                index === activeIndex
-                  ? 'opacity-0 translate-y-10px delay-0 duration-200'
-                  : 'opacity-100 translate-y-0 delay-100 duration-500',
-              ]"
-            >
-              {{ solution.title }}
-            </div>
-            <div
-              class="solution-card-normal-desc pf-sc-regular"
-              :class="[
-                index === activeIndex
-                  ? 'opacity-0 translate-y-10px delay-0 duration-200'
-                  : 'opacity-100 translate-y-0 delay-150 duration-500',
-              ]"
-            >
-              {{ solution.desc }}
-            </div>
-            <i
-              class="i-custom-circle-right-up solution-card-normal-arrow"
-              :class="[
-                index === activeIndex
-                  ? 'opacity-0 scale-50 delay-0 duration-200'
-                  : 'opacity-100 scale-100 delay-100 duration-500',
-              ]"
-            ></i>
-          </div>
-        </div>
-      </div>
-
-      <div class="solution-dots lt-sm:flex hidden">
-        <div
-          v-for="(_, index) in solutions"
-          :key="index"
-          class="dot"
-          :class="{ active: index === activeIndex }"
-          @click="scrollToSolution(index)"
-        ></div>
-      </div>
-    </section>
-    <section
-      id="ability"
-      ref="abilityRef"
-      class="ability transition-all duration-1000 ease-out"
-      :class="[isAbilityVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
-    >
-      <div class="ability-title pf-sc-semibold">一体化智慧解决方案</div>
-      <div class="ability-desc pf-sc-regular">
-        绘家科技提供从软件到硬件的完整解决方案，覆盖物业管理的全场景需求
-      </div>
-      <div class="ability-content">
-        <div class="ability-tabs">
-          <!-- 滑块背景 -->
-          <div class="ability-tab-indicator" :style="abilityTabIndicatorStyle"></div>
-
-          <div
-            v-for="tab in abilityTabs"
-            :key="tab.title"
-            class="ability-tab-item"
-            :class="[
-              activeAbilityTab.id === tab.id ? 'text-white' : 'text-#091221 hover:text-#0F67F8',
-            ]"
-            @click="handleAbilityTabClick(tab)"
-          >
-            {{ tab.title }}
-          </div>
-        </div>
-        <div class="tab-content">
-          <Transition name="tab-fade" mode="out-in">
-            <div :key="activeAbilityTab.id" class="ability-grid">
-              <div
-                v-for="ability in abilities[activeAbilityTab.id]"
-                :key="ability.title"
-                class="ability-card"
-              >
-                <i :class="ability.icon" class="ability-card-icon"></i>
-                <div class="ability-card-title pf-sc-semibold">
-                  {{ ability.title }}
-                </div>
-                <div class="ability-card-desc pf-sc-regular">
-                  {{ ability.desc }}
-                </div>
-                <div class="ability-card-link">
-                  查看详情
-                  <i
-                    class="i-custom-arrow-right-c color-#0F67F8 wh-18px lt-sm:wh-28px transition-transform group-hover:translate-x-4px"
-                  ></i>
-                </div>
-              </div>
-            </div>
-          </Transition>
-        </div>
-      </div>
-    </section>
-    <section
-      id="cases"
-      ref="casesRef"
-      class="cases transition-all duration-1000 ease-out"
-      :class="[isCasesVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
-    >
-      <div class="cases-header">
-        <div class="cases-title pf-sc-semibold">知识产权和案例</div>
-        <div class="cases-desc pf-sc-regular">
-          绘家科技凭借强大的技术实力和丰富的实践经验，为客户提供卓越的智慧社区解决方案
-        </div>
-      </div>
-
-      <div ref="casesListRef" class="cases-list" @scroll="handleCaseScroll">
-        <div
-          v-for="(caseItem, index) in cases"
-          :key="caseItem.title"
-          class="cases-card"
-          :class="{ active: index === activeCaseIndex }"
-        >
-          <div class="flex flex-col h-full">
-            <img :src="caseItem.img" class="cases-card-img" alt="" />
-            <div class="cases-card-title pf-sc-semibold">
-              {{ caseItem.title }}
-            </div>
-            <div class="cases-card-desc pf-sc-regular">
-              {{ caseItem.desc }}
-            </div>
-            <div class="cases-card-points">
-              <div v-for="point in caseItem.points" :key="point.title" class="cases-card-point">
-                <i class="i-custom-check-one cases-card-point-icon"></i>
-                <div class="cases-card-point-title pf-sc-semibold">
-                  {{ point.title }}
-                </div>
-                <div class="cases-card-point-desc pf-sc-regular">
-                  {{ point.itemDesc }}
-                </div>
-              </div>
-            </div>
-
-            <button class="cases-btn">
-              {{ caseItem.btnText }}
-              <i class="i-custom-arrow-right-c cases-card-btn-icon"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="cases-dots lt-sm:flex hidden">
-        <div
-          v-for="(_, index) in cases"
-          :key="index"
-          class="dot"
-          :class="{ active: index === activeCaseIndex }"
-          @click="scrollToCase(index)"
-        ></div>
-      </div>
-    </section>
-    <section
-      id="partnership"
-      ref="partnershipRef"
-      class="partnership transition-all duration-1000 ease-out"
-      :class="[isPartnershipVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
-    >
-      <div class="partnership-header">
-        <div class="partnership-line-left"></div>
-        <div class="partnership-title pf-sc-regular">与合作伙伴携手，深入产业共创价值</div>
-        <div class="partnership-line-right"></div>
-      </div>
-
-      <div class="partnership-content">
-        <!-- 第一行 -->
-        <InspiraMarquee class="partnership-marquee-row1">
-          <div v-for="partner in partnersRow1" :key="partner" class="partner-item">
-            <img :src="partner" alt="" class="wh-full object-contain" />
-          </div>
-        </InspiraMarquee>
-        <!-- 第二行 -->
-        <InspiraMarquee reverse class="partnership-marquee-row2">
-          <div v-for="partner in partnersRow2" :key="partner" class="partner-item">
-            <img :src="partner" alt="" class="wh-full object-contain" />
-          </div>
-        </InspiraMarquee>
-        <!-- 左右渐变遮罩 -->
-        <div class="partnership-mask-left"></div>
-        <div class="partnership-mask-right"></div>
-      </div>
-    </section>
-    <section id="history" ref="timelineRef" class="history">
-      <div
-        class="history-container"
-        :class="[isTimelineVisible ? 'translate-y-0 opacity-100' : 'translate-y-40px opacity-0']"
-      >
-        <div class="history-title pf-sc-semibold">发展历程</div>
-        <div class="history-subtitle pf-sc-regular">从探索到引领，绘家科技每一步都坚实有力</div>
-
-        <!-- 上部内容区 -->
-        <div class="history-top">
-          <!-- 左侧大年份 -->
-          <div class="history-year-wrapper">
-            <Transition name="year-flow">
-              <div :key="currentYearData?.year" class="history-year-content">
-                <span class="history-year-text pf-sc-bold">
-                  {{ currentYearData?.year }}
-                </span>
-              </div>
-            </Transition>
-          </div>
-
-          <!-- 右侧事件描述 -->
-          <div class="history-event-wrapper">
-            <Transition name="event-fade" mode="out-in">
-              <div
-                :key="currentYearData?.year + '-' + currentEventIndex"
-                class="history-event-content"
-              >
-                <div class="history-event-header">
-                  <span class="history-event-month pf-sc-semibold">
-                    {{ currentEventData?.month }}
-                  </span>
-                  <!-- 右上方小切换 -->
-                  <div
-                    v-if="(currentYearData?.events?.length ?? 0) > 1"
-                    class="history-event-controls"
-                  >
-                    <i
-                      class="i-custom-arrow-circle-left history-event-arrow"
-                      :class="[
-                        currentEventIndex === 0
-                          ? 'opacity-30 cursor-not-allowed'
-                          : 'cursor-pointer hover:i-custom-arrow-circle-left-active hover:scale-110 active:scale-95',
-                      ]"
-                      @click="prevEvent"
-                    ></i>
-                    <i
-                      class="i-custom-arrow-circle-right history-event-arrow"
-                      :class="[
-                        currentEventIndex === (currentYearData?.events?.length ?? 0) - 1
-                          ? 'opacity-30 cursor-not-allowed'
-                          : 'cursor-pointer hover:i-custom-arrow-circle-right-active hover:scale-110 active:scale-95',
-                      ]"
-                      @click="nextEvent"
-                    ></i>
-                  </div>
-                </div>
-                <div class="history-event-line"></div>
-                <div class="history-event-desc pf-sc-regular">
-                  {{ currentEventData?.content }}
-                </div>
-              </div>
-            </Transition>
-          </div>
-        </div>
-
-        <!-- 时间轴 -->
-        <div class="history-timeline lt-sm:hidden">
-          <!-- 轨道容器 -->
-          <div class="history-timeline-track">
-            <!-- 进度条：从轨道最左侧开始到当前点 -->
-            <div class="history-timeline-progress" :style="progressStyle"></div>
-
-            <!-- 内部轨道（用于定位时间点） -->
-            <div class="history-timeline-nodes">
-              <!-- 时间点列表 -->
-              <div
-                v-for="(item, index) in historyYears"
-                :key="item.year"
-                class="history-timeline-node"
-                :style="getTimelineNodePositionStyle(index)"
-                @click="selectYear(index)"
-              >
-                <!-- 圆点 -->
-                <div
-                  class="history-timeline-dot"
-                  :class="getTimelineDotClasses(index)"
-                  :style="getTimelineDotStyle(index)"
-                ></div>
-                <!-- 年份文字 -->
-                <span class="history-timeline-year" :class="getTimelineYearTextClasses(index)">
-                  {{ item.year }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Mobile Timeline -->
-        <div class="history-timeline-mobile lt-sm:flex hidden">
-          <i
-            class="i-custom-button-previous-mobile history-mobile-btn"
-            :class="[
-              currentYearIndex === 0
-                ? 'cursor-not-allowed i-custom-button-previous-mobile-disabled'
-                : 'active:i-custom-button-previous-mobile-active',
-            ]"
-            @click="prevYear"
-          ></i>
-
-          <div class="history-mobile-track-container">
-            <div class="history-mobile-track-line"></div>
-            <div class="history-mobile-nodes">
-              <div
-                v-for="(yearIndex, i) in mobileTimelineIndices"
-                :key="i"
-                class="history-mobile-node"
-                :class="{ invisible: yearIndex < 0 || yearIndex >= historyYears.length }"
-                @click="yearIndex >= 0 && yearIndex < historyYears.length && selectYear(yearIndex)"
-              >
-                <div
-                  class="history-mobile-dot"
-                  :class="{ active: yearIndex === currentYearIndex }"
-                ></div>
-                <div
-                  class="history-mobile-year"
-                  :class="{ active: yearIndex === currentYearIndex }"
-                >
-                  {{ historyYears[yearIndex]?.year }}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <i
-            class="i-custom-button-next-mobile history-mobile-btn"
-            :class="[
-              currentYearIndex === historyYears.length - 1
-                ? 'cursor-not-allowed i-custom-button-next-mobile-disabled'
-                : 'active:i-custom-button-next-mobile-active',
-            ]"
-            @click="nextYear"
-          ></i>
-        </div>
-
-        <!-- 底部大切换 -->
-        <div class="history-nav">
-          <i
-            class="i-custom-button-previous history-nav-btn"
-            :class="{
-              'opacity-30 cursor-not-allowed hover:i-custom-button-previous!':
-                currentYearIndex === 0,
-            }"
-            @click="prevYear"
-          ></i>
-          <i
-            class="i-custom-button-next history-nav-btn"
-            :class="{
-              'opacity-30 cursor-not-allowed hover:i-custom-button-next!':
-                currentYearIndex === historyYears.length - 1,
-            }"
-            @click="nextYear"
-          ></i>
-        </div>
-      </div>
-    </section>
-    <section class="cta">
-      <div class="cta-title pf-sc-semibold">开启您的智慧社区转型之旅</div>
-      <div class="cta-desc pf-sc-light">
-        提交您的需求，我们的专属顾问将在24小时内为您提供定制化解决方案
-      </div>
-      <button class="cta-btn pf-sc-regular" @click="openConsultation">
-        <span class="cta-btn-text">立即咨询</span>
-        <i class="i-custom-arrow-right cta-btn-icon"></i>
-      </button>
-    </section>
+    <HeroSection />
+    <SolutionSection />
+    <AbilitySection />
+    <CasesSection />
+    <PartnershipSection />
+    <HistorySection />
+    <CtaSection />
   </div>
 </template>
 
 <script setup lang="ts">
-  import {
-    abilityTabs,
-    solutions,
-    abilities,
-    cases,
-    partnersRow1,
-    partnersRow2,
-    historyYears,
-  } from '@/constants/common'
-
-  const { openConsultation } = useConsultation()
-
-  const activeIndex = ref(0)
-  const solutionListRef = ref<HTMLElement | null>(null)
-
-  const handleSolutionScroll = (e: Event) => {
-    const el = e.target as HTMLElement
-    const scrollLeft = el.scrollLeft
-    const width = el.offsetWidth
-    // 计算当前处于中间的卡片索引
-    // 卡片宽度为 85%，加上 gap 16px
-    const cardWidth = width * 0.85
-    const gap = 16
-    const newIndex = Math.round(scrollLeft / (cardWidth + gap))
-    if (newIndex !== activeIndex.value) {
-      activeIndex.value = newIndex
-    }
-  }
-
-  const scrollToSolution = (index: number) => {
-    // 桌面端点击不触发滚动
-    if (window.innerWidth >= 640) return
-
-    if (!solutionListRef.value) return
-
-    // 立即更新状态，提升响应速度
-    activeIndex.value = index
-
-    const width = solutionListRef.value.offsetWidth
-    const cardWidth = width * 0.85
-    const gap = 16
-    solutionListRef.value.scrollTo({
-      left: index * (cardWidth + gap),
-      behavior: 'smooth',
-    })
-  }
-
-  const activeCaseIndex = ref(0)
-  const casesListRef = ref<HTMLElement | null>(null)
-
-  const handleCaseScroll = (e: Event) => {
-    const el = e.target as HTMLElement
-    const scrollLeft = el.scrollLeft
-    const width = el.offsetWidth
-    const cardWidth = width * 0.9
-    const gap = 16
-    const newIndex = Math.round(scrollLeft / (cardWidth + gap))
-    if (newIndex !== activeCaseIndex.value) {
-      activeCaseIndex.value = newIndex
-    }
-  }
-
-  const scrollToCase = (index: number) => {
-    if (!casesListRef.value) return
-    const width = casesListRef.value.offsetWidth
-    const cardWidth = width * 0.9
-    const gap = 16
-    casesListRef.value.scrollTo({
-      left: index * (cardWidth + gap),
-      behavior: 'smooth',
-    })
-  }
-  const solutionRef = ref<HTMLElement | null>(null)
-  const abilityRef = ref<HTMLElement | null>(null)
-  const partnershipRef = ref<HTMLElement | null>(null)
-  const casesRef = ref<HTMLElement | null>(null)
-  const timelineRef = ref<HTMLElement | null>(null)
-  const isSolutionVisible = ref(false)
-  const isAbilityVisible = ref(false)
-  const isPartnershipVisible = ref(false)
-  const isCasesVisible = ref(false)
-  const isTimelineVisible = ref(false)
-
-  // 发展历程状态
-  const currentYearIndex = ref(historyYears.length - 1)
-  const currentEventIndex = ref(0)
-
-  const currentYearData = computed(() => {
-    const data = historyYears[currentYearIndex.value]
-    return data || historyYears[0]
-  })
-  const currentEventData = computed(() => {
-    const events = currentYearData.value?.events || []
-    return events[currentEventIndex.value] || events[0]
-  })
-
-  const mobileTimelineIndices = computed(() => {
-    const total = historyYears.length
-    if (total <= 0) return []
-    // Always return 3 positions centered on currentYearIndex
-    const prev = currentYearIndex.value - 1
-    const curr = currentYearIndex.value
-    const next = currentYearIndex.value + 1
-    return [prev, curr, next]
-  })
-
-  const progressStyle = computed(() => {
-    const totalSteps = Math.max(historyYears.length - 1, 1)
-    if (currentYearIndex.value === totalSteps) {
-      return {
-        width: '100%',
-      }
-    }
-    const percentage = currentYearIndex.value / totalSteps
-    return {
-      width: `calc(60px + ${percentage} * (100% - 120px))`,
-    }
-  })
-
-  const nextYear = () => {
-    if (currentYearIndex.value < historyYears.length - 1) {
-      currentYearIndex.value++
-      currentEventIndex.value = 0
-    }
-  }
-
-  const prevYear = () => {
-    if (currentYearIndex.value > 0) {
-      currentYearIndex.value--
-      currentEventIndex.value = 0
-    }
-  }
-
-  const nextEvent = () => {
-    const events = currentYearData.value?.events || []
-    if (currentEventIndex.value < events.length - 1) {
-      currentEventIndex.value++
-    }
-  }
-
-  const prevEvent = () => {
-    if (currentEventIndex.value > 0) {
-      currentEventIndex.value--
-    }
-  }
-
-  const selectYear = (index: number) => {
-    currentYearIndex.value = index
-    currentEventIndex.value = 0
-  }
-
-  const activeAbilityTab = ref<AbilityTab>(abilityTabs[0] as AbilityTab)
-
-  const abilityTabIndicatorStyle = computed(() => {
-    const activeTabIndex = abilityTabs.findIndex((tab) => tab.id === activeAbilityTab.value.id)
-    return {
-      transform: `translateX(${activeTabIndex * 100}%)`,
-    }
-  })
-
-  const handleAbilityTabClick = (tab: AbilityTab) => {
-    activeAbilityTab.value = tab
-  }
-
-  onMounted(() => {
-    const revealSections = [
-      { elRef: solutionRef, visible: isSolutionVisible },
-      { elRef: abilityRef, visible: isAbilityVisible },
-      { elRef: partnershipRef, visible: isPartnershipVisible },
-      { elRef: casesRef, visible: isCasesVisible },
-      { elRef: timelineRef, visible: isTimelineVisible },
-    ]
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            const matched = revealSections.find((item) => item.elRef.value === entry.target)
-            if (matched) {
-              matched.visible.value = true
-            }
-            observer.unobserve(entry.target)
-          }
-        })
-      },
-      { threshold: 0.1 }
-    )
-
-    revealSections.forEach(({ elRef }) => {
-      if (elRef.value) {
-        observer.observe(elRef.value)
-      }
-    })
-  })
-
-  const getTimelineNodePositionStyle = (index: number) => {
-    return { left: `${(index / (historyYears.length - 1)) * 100}%` }
-  }
-
-  const getTimelineDotClasses = (index: number) => {
-    return [
-      index < currentYearIndex.value
-        ? 'wh-13px'
-        : 'wh-16px border-#0F67F8 group-hover:border-[#2563EB]  border-1',
-      index === currentYearIndex.value
-        ? 'wh-16px scale-150 outline-6px outline-#CEE0FF outline-solid border-none'
-        : '',
-    ]
-  }
-
-  const getTimelineDotStyle = (index: number) => {
-    if (index === currentYearIndex.value) {
-      return { background: 'linear-gradient(90deg, #779EFF 0%, #0A50FF 100%)' }
-    }
-    if (index < currentYearIndex.value) {
-      return { background: '#FFFFFF' }
-    }
-    return {}
-  }
-
-  const getTimelineYearTextClasses = (index: number) => {
-    return [
-      index === currentYearIndex.value
-        ? 'text-#2563EB font-bold pf-sc-bold scale-110'
-        : 'text-#94A3B8 group-hover:text-[#64748B]',
-    ]
-  }
+  import HeroSection from './components/HeroSection.vue'
+  import SolutionSection from './components/SolutionSection.vue'
+  import AbilitySection from './components/AbilitySection.vue'
+  import CasesSection from './components/CasesSection.vue'
+  import PartnershipSection from './components/PartnershipSection.vue'
+  import HistorySection from './components/HistorySection.vue'
+  import CtaSection from './components/CtaSection.vue'
 </script>
+
 <style scoped lang="scss">
   .landing {
     @apply lt-sm:pt-120px;
     color: var(--hj-text);
     background: var(--hj-bg);
   }
-
-  .hero {
-    @apply h-680px relative overflow-hidden;
-    @apply lt-sm:w-full lt-sm:h-auto lt-sm:aspect-[750/880];
-
-    background-size: cover;
-    background-position: center;
-    background-image: url('@/assets/images/banner.png');
-
-    @screen lt-sm {
-      @apply w-full h-auto;
-      aspect-ratio: 750/880;
-      background-image: url('@/assets/images/banner-mobile.png');
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      background-position: center;
-    }
-
-    .hero-content {
-      @extend %landing-container;
-      @apply flex items-center pb-48px pt-200px;
-      @apply lt-sm:pt-80px;
-    }
-
-    .hero-text {
-      @apply text-left w-full;
-      @apply lt-sm:text-center;
-    }
-
-    .hero-metrics {
-      @apply mt-35px flex items-center gap-48px;
-      @apply lt-sm:justify-center lt-sm:mt-20px lt-sm:gap-76px;
-    }
-
-    .hero-title {
-      @apply font-s-48px font-semibold text-#000000;
-      @apply lt-sm:font-s-58px;
-    }
-
-    .hero-subtitle {
-      @apply font-s-18px text-#091221/70;
-      @apply lt-sm:mt-12px lt-sm:font-s-26px lt-sm:px-25px;
-      @apply lt-xs:px-0;
-    }
-
-    .hero-actions {
-      @apply mt-35px flex items-center gap-16px;
-      @apply lt-sm:justify-center lt-sm:absolute lt-sm:bottom-80px lt-sm:left-1/2 lt-sm:-translate-x-1/2;
-    }
-
-    .hero-btn-primary {
-      @apply w-127px h-56px rounded-8px text-white font-s-18px pf-sc-semibold;
-      @apply lt-sm:w-168px lt-sm:h-71px lt-sm:font-s-24px lt-sm:rounded-8px;
-    }
-
-    .hero-btn-outline {
-      @apply w-127px h-56px bg-white border-#0F67F8 border-1 rounded-8px hover:opacity-80 font-s-18px font-semibold text-#0F67F8;
-      @apply lt-sm:w-168px lt-sm:h-71px lt-sm:font-s-24px lt-sm:rounded-8px;
-    }
-
-    .metric {
-      @apply flex items-start flex-col;
-      @apply lt-sm:items-center;
-
-      .metric-value {
-        @apply font-s-32px font-semibold text-#0F67F8;
-        @apply lt-sm:font-s-52px;
-      }
-
-      .metric-label {
-        @apply font-s-14px text-#384146;
-        @apply lt-sm:font-s-24px;
-      }
-    }
-  }
-
-  .solution {
-    @extend %landing-container;
-    @apply py-120px lt-sm:py-120px lt-sm:px-0;
-  }
-
-  .solution-header {
-    @apply text-center mb-45px;
-  }
-
-  .solution-title {
-    @apply font-s-36px font-semibold text-#000000 mb-4px lh-60px;
-    @apply lt-sm:font-s-48px lt-sm:lh-60px;
-  }
-
-  .solution-desc {
-    @apply font-s-16px text-#091221/70 lh-30px;
-    @apply lt-sm:font-s-24px lt-sm:px-110px lt-sm:mt-16px lt-sm:lh-40px;
-  }
-
-  .solution-list {
-    @apply flex h-365px w-full gap-24px;
-    @apply lt-sm:h-auto lt-sm:gap-16px lt-sm:overflow-x-auto lt-sm:overflow-y-hidden lt-sm:px-24px;
-    @apply lt-sm:[scroll-snap-type:x_mandatory] lt-sm:[scrollbar-width:none];
-    &::-webkit-scrollbar {
-      @apply lt-sm:hidden;
-    }
-  }
-
-  .solution-card {
-    position: relative;
-    display: flex;
-    height: 100%;
-    cursor: pointer;
-    overflow: hidden;
-    border-radius: 24px;
-    will-change: transform, opacity;
-    transition:
-      transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
-      opacity 600ms ease,
-      flex 600ms ease-in-out,
-      background-color 600ms ease-in-out;
-
-    @media (min-width: 768px) {
-      &.active {
-        flex: 1 1 0%;
-      }
-      &:not(.active) {
-        flex: 0 0 220px;
-      }
-    }
-
-    @apply lt-sm:flex-[0_0_90%] lt-sm:min-h-750px lt-sm:w-630px;
-    @apply lt-sm:[scroll-snap-align:center];
-
-    &:not(.active) {
-      @apply lt-sm:scale-96 lt-sm:opacity-50;
-    }
-
-    &.active {
-      @apply lt-sm:scale-100 lt-sm:opacity-100;
-    }
-
-    &:first-child {
-      @apply lt-sm:ml-36px;
-    }
-
-    &:last-child {
-      @apply lt-sm:mr-36px;
-    }
-  }
-
-  .solution-card-hover {
-    @apply h-full w-full pt-40px px-48px absolute left-0 top-0 transition-all ease-in-out;
-    @apply lt-sm:relative lt-sm:pt-40px lt-sm:px-36px lt-sm:pb-32px lt-sm:opacity-100 lt-sm:translate-y-0 lt-sm:pointer-events-auto;
-
-    &.mobile-show {
-      @apply lt-sm:opacity-100 lt-sm:translate-y-0 lt-sm:pointer-events-auto;
-    }
-  }
-
-  .solution-card-title {
-    @apply font-s-22px text-#000000 transition-all;
-    @apply lt-sm:font-s-32px;
-  }
-
-  .solution-card-desc {
-    @apply font-s-14px lh-24px mt-8px text-#091221/70 pf-sc-regular text-overflow transition-all;
-    @apply lt-sm:font-s-24px lt-sm:mt-8px lt-sm:lh-normal;
-  }
-
-  .solution-card-items {
-    @apply mt-24px flex flex-col gap-8px transition-all;
-    @apply lt-sm:mt-48px;
-  }
-
-  .solution-card-item {
-    @apply flex flex-col;
-  }
-
-  .solution-card-item-header {
-    @apply flex gap-8px items-center font-s-14px;
-    @apply lt-sm:font-s-24px lt-sm:gap-12px;
-  }
-
-  .solution-card-item-icon {
-    @apply wh-18px;
-    @apply lt-sm:wh-32px;
-  }
-
-  .solution-card-item-content {
-    @apply flex items-center gap-8px;
-    @apply lt-sm:flex-col lt-sm:items-start lt-sm:gap-8px;
-  }
-
-  .solution-card-btn {
-    @apply mt-56px h-48px w-268px bg-#0F67F8 text-white pf-sc-regular rounded-8px px-16px flex items-center justify-between hover:opacity-80 transition-all;
-    @apply lt-sm:w-270px lt-sm:h-95px lt-sm:rounded-16px lt-sm:mt-102px;
-  }
-
-  .solution-card-img {
-    @apply wh-280px absolute bottom--37px right-0 transition-all duration-300 ease-in-out;
-    @apply lt-sm:wh-264px lt-sm:bottom--26px;
-  }
-
-  .solution-card-normal {
-    @apply h-full w-220px pt-40px px-24px absolute left-0 top-0 transition-all ease-in-out;
-    @apply lt-sm:hidden;
-  }
-
-  .solution-card-icon-wrapper {
-    @apply wh-40px ml-2px bg-white rounded-10px flex-center transition-all ease-in-out;
-  }
-
-  .solution-card-normal-title {
-    @apply mt-18px font-s-18px text-#091221 pf-sc-semibold transition-all;
-  }
-
-  .solution-card-normal-desc {
-    @apply mt-8px font-s-14px lh-24px text-#091221/60 pf-sc-regular w-172px transition-all;
-  }
-
-  .solution-card-normal-arrow {
-    @apply wh-48px absolute bottom-24px left-24px transition-all;
-  }
-
-  .solution-dots {
-    @apply lt-sm:mt-40px flex-center lt-sm:gap-16px;
-    .dot {
-      @apply lt-sm:w-60px lt-sm:h-10px bg-#E5E9F5 rounded-full transition-all cursor-pointer;
-      &.active {
-        @apply bg-#0F67F8;
-      }
-    }
-  }
-
-  .ability {
-    @apply py-120px;
-    @extend %landing-container;
-    @apply lt-sm:py-120px lt-sm:px-32px;
-    background-size: 100% 100%;
-    background-image: url('@/assets/images/bg-ability.png');
-
-    @screen lt-sm {
-      background-size: 100% 100%;
-      background-image: url('@/assets/images/bg-ability-mobile.png');
-    }
-  }
-
-  .ability-title {
-    @apply font-s-36px text-#000000 pf-sc-semibold flex-center lh-60px;
-    @apply lt-sm:font-s-48px lt-sm:lh-60px;
-  }
-
-  .ability-desc {
-    @apply font-s-16px text-#091221/70 pf-sc-regular lh-30px flex-center mt-4px;
-    @apply lt-sm:font-s-24px lt-sm:lh-40px lt-sm:text-center lt-sm:px-60px;
-  }
-
-  .ability-content {
-    @apply mt-24px flex-center flex-col;
-    @apply lt-sm:mt-40px;
-  }
-
-  .ability-tabs {
-    @apply relative flex items-center rounded-14px border border-#ECEFF6 bg-#F6F8FD p-6px;
-    @apply lt-sm:rounded-16px lt-sm:p-8px lt-sm:w-[calc(100%-40px)];
-  }
-
-  .ability-tab-indicator {
-    @apply absolute w-136px h-[calc(100%-12px)] transition-all duration-300 ease-out rounded-8px bg-#0F67F8;
-    @apply lt-sm:w-[calc((100%-16px)/3)] lt-sm:h-[calc(100%-16px)] lt-sm:rounded-12px;
-  }
-
-  .ability-tab-item {
-    @apply relative z-1 cursor-pointer py-14px px-20px text-center font-s-16px transition-colors duration-300 pf-sc-regular;
-    @apply lt-sm:flex-1 lt-sm:px-0 lt-sm:py-20px lt-sm:font-s-24px;
-  }
-
-  .tab-content {
-    @apply pt-45px;
-    @apply lt-sm:pt-40px lt-sm:w-full;
-  }
-
-  .ability-grid {
-    @apply grid grid-cols-3 gap-24px;
-    @apply lt-sm:grid-cols-2 lt-sm:gap-25px;
-  }
-
-  .ability-card {
-    @apply group relative flex flex-col rounded-16px border border-#ECEFF6 bg-[linear-gradient(0deg,_#FFFFFF_0%,_rgba(255,255,255,0.6)_100%)] p-24px transition-all duration-300 hover:border-#0F67F8/30 hover:shadow-[0_8px_24px_rgba(15,103,248,0.08)];
-    @apply lt-sm:p-24px lt-sm:rounded-16px;
-  }
-
-  .ability-card-icon {
-    @apply wh-48px;
-    @apply lt-sm:wh-78px;
-  }
-
-  .ability-card-title {
-    @apply mt-16px font-s-18px font-semibold text-#091221 pf-sc-semibold;
-    @apply lt-sm:font-s-32px;
-  }
-
-  .ability-card-desc {
-    @apply mt-8px flex-1 font-s-14px text-#091221/70 pf-sc-regular;
-    @apply lt-sm:font-s-24px lt-sm:mt-16px;
-  }
-
-  .ability-card-link {
-    @apply mt-24px flex items-center gap-8px font-s-16px pf-sc-regular text-#0F67F8 transition-colors hover:text-#0A50FF cursor-pointer;
-    @apply lt-sm:mt-48px lt-sm:font-s-28px;
-  }
-
-  .cases {
-    @apply pt-120px pb-46px lt-sm:pt-120px lt-sm:pb-60px lt-sm:px-32px;
-    @extend %landing-container;
-  }
-
-  .cases-header {
-    @apply text-center mb-60px lt-sm:mb-60px lt-sm:px-32px;
-  }
-
-  .cases-title {
-    @apply font-s-36px font-semibold text-#000000 mb-4px lh-60px;
-    @apply lt-sm:font-s-48px lt-sm:mb-16px;
-  }
-
-  .cases-desc {
-    @apply font-s-16px text-#091221/70 lh-30px;
-    @apply lt-sm:font-s-24px lt-sm:lh-40px lt-sm:px-70px;
-  }
-
-  .cases-list {
-    @apply flex gap-24px;
-    @apply lt-sm:gap-36px lt-sm:overflow-x-auto lt-sm:overflow-y-hidden lt-sm:px-0 lt-sm:pb-10px;
-    @apply lt-sm:[scroll-snap-type:x_mandatory] lt-sm:[scrollbar-width:none];
-    &::-webkit-scrollbar {
-      @apply lt-sm:hidden;
-    }
-  }
-
-  .cases-card {
-    @apply group flex-1 overflow-hidden rounded-16px bg-#F6F8FD p-32px transition-all duration-300;
-    @apply lt-sm:flex-none lt-sm:w-[calc(100vw-84px)] lt-sm:min-w-[calc(100vw-84px)] lt-sm:p-32px lt-sm:rounded-16px;
-    @apply lt-sm:[scroll-snap-align:center];
-
-    &:first-child {
-      @apply lt-sm:ml-42px;
-    }
-
-    &:last-child {
-      @apply lt-sm:mr-42px;
-    }
-  }
-
-  .cases-card-img {
-    @apply w-full h-218px rounded-12px;
-    @apply lt-sm:h-320px lt-sm:rounded-12px;
-  }
-
-  .cases-card-title {
-    @apply font-s-18px font-semibold text-#091221 mt-24px;
-    @apply lt-sm:font-s-32px lt-sm:mt-32px;
-  }
-
-  .cases-card-desc {
-    @apply mt-8px font-s-14px lh-24px text-#091221/70;
-    @apply lt-sm:font-s-24px lt-sm:lh-36px lt-sm:mt-16px;
-  }
-
-  .cases-card-points {
-    @apply mt-24px flex flex-col gap-8px flex-1;
-    @apply lt-sm:mt-32px lt-sm:gap-16px;
-  }
-
-  .cases-card-point {
-    @apply flex items-center gap-8px;
-    @apply lt-sm:gap-12px;
-  }
-
-  .cases-card-point-icon {
-    @apply wh-20px mt-2px;
-    @apply lt-sm:wh-32px;
-  }
-
-  .cases-card-point-title {
-    @apply font-s-14px font-semibold text-#091221;
-    @apply lt-sm:font-s-24px;
-  }
-
-  .cases-card-point-desc {
-    @apply font-s-14px text-#091221/70;
-    @apply lt-sm:font-s-24px;
-  }
-
-  .cases-btn {
-    @apply mt-56px flex items-center justify-between gap-8px rounded-8px bg-white px-16px py-15px font-s-16px text-#0F67F8 transition-all hover:bg-#0F67F8 hover:text-white;
-    @apply lt-sm:mt-48px lt-sm:h-96px lt-sm:rounded-8px lt-sm:px-32px lt-sm:font-s-28px lt-sm:bg-#0F67F8 lt-sm:text-white;
-  }
-
-  .cases-card-btn-icon {
-    @apply wh-18px;
-    @apply lt-sm:wh-32px lt-sm:text-white;
-  }
-
-  .cases-dots {
-    @apply lt-sm:mt-40px lt-sm:flex-center lt-sm:gap-16px;
-    .dot {
-      @apply lt-sm:w-60px lt-sm:h-10px bg-#E5E9F5 rounded-full transition-all cursor-pointer;
-      &.active {
-        @apply bg-#0F67F8;
-      }
-    }
-  }
-
-  .partnership {
-    @extend %landing-container;
-    @media screen and (min-width: 1920px) {
-      padding-left: 220px;
-      padding-right: 220px;
-    }
-    @apply py-60px overflow-hidden;
-    @apply lt-sm:py-60px lt-sm:px-0;
-  }
-
-  .partnership-header {
-    @apply flex-center gap-32px mb-40px;
-    @apply lt-sm:mb-40px lt-sm:gap-30px;
-  }
-
-  .partnership-line-left {
-    @apply h-2px w-320px bg-[linear-gradient(90deg,transparent_0%,#E5E9F5_100%)];
-    @apply lt-sm:w-85px;
-  }
-
-  .partnership-title {
-    @apply text-center font-s-18px lh-21px text-#9CA0A7 whitespace-nowrap;
-    @apply lt-sm:font-s-28px;
-  }
-
-  .partnership-line-right {
-    @apply h-2px w-320px bg-[linear-gradient(90deg,#E5E9F5_0%,transparent_100%)];
-    @apply lt-sm:w-85px;
-  }
-
-  .partnership-content {
-    @apply relative flex flex-col gap-0px -mt-24px;
-  }
-
-  .partnership-marquee-row1 {
-    @apply [--duration:80s] [--gap:24px] mb--31px;
-  }
-
-  .partnership-marquee-row2 {
-    @apply [--duration:80s] [--delay:-20s] [--gap:24px];
-  }
-
-  .partnership-mask-left {
-    @apply pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-[linear-gradient(to_right,#fff,transparent)];
-  }
-
-  .partnership-mask-right {
-    @apply pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-[linear-gradient(to_left,#fff,transparent)];
-  }
-
-  .partner-item {
-    @apply flex-center h-80px w-200px bg-white rounded-8px shadow-[0_2px_8px_2px_rgba(0,0,0,0.06)] px-24px;
-    @apply lt-sm:h-105px lt-sm:w-290px;
-  }
-
-  .tab-fade-enter-active {
-    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-
-  .tab-fade-leave-active {
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .tab-fade-enter-from {
-    opacity: 0;
-    transform: translateX(30px);
-  }
-
-  .tab-fade-leave-to {
-    opacity: 0;
-    transform: translateX(-30px);
-  }
-
-  /* 卡片级联动画 */
-  .grid > div {
-    animation: card-slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-  }
-
-  .grid > div:nth-child(1) {
-    animation-delay: 0.05s;
-  }
-  .grid > div:nth-child(2) {
-    animation-delay: 0.1s;
-  }
-  .grid > div:nth-child(3) {
-    animation-delay: 0.15s;
-  }
-  .grid > div:nth-child(4) {
-    animation-delay: 0.2s;
-  }
-  .grid > div:nth-child(5) {
-    animation-delay: 0.25s;
-  }
-  .grid > div:nth-child(6) {
-    animation-delay: 0.3s;
-  }
-  .grid > div:nth-child(7) {
-    animation-delay: 0.35s;
-  }
-  .grid > div:nth-child(8) {
-    animation-delay: 0.4s;
-  }
-
-  @keyframes card-slide-up {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  .btn-primary {
-    @apply bg-gradient-to-r from-[#779EFF] to-[#0A50FF];
-
-    border: none;
-    outline: none;
-    //hover 背景颜色
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-
-  .history {
-    @apply overflow-hidden relative py-60px;
-    @apply lt-sm:pt-60px lt-sm:pb-160px lt-sm:px-32px;
-    @extend %landing-container;
-    background-size: cover;
-    background-position: center;
-    background-image: url('@/assets/images/history-bg.png');
-  }
-
-  .history-container {
-    @apply flex flex-col items-center transition-all duration-1000;
-  }
-
-  .history-title {
-    @apply font-semibold font-s-36px text-#000000 lh-60px text-center mb-4px;
-    @apply lt-sm:font-s-48px lt-sm:lh-60px;
-  }
-
-  .history-subtitle {
-    @apply font-s-16px text-#091221/70 text-center lh-30px mb-50px;
-    @apply lt-sm:font-s-24px lt-sm:lh-40px lt-sm:mb-88px;
-  }
-
-  .history-top {
-    @apply w-full h-255px flex py-50px items-center;
-    @apply lt-sm:h-176px;
-  }
-
-  .history-year-wrapper {
-    @apply relative pl-127px w-600px shrink-0 h-170px overflow-hidden;
-    @apply lt-sm:hidden;
-  }
-
-  .history-year-content {
-    @apply absolute left-127px top-0 h-full flex items-center w-full;
-  }
-
-  .history-year-text {
-    @apply text-170px font-bold text-#0F67F8 select-none leading-none;
-    -webkit-text-stroke: 1px #2563eb;
-    text-shadow: 0 0 20px rgba(37, 99, 235, 0.1);
-  }
-
-  .history-event-wrapper {
-    @apply flex-1 h-full relative overflow-hidden pt-14px;
-    @apply lt-sm:h-176px lt-sm:pt-0;
-  }
-
-  .history-event-content {
-    @apply absolute left-0 top-14px w-full flex flex-col pr-114px;
-    @apply lt-sm:pr-0 static;
-  }
-
-  .history-event-header {
-    @apply flex justify-between items-center w-full;
-    @apply lt-sm:h-45px;
-  }
-
-  .history-event-month {
-    @apply font-s-22px font-semibold lh-30.8px text-#091221 flex-1;
-    @apply lt-sm:font-s-32px lt-sm:lh-30.8px;
-  }
-
-  .history-event-controls {
-    @apply flex gap-12px relative z-10;
-    @apply lt-sm:gap-16px;
-  }
-
-  .history-event-arrow {
-    @apply wh-32px transition-all;
-    @apply lt-sm:wh-45px;
-  }
-
-  .history-event-line {
-    @apply h-2px w-34px bg-#0F67F8 mt-11px origin-left;
-    @apply lt-sm:h-4px lt-sm:w-68px lt-sm:mt-25px;
-  }
-
-  .history-event-desc {
-    @apply w-full font-s-20px lh-35px text-#091221/70 mt-26px;
-    @apply lt-sm:font-s-24px lt-sm:mt-26px lt-sm:lh-normal;
-  }
-
-  .history-timeline {
-    @apply w-full relative pt-47px pb-60px;
-    @apply lt-sm:py-0 lt-sm:mt-70px;
-  }
-
-  .history-timeline-track {
-    @apply relative h-16px w-full bg-white rounded-full px-60px;
-    @apply lt-sm:h-16px lt-sm:px-60px;
-  }
-
-  .history-timeline-progress {
-    @apply absolute left-0 top-0 h-full bg-gradient-to-r from-[#60A5FA] to-[#2563EB] rounded-full transition-all duration-500 ease-out z-1;
-  }
-
-  .history-timeline-nodes {
-    @apply relative h-full w-full;
-  }
-
-  .history-timeline-node {
-    @apply absolute top-1/2 -translate-y-1/2 -translate-x-1/2 flex flex-col items-center cursor-pointer group z-2;
-  }
-
-  .history-timeline-dot {
-    @apply rounded-full transition-all duration-300 relative bg-white;
-    @apply lt-sm:wh-14px;
-  }
-
-  .history-timeline-year {
-    @apply absolute top-24px text-16px transition-all duration-300 whitespace-nowrap;
-  }
-
-  .history-nav {
-    @apply flex gap-24px mt-45px;
-    @apply lt-sm:hidden;
-  }
-
-  .history-nav-btn {
-    @apply wh-56px flex-center cursor-pointer;
-  }
-
-  /* 发展历程动画 - 新版流式 */
-  .year-flow-enter-active,
-  .year-flow-leave-active {
-    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-  }
-
-  .year-flow-enter-from {
-    opacity: 0;
-    transform: translateY(100%) scale(0.9);
-  }
-
-  .year-flow-leave-to {
-    opacity: 0;
-    transform: translateY(-100%) scale(0.9);
-  }
-
-  /* 事件内容渐隐渐显 */
-  .event-fade-enter-active,
-  .event-fade-leave-active {
-    transition: opacity 0.3s ease;
-  }
-
-  .event-fade-enter-from,
-  .event-fade-leave-to {
-    opacity: 0;
-  }
-
-  /* 时间轴圆点呼吸效果 */
-
-  .cta {
-    @apply w-full h-276px py-60px flex-center flex-col;
-    @apply lt-sm:h-345px lt-sm:py-60px;
-    background-size: cover;
-    background-position: center;
-    background-image: url('@/assets/images/bg-3.png');
-    @screen lt-sm {
-      background-size: cover;
-      background-position: center;
-      background-image: url('@/assets/images/bg-3-mobile.png');
-    }
-  }
-
-  .cta-title {
-    @apply font-s-40px lh-56px text-center;
-    @apply lt-sm:font-s-40px lt-sm:lh-56px;
-  }
-
-  .cta-desc {
-    @apply font-s-18px text-#232325;
-    @apply lt-sm:font-s-18px lt-sm:mt-24px;
-  }
-
-  .cta-btn {
-    @apply h-52px mt-22px w-268px bg-#0F67F8 text-white rounded-8px px-16px flex items-center justify-between hover:opacity-80;
-    @apply lt-sm:h-84px lt-sm:w-391px lt-sm:mt-24px lt-sm:rounded-8px;
-  }
-
-  .cta-btn-text {
-    @apply font-s-16px;
-    @apply lt-sm:font-s-26px;
-  }
-
-  .cta-btn-icon {
-    @apply i-custom-arrow-right wh-18px;
-  }
-
-  .history-timeline-mobile {
-    @apply flex items-center justify-between w-full px-0;
-    @apply lt-sm:mt-70px;
-  }
-
-  .history-mobile-btn {
-    @apply shrink-0 cursor-pointer transition-all absolute;
-    @apply lt-sm:wh-64px z-10;
-    &.i-custom-button-previous-mobile {
-      @apply left-0;
-    }
-    &.i-custom-button-next-mobile {
-      @apply right-0;
-    }
-  }
-
-  .history-mobile-track-container {
-    @apply relative flex-1;
-  }
-
-  .history-mobile-track-line {
-    @apply absolute left-0 right-0 bg-white rounded-full;
-    @apply lt-sm:h-16px lt-sm:top-1/2 lt-sm:translate-y--1/2;
-  }
-
-  .history-mobile-nodes {
-    @apply hidden relative w-full h-full justify-between items-center z-1;
-    @apply lt-sm:px-100px lt-sm:h-16px lt-sm:flex;
-  }
-
-  .history-mobile-node {
-    @apply relative flex flex-col items-center cursor-pointer;
-    @apply lt-sm:w-60px;
-    &.invisible {
-      @apply transition-none;
-      .history-mobile-dot,
-      .history-mobile-year {
-        @apply transition-none;
-      }
-    }
-  }
-
-  .history-mobile-dot {
-    @apply rounded-full bg-white transition-all z-2 border-#0F67F8 border-1;
-    @apply lt-sm:wh-18px;
-
-    &.active {
-      @apply scale-150  outline-#CEE0FF outline-solid border-none bg-[linear-gradient(90deg,#779EFF_0%,#0A50FF_100%)];
-      @apply lt-sm:wh-22px lt-sm:outline-8px;
-    }
-  }
-
-  .history-mobile-year {
-    @apply hidden absolute text-#091221/60 pf-sc-regular transition-all whitespace-nowrap;
-    @apply lt-sm:font-s-22px lt-sm:top-58px lt-sm:block;
-    &.active {
-      @apply text-#0F67F8 font-semibold scale-110;
-    }
-  }
 </style>