feat: 产品添加

layouts/default.vue

@@ -159,12 +159,12 @@ const navItems = [
     path: '/products',
     children: [
       {
-        name: 'EM系列储能边缘智能网关',
+        name: 'BK-1000',
-        path: '/products/em-series-energy-storage-edge-intelligent-gateway',
+        path: '/products/BK-1000',
       },
       {
-        name: 'EM系列储能边缘智能网关',
+        name: 'BK-2000',
-        path: '/products/em-series-energy-storage-edge-intelligent-gateway',
+        path: '/products/BK-2000',
       },
     ],
   },

pages/aboutUs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-[888px] md:h-screen sm:h-screen relative">
+  <div class="w-full h-screen relative">
     <picture class="absolute inset-0 z-0">
       <img src="/images/aboutUs/bg.png" loading="eager" class="size-full object-cover" />
     </picture>

pages/product.vue

@@ -1,12 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script setup lang="ts">
-useSeoMeta({
-  title: '产品中心-比特电科',
-  description: '产品中心-比特电科',
-})
-</script>
-
-<style scoped></style>

pages/products.vue

@@ -1,25 +0,0 @@
-<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>

pages/products/BK-1000.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div class="h-[888px] w-full">
+      <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="flex flex-col gap-10 text-white justify-center items-center w-[398px]">
+            <h2 class="text-5xl md:text-lg sm:text-xs font-bold">
+              {{ slide.title }}
+            </h2>
+            <div
+              class="text-4xl md:text-2xl sm:text-base overflow-hidden font-bold bg-gradient-to-r from-[#69AA25] to-[#13A892] w-[328px] h-[48px] rounded-full flex items-center justify-center"
+            >
+              {{ slide.subtitle }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="h-[888px] max-w-[1440px] w-full relative mx-auto">
+      <div v-for="item in slide.content" :key="item.title" class="flex gap-10">
+        <div class="px-56">
+          <h3 class="text-5xl font-bold text-[#414141]">
+            {{ item.title }}
+          </h3>
+        </div>
+        <ul>
+          <li v-for="info in item.info" :key="info.label">
+            <span>{{ info.label }}</span>
+            <p v-for="value in info.value" :key="value">{{ value }}</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const slide = {
+  bgLg: '/images/banner/bk1000.png',
+  bgSm: '/images/banner/device_sm.png',
+  title: '储能工业控制主机',
+  subtitle: 'BK-1000',
+  content: [
+    {
+      title: '尺寸与重量',
+      info: [
+        { label: '长度', value: ['162.6mm'] },
+        { label: '宽度', value: ['75.1mm'] },
+        { label: '厚度', value: ['8.4mm'] },
+        {
+          label: '重量',
+          value: [
+            '约226克（含电池）',
+            '*实际尺寸与重量依配置，制造工艺、测量方法的不同可能有所差异。',
+          ],
+        },
+        {
+          label: 'xxxx',
+          value: [
+            '约226克（含电池）',
+            '*实际尺寸与重量依配置，制造工艺、测量方法的不同可能有所差异。',
+          ],
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<style scoped></style>

pages/products/BK-2000.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <h1>BK-2000</h1>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>