feat: 一些调整

components/pageLayout/abuot.vue

@@ -24,6 +24,55 @@
       了解更多>>
     </div>
   </div>
+  <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"
+        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"
+      >
+        <div>
+          <div class="flex flex-col">
+            <div class="relative">
+              <span
+                class="text-[#CBCBCB] text-[78px] md:text-[48px] sm:text-base font-bold opacity-35"
+                >CONTACT</span
+              >
+              <h4 class="text-[26px] md:text-[18px] sm:text-xs absolute top-1/3 text-[#424242]">
+                联系我们
+              </h4>
+            </div>
+            <p class="text-xl text-[#6B6B6B] md:text-base sm:text-[8px] sm:leading-[8px] sm:mt-2">
+              欢迎与我们取得联系,我们将竭诚为您服务
+            </p>
+          </div>
+        </div>
+        <div
+          class="flex flex-1 flex-col ml-[100px] md:ml-[30px] sm:ml-[20px] text-[#424242] text-xl md:text-base sm:text-[8px] sm:leading-[8px]"
+        >
+          <div class="py-7 md:py-3 sm:py-1 flex items-center">
+            <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"
+              alt="电话图标"
+            />
+            <span class="block sm:hidden">服务邮箱：</span> XXXXX@jsldjf.com
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup></script>

layouts/default.vue

@@ -103,57 +103,7 @@
     </div>
   </header>
   <slot />
-  <footer>
+  <footer></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"
-          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"
-        >
-          <div>
-            <div class="flex flex-col">
-              <div class="relative">
-                <span
-                  class="text-[#CBCBCB] text-[78px] md:text-[48px] sm:text-base font-bold opacity-35"
-                  >CONTACT</span
-                >
-                <h4 class="text-[26px] md:text-[18px] sm:text-xs absolute top-1/3 text-[#424242]">
-                  联系我们
-                </h4>
-              </div>
-              <p class="text-xl text-[#6B6B6B] md:text-base sm:text-[8px] sm:leading-[8px] sm:mt-2">
-                欢迎与我们取得联系,我们将竭诚为您服务
-              </p>
-            </div>
-          </div>
-          <div
-            class="flex flex-1 flex-col ml-[100px] md:ml-[30px] sm:ml-[20px] text-[#424242] text-xl md:text-base sm:text-[8px] sm:leading-[8px]"
-          >
-            <div class="py-7 md:py-3 sm:py-1 flex items-center">
-              <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"
-                alt="电话图标"
-              />
-              <span class="block sm:hidden">服务邮箱：</span> XXXXX@jsldjf.com
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </footer>
 </template>
 <script setup lang="ts">
 import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
@@ -226,7 +176,9 @@ const navItems = [
   },
   {
     name: '在线商城',
-    path: '/online-store',
+    path: '',
+    break: true,
+    url: 'https://3ktcgr18h1x6x7uwnlob22lviaqfk6b.taobao.com',
   },
   {
     name: '关于我们',

pages/aboutUs.vue

@@ -1,5 +1,30 @@
 <template>
-  <div></div>
+  <div class="w-full h-[888px] md:h-screen sm:h-screen relative">
+    <picture class="absolute inset-0 z-0">
+      <img src="/images/aboutUs/bg.png" loading="eager" class="size-full object-cover" />
+    </picture>
+    <div
+      class="relative z-10 w-full max-w-[1440px] mx-auto h-[calc(100%-68px)] flex items-center md:flex-col md:justify-center md:px-17 sm:flex-col sm:justify-center sm:px-8 text-white"
+    >
+      <div class="pl-56 pr-[188px] relative">
+        <span class="text-[78px] sm:text-[38px] font-bold opacity-35">ABOUT</span>
+        <h2
+          class="text-[44px] sm:text-[24px] font-bold absolute bottom-0 left-1/2 -translate-x-[40%]"
+        >
+          关于我们
+        </h2>
+      </div>
+      <div class="flex flex-col gap-16 md:mt-14 sm:mt-7 sm:gap-8">
+        <div v-for="(item, index) in aboutUs" :key="index" class="flex">
+          <img :src="item.icon" class="size-10 mr-4" />
+          <div>
+            <h4 class="text-2xl font-bold">{{ item.title }}</h4>
+            <p class="text-lg text-[#BBBBBB] mt-4">{{ item.content }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -7,6 +32,25 @@ useSeoMeta({
   title: '关于我们-比特电科',
   description: '关于我们-比特电科',
 })
+
+const aboutUs = [
+  {
+    title: '公司简介',
+    icon: '/images/aboutUs/company.png',
+    content:
+      '比特电科是一家专注于提供EM系列储能边缘智能网关，为工业控制、能源管理提供高性能、高可靠性的解决方案。',
+  },
+  {
+    title: '企业地址',
+    icon: '/images/aboutUs/location.png',
+    content: '北京市海淀区上地十街1号院',
+  },
+  {
+    title: '企业联系人',
+    icon: '/images/aboutUs/user.png',
+    content: '8888-88888888',
+  },
+]
 </script>
 
 <style scoped></style>

pages/index.vue

@@ -4,13 +4,7 @@
       class="relative h-[428px] w-full bg-gradient-to-b from-[#0C0C16] to-[#0C131E] lg:h-[888px]"
     >
       <ClientOnly>
-        <swiper-container
+        <swiper-container ref="containerRef" class="size-full mx-auto" loop pagination>
-          ref="containerRef"
-          class="size-full mx-auto"
-          :autoplay="{ delay: 3000 }"
-          loop
-          pagination
-        >
           <swiper-slide v-for="(slide, idx) in slides" :key="idx" class="size-full relative">
             <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">
@@ -28,16 +22,17 @@
                   >
                     {{ slide.subtitle }}
                   </h2>
-                  <div
+                  <div v-if="slide.tags" class="flex text-lg lg:text-base md:text-base sm:text-sm">
-                    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]"
+                      :class="tag.clx"
+                      class="bg-cover bg-no-repeat bg-center bg-size-full flex items-center justify-center"
+                      :style="{
+                        backgroundImage: `url(${tag.bg})`,
+                      }"
                     >
-                      {{ tag }}
+                      {{ tag.name }}
                     </p>
                   </div>
                 </div>
@@ -83,14 +78,46 @@ const slides = [
     bgSm: '/images/banner/device_sm.png',
     title: '储能工业控制主机 BK-1000',
     subtitle: '超高性价比｜开发周期缩短50%｜电力四级防护',
-    tags: ['低成本', '高可靠性', '全场景适配'],
+    tags: [
+      {
+        name: '低成本',
+        bg: '/images/banner/tag1.png',
+        clx: 'w-[126px] h-[38px] md:w-[100px] md:h-[30px] sm:w-[80px] sm:h-[24px]',
+      },
+      {
+        name: '高可靠性',
+        bg: '/images/banner/tag2.png',
+        clx: 'w-[126px] h-[38px] md:w-[100px] md:h-[30px] sm:w-[80px] sm:h-[24px]',
+      },
+      {
+        name: '全场景适配',
+        bg: '/images/banner/tag3.png',
+        clx: 'w-[148px] h-[38px] md:w-[116px] md:h-[30px] sm:w-[94px] sm:h-[24px]',
+      },
+    ],
   },
   {
     bgLg: '/images/banner/bk2000.png',
     bgSm: '/images/banner/device_sm.png',
     title: '储能工业控制主机 BK-2000',
     subtitle: '超高性价比｜开发周期缩短50%｜电力四级防护',
-    tags: ['低成本', '高可靠性', '全场景适配'],
+    tags: [
+      {
+        name: '低成本',
+        bg: '/images/banner/tag1.png',
+        clx: 'w-[126px] h-[38px] md:w-[100px] md:h-[30px] sm:w-[80px] sm:h-[24px]',
+      },
+      {
+        name: '高可靠性',
+        bg: '/images/banner/tag2.png',
+        clx: 'w-[126px] h-[38px] md:w-[100px] md:h-[30px] sm:w-[80px] sm:h-[24px]',
+      },
+      {
+        name: '全场景适配',
+        bg: '/images/banner/tag3.png',
+        clx: 'w-[148px] h-[38px] md:w-[116px] md:h-[30px] sm:w-[94px] sm:h-[24px]',
+      },
+    ],
   },
 ]
 </script>

pages/products.vue

@@ -0,0 +1,25 @@
+<template>
+  <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">建设中</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">
+// 为404页面设置适当的SEO
+useSeoMeta({
+  title: '产品中心 - 比特电科',
+  description: '产品中心 - 比特电科',
+  robots: 'noindex, nofollow',
+})
+</script>
+
+<style scoped></style>