fix: 组件语义化 seo 优化

app/components/section/ability.vue

@@ -5,10 +5,10 @@
     class="ability transition-all duration-1000 ease-out"
     :class="[isAbilityVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-50px']"
   >
-    <div class="ability-title pf-sc-semibold">一体化智慧解决方案</div>
-    <div class="ability-desc pf-sc-regular">
+    <h2 class="ability-title pf-sc-semibold">一体化智慧解决方案</h2>
+    <p class="ability-desc pf-sc-regular">
       绘家科技提供从软件到硬件的完整解决方案，覆盖物业管理的全场景需求
-    </div>
+    </p>
     <div class="ability-content">
       <div class="ability-tabs">
         <div class="ability-tab-indicator" :style="abilityTabIndicatorStyle"></div>
@@ -34,12 +34,12 @@
               class="ability-card"
             >
               <i :class="ability.icon" class="ability-card-icon"></i>
-              <div class="ability-card-title pf-sc-semibold">
+              <h3 class="ability-card-title pf-sc-semibold">
                 {{ ability.title }}
-              </div>
-              <div class="ability-card-desc pf-sc-regular">
+              </h3>
+              <p class="ability-card-desc pf-sc-regular">
                 {{ ability.desc }}
-              </div>
+              </p>
               <NuxtLink class="ability-card-link" :to="`/solutions/${ability.id}`">
                 查看详情
                 <i

app/components/section/cases.vue

@@ -6,10 +6,10 @@
     :class="[isCasesVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-50px']"
   >
     <div class="cases-header">
-      <div class="cases-title pf-sc-semibold">知识产权和案例</div>
-      <div class="cases-desc pf-sc-regular">
+      <h2 class="cases-title pf-sc-semibold">知识产权和案例</h2>
+      <p class="cases-desc pf-sc-regular">
         绘家科技凭借强大的技术实力和丰富的实践经验，为客户提供卓越的智慧社区解决方案
-      </div>
+      </p>
     </div>
 
     <div ref="casesListRef" class="cases-list" @scroll="handleCaseScroll">
@@ -21,12 +21,12 @@
       >
         <div class="flex flex-col h-full">
           <img :src="caseItem.img" class="cases-card-img" alt="" />
-          <div class="cases-card-title pf-sc-semibold">
+          <h3 class="cases-card-title pf-sc-semibold">
             {{ caseItem.title }}
-          </div>
-          <div class="cases-card-desc pf-sc-regular">
+          </h3>
+          <p class="cases-card-desc pf-sc-regular">
             {{ caseItem.desc }}
-          </div>
+          </p>
           <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>

app/components/section/cta.vue

@@ -7,10 +7,10 @@
 -->
 <template>
   <section class="cta">
-    <div class="cta-title pf-sc-semibold">开启您的智慧社区转型之旅</div>
-    <div class="cta-desc pf-sc-light">
+    <h2 class="cta-title pf-sc-semibold">开启您的智慧社区转型之旅</h2>
+    <p class="cta-desc pf-sc-light">
       提交您的需求，我们的专属顾问将在24小时内为您提供定制化解决方案
-    </div>
+    </p>
     <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>

app/components/section/hero.vue

@@ -2,23 +2,15 @@
   <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>
+        <h1 class="hero-title">智慧社区整体解决方案</h1>
+        <p class="hero-subtitle">绘家科技助力物业管理数字化转型，提升服务品质与业主满意度。</p>
+
+        <ul class="hero-metrics">
+          <li v-for="(item, index) in metrics" :key="index" class="metric">
+            <strong class="metric-value">{{ item.value }}</strong>
+            <span class="metric-label">{{ item.label }}</span>
+          </li>
+        </ul>
         <div class="hero-actions">
           <button class="btn-primary hero-btn-primary">查看方案</button>
           <button class="hero-btn-outline" @click="openConsultation">免费咨询</button>
@@ -30,6 +22,12 @@
 
 <script setup lang="ts">
   const { openConsultation } = useConsultation()
+
+  const metrics = [
+    { value: '300+', label: '服务客户' },
+    { value: '800+', label: '管理小区' },
+    { value: '50w+', label: '管理房屋' },
+  ]
 </script>
 
 <style scoped lang="scss">

app/components/section/history.vue

@@ -4,16 +4,16 @@
       class="history-container"
       :class="[isTimelineVisible ? 'translate-y-0 opacity-100' : 'translate-y-50px opacity-0']"
     >
-      <div class="history-title pf-sc-semibold">发展历程</div>
-      <div class="history-subtitle pf-sc-regular">从探索到引领，绘家科技每一步都坚实有力</div>
+      <h2 class="history-title pf-sc-semibold">发展历程</h2>
+      <p class="history-subtitle pf-sc-regular">从探索到引领，绘家科技每一步都坚实有力</p>
 
       <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">
+              <h3 class="history-year-text pf-sc-bold">
                 {{ currentYearData?.year }}
-              </span>
+              </h3>
             </div>
           </Transition>
         </div>

app/components/section/partnership.vue

@@ -14,7 +14,7 @@
   >
     <div class="partnership-header">
       <div class="partnership-line-left"></div>
-      <div class="partnership-title pf-sc-regular">与合作伙伴携手，深入产业共创价值</div>
+      <h2 class="partnership-title pf-sc-regular">与合作伙伴携手，深入产业共创价值</h2>
       <div class="partnership-line-right"></div>
     </div>
 

app/components/section/solution.vue

@@ -6,10 +6,10 @@
     :class="[isSolutionVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-50px']"
   >
     <div class="solution-header">
-      <div class="solution-title">物业管理正面临这些挑战</div>
-      <div class="solution-desc">
+      <h2 class="solution-title">物业管理正面临这些挑战</h2>
+      <p class="solution-desc">
         传统物业管理模式效率低下、成本高昂、服务体验差，急需数字化转型
-      </div>
+      </p>
     </div>
 
     <div ref="solutionListRef" class="solution-list" @scroll="handleSolutionScroll">
@@ -42,7 +42,7 @@
             ]"
           >
             <span class="lt-sm:hidden">{{ solution.hoverTitle }}</span>
-            <span>{{ solution.title }}解决方案</span>
+            <h3 class="inline">{{ solution.title }}解决方案</h3>
           </div>
           <div
             class="solution-card-desc pf-sc-regular"
@@ -52,7 +52,7 @@
                 : 'opacity-0 translate-y-20px delay-0 duration-200',
             ]"
           >
-            <span>{{ solution.hoverDesc }}</span>
+            <p>{{ solution.hoverDesc }}</p>
           </div>
           <div
             class="solution-card-items"

app/pages/solutions/[id].vue

@@ -12,9 +12,9 @@
       <div
         class="landing-container flex flex-col items-center justify-center h-full text-center lt-sm:px-32px"
       >
-        <div class="hero-title pf-sc-semibold">{{ solution.title }}</div>
-        <div class="hero-subtitle pf-sc-semibold">{{ solution.subTitle }}</div>
-        <div class="hero-desc pf-sc-regular">{{ solution.description }}</div>
+        <h1 class="hero-title pf-sc-semibold">{{ solution.title }}</h1>
+        <p class="hero-subtitle pf-sc-semibold">{{ solution.subTitle }}</p>
+        <p class="hero-desc pf-sc-regular">{{ solution.description }}</p>
         <button class="hero-btn btn-primary pf-sc-semibold" @click="openConsultation">
           立即免费咨询
         </button>
@@ -24,7 +24,7 @@
     <!-- Core Pain Points -->
     <section class="section-container bg-white">
       <div class="landing-container lt-sm:px-32px">
-        <div class="section-title pf-sc-semibold">{{ solution.corePoints.title }}</div>
+        <h2 class="section-title pf-sc-semibold">{{ solution.corePoints.title }}</h2>
         <div class="grid grid-cols-3 gap-25px lt-sm:grid-cols-1">
           <div
             v-for="(item, index) in solution.corePoints.points"
@@ -32,8 +32,8 @@
             class="pain-card group"
           >
             <i :class="[item.icon, 'pain-icon']"></i>
-            <div class="pain-title pf-sc-semibold">{{ item.point }}</div>
-            <div class="pain-desc pf-sc-regular">{{ item.pointDesc }}</div>
+            <h3 class="pain-title pf-sc-semibold">{{ item.point }}</h3>
+            <p class="pain-desc pf-sc-regular">{{ item.pointDesc }}</p>
           </div>
         </div>
       </div>
@@ -42,7 +42,7 @@
     <!-- Core Functions -->
     <section class="section-container bg-#F6F8FD">
       <div class="landing-container lt-sm:px-32px">
-        <div class="section-title pf-sc-semibold">{{ solution.coreFunctions.title }}</div>
+        <h2 class="section-title pf-sc-semibold">{{ solution.coreFunctions.title }}</h2>
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-24px mt-60px">
           <div
             v-for="(item, index) in solution.coreFunctions.function"
@@ -51,9 +51,9 @@
           >
             <div class="function-card-header">
               <img src="~/assets/icons/function.svg" class="function-icon" alt="icon" />
-              <div class="function-title pf-sc-semibold">{{ item.name }}</div>
+              <h3 class="function-title pf-sc-semibold">{{ item.name }}</h3>
             </div>
-            <div class="function-desc pf-sc-regular">{{ item.funcDesc }}</div>
+            <p class="function-desc pf-sc-regular">{{ item.funcDesc }}</p>
             <div class="function-tags">
               <span
                 v-for="(tag, tIndex) in item.funcPoints"
@@ -72,7 +72,7 @@
     <!-- Core Effects -->
     <section class="section-container bg-white">
       <div class="landing-container">
-        <div class="section-title pf-sc-semibold">{{ solution.coreEffects.title }}</div>
+        <h2 class="section-title pf-sc-semibold">{{ solution.coreEffects.title }}</h2>
         <div
           class="flex justify-between mt-80px gap-y-40px lt-sm:mt-72px lt-sm:grid lt-sm:grid-cols-2!"
         >
@@ -82,7 +82,7 @@
             class="effect-item flex-1 text-center"
           >
             <div class="effect-percent d-din-pro-700-bold">{{ item.percent }}</div>
-            <div class="effect-name pf-sc-regular">{{ item.name }}</div>
+            <p class="effect-name pf-sc-regular">{{ item.name }}</p>
           </div>
         </div>
       </div>
@@ -91,7 +91,7 @@
     <!-- Typical Cases -->
     <section v-if="currentCase" class="section-container solution-case">
       <div class="landing-container lt-sm:px-32px">
-        <div class="section-title pf-sc-semibold">{{ solution.typicalCases.title }}</div>
+        <h2 class="section-title pf-sc-semibold">{{ solution.typicalCases.title }}</h2>
         <div class="mt-60px lt-sm:mt-48px">
           <div class="case-card">
             <div class="case-img-wrapper">
@@ -99,7 +99,7 @@
             </div>
             <div class="case-content">
               <div class="case-header">
-                <div class="case-name pf-sc-semibold">{{ currentCase.caseName }}</div>
+                <h3 class="case-name pf-sc-semibold">{{ currentCase.caseName }}</h3>
                 <div v-if="(solution.typicalCases.cases?.length ?? 0) > 1" class="case-nav-btns">
                   <!-- PC Prev -->
                   <i
@@ -146,13 +146,13 @@
               </div>
 
               <div class="case-section">
-                <div class="case-subtitle pf-sc-semibold">客户痛点</div>
+                <h4 class="case-subtitle pf-sc-semibold">客户痛点</h4>
                 <div class="case-text pf-sc-regular">{{ currentCase.casePainPoint }}</div>
               </div>
               <div
                 class="case-section mt-24px bg-#F6F8FD p-16px rounded-8px lt-sm:mt-24px lt-sm:p-24px lt-sm:rounded-8px"
               >
-                <div class="case-subtitle pf-sc-semibold">落地效果</div>
+                <h4 class="case-subtitle pf-sc-semibold">落地效果</h4>
                 <div class="case-text pf-sc-regular">
                   <div v-for="(effect, eIndex) in currentCase.caseEffect" :key="eIndex">
                     {{ effect }}