feat: 一些调整

components/pageLayout/midele.vue

@@ -20,7 +20,7 @@
       @mouseleave="clearActiveIndex()"
     >
       <picture class="absolute inset-0 z-0 text-white">
-        <img :src="item.lgBg" loading="eager" class="size-full" />
+        <img :src="item.lgBg" loading="eager" class="size-full" :alt="item.title" />
       </picture>
       <section class="relative z-10 sm:p-3 size-full flex flex-col">
         <h3

layouts/default.vue

@@ -106,7 +106,11 @@
   <footer>
     <div class="bg-white relative py-[74px] md:py-[40px] sm:py-[10px]">
       <div class="max-w-[1920px] m-auto relative">
-        <img src="/images/about/mapBg.png" class="relative inset-0 w-full h-full object-cover" />
+        <img
+          src="/images/about/mapBg.png"
+          class="relative inset-0 w-full h-full object-cover"
+          alt="公司地图背景"
+        />
         <div
           class="w-[1172px] h-[300px] px-[95px] md:w-[780px] md:h-[180px] sm:w-[360px] sm:h-[80px] md:px-[20px] sm:px-[10px] bg-white absolute bottom-5 md:bottom-2 sm:bottom-1 left-1/2 -translate-x-1/2 flex items-center"
         >
@@ -133,11 +137,16 @@
               <img
                 src="/images/about/location.png"
                 class="size-10 md:size-8 sm:size-4 mr-5 sm:mr-2"
+                alt="位置图标"
               />
               <span class="block sm:hidden">来访地址：</span> 辉煌国际 北京市海淀区上地十街1号院
             </div>
             <div class="py-7 md:py-3 sm:py-1 border-t-[1px] border-[#979797] flex items-center">
-              <img src="/images/about/phone.png" class="size-10 md:size-8 sm:size-4 mr-5 sm:mr-2" />
+              <img
+                src="/images/about/phone.png"
+                class="size-10 md:size-8 sm:size-4 mr-5 sm:mr-2"
+                alt="电话图标"
+              />
               <span class="block sm:hidden">服务邮箱：</span> XXXXX@jsldjf.com
             </div>
           </div>

pages/[...slug].vue

@@ -1,9 +1,25 @@
 <template>
-  <div>
-    <h1>404</h1>
+  <div
+    class="flex flex-col items-center justify-center min-h-screen bg-black text-white py-20 px-4"
+  >
+    <h1 class="text-5xl md:text-6xl font-bold mb-8">404</h1>
+    <p class="text-xl md:text-2xl mb-8">抱歉，您访问的页面不存在</p>
+    <NuxtLink
+      to="/"
+      class="bg-[#52AC63] hover:bg-[#3f8a4e] text-white font-bold py-2 px-6 rounded transition-colors"
+    >
+      返回首页
+    </NuxtLink>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// 为404页面设置适当的SEO
+useSeoMeta({
+  title: '页面未找到 - 比特电科',
+  description: '抱歉，您请求的页面不存在。请返回比特电科首页浏览其他内容。',
+  robots: 'noindex, nofollow',
+})
+</script>
 
 <style scoped></style>

pages/index.vue

@@ -6,38 +6,41 @@
       <ClientOnly>
         <swiper-container
           ref="containerRef"
-          class="max-w-[1920px] size-full mx-auto"
+          class="size-full mx-auto"
           :autoplay="{ delay: 3000 }"
           loop
           pagination
         >
           <swiper-slide v-for="(slide, idx) in slides" :key="idx" class="size-full relative">
-            <img
-              :src="slide.bgLg"
-              loading="eager"
-              class="absolute right-0 h-[100%] object-cover sm:hidden"
-            />
-            <img :src="slide.bgSm" alt="" class="sm:block hidden" />
-            <div class="swiper-banner-info">
-              <h6 class="text-2xl md:text-lg lg:text-xl sm:text-xs font-bold">
-                {{ slide.title }}
-              </h6>
-              <h2
-                class="text-4xl lg:text-3xl md:text-2xl sm:text-base overflow-hidden font-bold text-ellipsis whitespace-pre-line break-words"
-              >
-                {{ slide.subtitle }}
-              </h2>
-              <div
-                v-if="slide.tags"
-                class="flex gap-4 sm:gap-2 text-lg lg:text-base md:text-base sm:text-sm"
-              >
-                <p
-                  v-for="(tag, index) in slide.tags"
-                  :key="index"
-                  class="rounded-full bg-gradient-to-r from-[#69AA25] to-[#13A892] px-[28px] py-[6px] md:px-[16px] md:py-[4px] sm:px-[12px] sm:py-[4px]"
-                >
-                  {{ tag }}
-                </p>
+            <div class="size-full relative flex overflow-hidden items-center sm:items-start">
+              <picture class="absolute w-full h-full left-0 top-0 -z-10">
+                <source media="(max-width: 480px)" :srcset="slide.bgSm" />
+                <source media="(max-width: 1280px)" :srcset="slide.bgLg" />
+                <img :src="slide.bgLg" loading="eager" class="size-full object-cover" />
+              </picture>
+              <div class="w-[1440px] md:w-[870px] sm:w-[300px] sm:top-19 relative mx-auto">
+                <div class="swiper-banner-info">
+                  <h6 class="text-2xl md:text-lg lg:text-xl sm:text-xs font-bold">
+                    {{ slide.title }}
+                  </h6>
+                  <h2
+                    class="text-4xl lg:text-3xl md:text-2xl sm:text-base overflow-hidden font-bold text-ellipsis whitespace-pre-line break-words"
+                  >
+                    {{ slide.subtitle }}
+                  </h2>
+                  <div
+                    v-if="slide.tags"
+                    class="flex gap-4 sm:gap-2 text-lg lg:text-base md:text-base sm:text-sm"
+                  >
+                    <p
+                      v-for="(tag, index) in slide.tags"
+                      :key="index"
+                      class="rounded-full bg-gradient-to-r from-[#69AA25] to-[#13A892] px-[28px] py-[6px] md:px-[16px] md:py-[4px] sm:px-[12px] sm:py-[4px]"
+                    >
+                      {{ tag }}
+                    </p>
+                  </div>
+                </div>
               </div>
             </div>
           </swiper-slide>
@@ -64,6 +67,16 @@ import ElectricPower from '@/components/pageLayout/electricPower.vue'
 import CloudData from '@/components/pageLayout/cloudData.vue'
 import Operation from '@/components/pageLayout/operation.vue'
 import About from '@/components/pageLayout/abuot.vue'
+
+// 添加SEO元信息
+useSeoMeta({
+  title: '比特电科 - 智能边缘网关解决方案',
+  ogTitle: '比特电科 - 智能边缘网关解决方案',
+  description: '比特电科提供高可靠性智能边缘网关解决方案，帮助客户实现工业控制系统的智能化升级',
+  ogDescription: '比特电科提供高可靠性智能边缘网关解决方案，帮助客户实现工业控制系统的智能化升级',
+  ogImage: '/images/banner/bk1000.png',
+})
+
 const slides = [
   {
     bgLg: '/images/banner/bk1000.png',
@@ -84,10 +97,8 @@ const slides = [
 
 <style>
 .swiper-banner-info {
-  @apply absolute bottom-0 left-20 right-0 top-1/2 sm:left-1/2 sm:top-25
-          sm:-translate-y-0 sm:-translate-x-[calc(300px/2)] -translate-y-1/2
-          flex flex-col justify-center sm:justify-normal gap-16   md:gap-4 sm:gap-2
-           xl:w-auto sm:w-[300px] text-white;
+  @apply relative flex flex-col justify-center sm:justify-normal gap-16  md:gap-4 sm:gap-2
+           text-white;
 }
 .title-font {
   @apply text-5xl md:text-4xl sm:text-lg font-bold text-center text-white;