fix: footer 语义化seo优化;feat: 404页面

app/components/m-footer.vue

@@ -8,112 +8,142 @@
       <!-- 顶部区域：链接列表 + 联系方式 -->
       <div class="flex flex-col sm:flex-row justify-between items-start gap-60px sm:gap-0">
         <!-- 左侧链接列表 -->
-        <div
+        <nav
           class="flex flex-wrap gap-40px sm:gap-80px w-full sm:w-auto justify-between sm:justify-start lt-sm:hidden"
         >
           <!-- 产品 -->
           <div class="text-left">
-            <div class="mb-16px text-16px text-white pf-sc-semibold">产品</div>
-            <NuxtLink
-              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
-              to="#"
-            >
-              绘管家物业云平台
-            </NuxtLink>
-            <NuxtLink
-              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
-              to="#"
-            >
-              绘服务居民平台
-            </NuxtLink>
-            <NuxtLink
-              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
-              to="#"
-            >
-              智能硬件物联
-            </NuxtLink>
+            <h3 class="mb-16px font-s-16px text-white pf-sc-semibold">产品</h3>
+            <ul class="flex flex-col gap-14px">
+              <li>
+                <NuxtLink
+                  class="font-s-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white"
+                  to="/"
+                >
+                  绘管家物业云平台
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  class="font-s-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white"
+                  to="/"
+                >
+                  绘服务居民平台
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  class="font-s-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white"
+                  to="/"
+                >
+                  智能硬件物联
+                </NuxtLink>
+              </li>
+            </ul>
           </div>
 
           <!-- 解决方案 -->
           <div class="text-left">
-            <div class="mb-16px text-16px text-white pf-sc-semibold">解决方案</div>
-            <NuxtLink
-              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
-              to="#"
-            >
-              智慧收费系统
-            </NuxtLink>
-            <NuxtLink
-              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
-              to="#"
-            >
-              综合工单调度
-            </NuxtLink>
-            <NuxtLink
-              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
-              to="#"
-            >
-              移动巡检巡更
-            </NuxtLink>
-            <NuxtLink
-              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
-              to="#"
-            >
-              智慧车场管理
-            </NuxtLink>
-            <NuxtLink
-              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
-              to="#"
-            >
-              数据决策中心
-            </NuxtLink>
+            <h3 class="mb-16px font-s-16px text-white pf-sc-semibold">解决方案</h3>
+            <ul class="flex flex-col gap-14px">
+              <li>
+                <NuxtLink
+                  class="font-s-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white"
+                  to="/"
+                >
+                  智慧收费系统
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  class="font-s-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white"
+                  to="/"
+                >
+                  综合工单调度
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  class="font-s-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white"
+                  to="/"
+                >
+                  移动巡检巡更
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  class="font-s-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white"
+                  to="/"
+                >
+                  智慧车场管理
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  class="font-s-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white"
+                  to="/"
+                >
+                  数据决策中心
+                </NuxtLink>
+              </li>
+            </ul>
           </div>
 
           <!-- 关于绘家 -->
           <div class="text-left">
-            <div class="mb-16px text-16px text-white pf-sc-semibold">关于绘家</div>
-            <NuxtLink
-              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
-              to="#"
-            >
-              公司简介
-            </NuxtLink>
-            <NuxtLink
-              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
-              to="#"
-            >
-              客户案例
-            </NuxtLink>
-            <NuxtLink
-              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
-              to="#"
-            >
-              知识产权
-            </NuxtLink>
-            <NuxtLink
-              class="block mb-14px text-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white last:mb-0"
-              to="#"
-            >
-              加入我们
-            </NuxtLink>
+            <h3 class="mb-16px font-s-16px text-white pf-sc-semibold">关于绘家</h3>
+            <ul class="flex flex-col gap-14px">
+              <li>
+                <NuxtLink
+                  class="font-s-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white"
+                  to="/about"
+                >
+                  公司简介
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  class="font-s-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white"
+                  to="/"
+                >
+                  客户案例
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  class="font-s-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white"
+                  to="/"
+                >
+                  知识产权
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  class="font-s-14px lh-20px text-#9CA0A7 no-underline transition-colors duration-300 hover:text-white"
+                  to="/"
+                >
+                  加入我们
+                </NuxtLink>
+              </li>
+            </ul>
           </div>
-        </div>
+        </nav>
 
         <!-- 右侧联系方式 -->
         <div class="flex flex-col sm:flex-row gap-40px sm:gap-123px w-full sm:w-auto">
           <div class="text-left lt-sm:text-center">
-            <div class="text-16px lh-22px text-white pf-sc-semibold">关注或联系我们</div>
-            <div class="text-14px lh-22px text-#94a3b8 mt-16px">
+            <div class="font-s-16px lh-22px text-white pf-sc-semibold">关注或联系我们</div>
+            <div class="font-s-14px lh-22px text-#94a3b8 mt-16px">
               <span class="lt-sm:hidden">电话：400-600-7709</span>
               <i class="i-custom-mobile-phone lt-sm:h-58px lt-sm:w-552px"></i>
             </div>
-            <div class="text-14px lh-22px text-#94a3b8 mt-16px">
+            <div class="font-s-14px lh-22px text-#94a3b8 mt-16px">
               地址：海南省海口市美兰区西溪里商业街7号楼A127
             </div>
           </div>
           <div class="flex flex-col items-start sm:items-center lt-sm:items-center">
             <i class="i-custom-qrcode wh-136px"></i>
-            <div class="mt-12px text-16px text-#white lh-22px pf-sc-regular">扫一扫关注我们</div>
+            <div class="mt-12px font-s-16px text-#white lh-22px pf-sc-regular">扫一扫关注我们</div>
           </div>
         </div>
       </div>
@@ -136,7 +166,7 @@
             class="flex items-center gap-4px hover:text-white transition-colors"
           >
             <div
-              class="w-14px h-14px bg-contain bg-no-repeat bg-center"
+              class="wh-14px bg-contain bg-no-repeat bg-center"
               style="
                 background-image: url('https://img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png');
               "

app/error.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="error-page flex-center flex-col min-h-100vh bg-#F6F8FD">
+    <div class="error-content text-center">
+      <div class="text-120px font-bold text-#0F67F8 mb-24px">{{ error?.statusCode }}</div>
+      <h1 class="text-24px text-#091221 mb-16px font-bold">
+        {{ error?.statusCode === 404 ? '页面未找到' : '系统出错了' }}
+      </h1>
+      <p class="text-16px text-#64748b mb-40px">
+        {{
+          error?.statusCode === 404
+            ? '抱歉，您访问的页面不存在或已被移除'
+            : '抱歉，服务器暂时无法处理您的请求，请稍后再试'
+        }}
+      </p>
+      <button class="btn-primary" @click="handleError">返回首页</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { NuxtError } from '#app'
+
+  const props = defineProps({
+    error: Object as () => NuxtError,
+  })
+
+  const handleError = () => {
+    clearError({ redirect: '/' })
+  }
+</script>
+
+<style scoped lang="scss">
+  .btn-primary {
+    @apply px-32px py-12px bg-#0F67F8 text-white rounded-8px font-medium transition-all hover:opacity-90 active:scale-95;
+    box-shadow: 0 4px 12px rgba(15, 103, 248, 0.25);
+  }
+</style>