feat: 官网首页

components/SwiperSlider3D.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="carousel-container">
+    <swiper-container
+      :modules="[SwiperPagination, SwiperAutoplay, SwiperNavigation]"
+      :centered-slides="true"
+      :space-between="-1000"
+      :loop="false"
+      :slides-per-view="2.5"
+      :initial-slide="1"
+      @slideChange="onSlideChange"
+      :pagination="{
+        clickable: true,
+        dynamicBullets: true,
+      }"
+      :navigation="false"
+      :autoplay="{
+        delay: 25000,
+        disableOnInteraction: false,
+      }"
+      :grabCursor="true"
+      class="carousel"
+    >
+      <slot></slot>
+    </swiper-container>
+  </div>
+</template>
+
+<script setup>
+import { Pagination, Navigation, Autoplay } from 'swiper/modules'
+
+const SwiperPagination = Pagination
+const SwiperNavigation = Navigation
+const SwiperAutoplay = Autoplay
+
+function onSlideChange(swiper) {
+  console.log('swiper')
+}
+</script>
+
+<style scoped>
+.carousel-container {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+}
+
+.carousel {
+  width: 100%;
+  height: 100%;
+}
+
+:deep(.swiper-slide) {
+  transition:
+    transform 0.6s,
+    opacity 0.6s;
+  opacity: 0.1;
+  transform: scale(0.8);
+  filter: blur(1px);
+  overflow: hidden;
+  transform-style: preserve-3d;
+  perspective: 1000px;
+}
+:deep(.swiper-slide-prev),
+:deep(.swiper-slide-next) {
+  opacity: 0.3;
+  filter: blur(12px);
+}
+
+:deep(.swiper-slide-active) {
+  opacity: 1;
+  transform: scale(1);
+  filter: blur(0);
+  z-index: 10;
+}
+
+.slide {
+  height: 100%;
+  background-color: #0f172a;
+  color: white;
+  overflow: hidden;
+  border-radius: 16px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+
+/* 自定义Swiper分页和导航按钮样式 */
+:deep(.swiper-pagination-bullet) {
+  background: white;
+  opacity: 0.5;
+}
+
+:deep(.swiper-pagination-bullet-active) {
+  background: #60a5fa;
+  opacity: 1;
+}
+:deep(.swiper-slide-active) div {
+  filter: brightness(0.7);
+}
+
+:deep(.swiper-slide-active) div {
+  transform: translateZ(30px);
+  transition: transform 0.3s ease;
+}
+:deep(.swiper-slide-next) {
+}
+:deep(.swiper-button-prev),
+:deep(.swiper-button-next) {
+  color: white;
+  background: rgba(0, 0, 0, 0.3);
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  transition: background 0.3s ease;
+}
+
+:deep(.swiper-button-prev:hover),
+:deep(.swiper-button-next:hover) {
+  background: rgba(0, 0, 0, 0.6);
+}
+
+:deep(.swiper-button-prev:after),
+:deep(.swiper-button-next:after) {
+  font-size: 1.5rem;
+}
+</style>

components/pageLayout/abuot.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    class="mx-auto h-[824px] md:h-[358px] sm:h-[198px] bg-cover bg-no-repeat overflow-hidden relative"
+  >
+    <picture class="absolute inset-0 z-0">
+      <source media="(max-width: 1024px)" srcset="/images/about/bg_sm.png" />
+      <source media="(max-width: 1025px)" srcset="/images/about/bg_lg.png" />
+      <img src="/images/about/bg_lg.png" loading="eager" class="size-full object-cover" />
+    </picture>
+    <div
+      class="text-white font-bold text-center mt-[198px] md:mt-[42px] sm:mt-[20px] flex flex-col items-center relative z-20"
+    >
+      <span class="text-7xl md:text-6xl sm:text-3xl opacity-35">ABUOT</span>
+      <span class="text-4xl md:text-4xl sm:text-base relative -top-8">关于我们</span>
+    </div>
+    <div
+      class="text-white font-bold text-center mt-17 md:mt-5 sm:mt-3 text-[28px] md:text-2xl sm:text-xs max-w-[1440px] mx-auto relative z-20 break-all px-48 md:px-20 sm:px-10"
+    >
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+    </div>
+    <div
+      class="font-bold text-center mt-13 md:mt-5 sm:mt-3 text-3xl md:text-base sm:text-xs text-[#15A351]"
+    >
+      了解更多>>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

components/pageLayout/cloudData.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="max-w-[1400px] mx-auto pb-10 sm:pb-5">
+    <h2 class="title-font py-11 md:py-8 sm:py-4">应用数据</h2>
+    <div class="h-[580px] md:h-[382px] md:w-[760px] sm:w-[348px] sm:h-[176px] mx-auto">
+      <ClientOnly>
+        <MovieCarousel3D class="sm:hidden md:hidden">
+          <swiper-slide v-for="(movie, index) in imgList" :key="index" class="size-full">
+            <div class="w-full h-full">
+              <img :src="movie" alt="" class="w-full h-full object-cover" />
+            </div>
+          </swiper-slide>
+        </MovieCarousel3D>
+        <swiper-container
+          ref="containerRef"
+          class="size-full mx-auto hidden sm:block md:block"
+          :autoplay="{ delay: 3000 }"
+          loop
+          pagination
+        >
+          <swiper-slide v-for="(movie, index) in imgList" :key="index" class="size-full">
+            <div class="w-full h-full">
+              <img :src="movie" alt="" class="w-full h-full object-cover" />
+            </div>
+          </swiper-slide>
+        </swiper-container>
+      </ClientOnly>
+    </div>
+    <div
+      class="flex gap-[144px] md:gap-[72px] sm:gap-[36px] justify-center mt-[58px] md:mt-[30px] sm:mt-[15px]"
+    >
+      <div
+        v-for="(item, index) in cloudDataList"
+        :key="index"
+        class="flex flex-col gap-[18px] md:gap-2 sm:gap-1 justify-center"
+      >
+        <img :src="item.icon" alt="" class="size-16 md:size-14 sm:size-7 object-cover mx-auto" />
+        <h3 class="text-[26px] md:text-xl sm:text-[10px] sm:leading-[10px] text-white font-bold">
+          {{ item.title }}
+        </h3>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import MovieCarousel3D from '~/components/SwiperSlider3D.vue'
+const imgList = ['/images/cloudData/7m.png', '/images/cloudData/7m.png', '/images/cloudData/7m.png']
+const cloudDataList = [
+  {
+    icon: '/images/cloudData/7icon1.png',
+    title: '站点拓扑',
+  },
+  {
+    icon: '/images/cloudData/7icon2.png',
+    title: '全数据曲线',
+  },
+  {
+    icon: '/images/cloudData/7icon3.png',
+    title: '站点收益',
+  },
+  {
+    icon: '/images/cloudData/7icon4.png',
+    title: '故障视图',
+  },
+  {
+    icon: '/images/cloudData/7icon5.png',
+    title: '自定义规则',
+  },
+]
+</script>
+
+<style lang="scss" scoped></style>

components/pageLayout/device.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="relative h-[976px] mt-17 sm:h-[688px] md:h-[1400px] md:mt-6 sm:mt-3">
+    <h2 class="title-font pt-12 pb-10 md:pb-7 sm:pt-[16px] sm:pb-[12px] relative z-10">设备接口</h2>
+    <picture class="absolute inset-0 z-0">
+      <source media="(max-width: 1024px)" :srcset="'/images/deviceInterface/bg_sm.png'" />
+      <source media="(max-width: 1025px)" :srcset="'/images/deviceInterface/bg_lg.png'" />
+      <img src="/images/deviceInterface/bg_lg.png" loading="eager" class="size-full object-cover" />
+    </picture>
+    <div class="relative w-full h-[calc(100%-136px)] z-20 text-white max-w-[1440px] mx-auto px-4">
+      <Tabs default-value="BK-2000" class="relative">
+        <TabsList class="bg-transparent gap-x-4 w-full">
+          <TabsTrigger value="BK-1000" class="tabs-trigger"> BK-1000 </TabsTrigger>
+          <TabsTrigger value="BK-2000" class="tabs-trigger"> BK-2000 </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="BK-1000" class="size-full">
+          <ClientOnly>
+            <div
+              style="background-image: url('/images/deviceInterface/head_bg.png')"
+              class="tabs-content-head"
+            >
+              <span class="text-white text-xl md:text-xl sm:text-[10px] font-bold"
+                >BK-1000 参数表</span
+              >
+            </div>
+            <div class="tabs-content-devices">
+              <img
+                src="/images/deviceInterface/bk1000a.png"
+                loading="eager"
+                class="tabs-content-img"
+              />
+              <img
+                src="/images/deviceInterface/bk1000b.png"
+                loading="eager"
+                class="tabs-content-img"
+              />
+            </div>
+          </ClientOnly>
+        </TabsContent>
+        <TabsContent value="BK-2000" class="size-full">
+          <ClientOnly>
+            <div
+              style="background-image: url('/images/deviceInterface/head_bg.png')"
+              class="tabs-content-head"
+            >
+              <span class="text-white text-xl md:text-xl sm:text-[10px] font-bold"
+                >BK-2000 参数表</span
+              >
+            </div>
+            <div class="tabs-content-devices">
+              <img
+                src="/images/deviceInterface/bk2000a.png"
+                loading="eager"
+                class="tabs-content-img"
+              />
+
+              <img
+                src="/images/deviceInterface/bk2000b.png"
+                loading="eager"
+                class="tabs-content-img"
+              />
+            </div>
+          </ClientOnly>
+        </TabsContent>
+      </Tabs>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+</script>
+<style>
+.tabs-trigger {
+  @apply relative bg-transparent text-2xl text-[rgba(255,255,255,0.55)] md:text-2xl sm:text-sm
+  after:absolute after:bottom-0 after:left-0 after:right-0 after:h-1 after:w-auto after:origin-top-right after:scale-x-0 
+  after:bg-gradient-to-r from-[#11974A] to-[#23C669]
+  data-[state=active]:text-[#15A351]
+  after:transition-[transform] after:duration-300 after:content-[''] data-[state=active]:after:origin-top-left data-[state=active]:after:scale-x-100;
+}
+.tabs-content-head {
+  @apply w-[446px] h-[50px] bg-cover bg-no-repeat flex items-center pl-15 mt-13 md:pl-10 sm:pl-5 md:w-[350px] md:h-[44px] md:mt-6 sm:w-[176px] sm:h-[22px] sm:mt-3;
+}
+.tabs-content-devices {
+  @apply flex gap-21 justify-center mt-17 md:items-center md:mt-[1.8rem] sm:gap-24 sm:mt-10 md:flex-col sm:flex-col md:gap-32;
+}
+.tabs-content-img {
+  @apply object-cover w-[700px] sm:w-[274px] mx-auto;
+}
+</style>

components/pageLayout/electricPower.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="relative mt-17 md:mt-6 sm:mt-3 pb-[92px] md:pb-[32px] sm:pb-[16px]">
+    <h2 class="title-font pt-12 pb-10 md:pb-7 sm:pt-[16px] sm:pb-[12px] relative z-10">
+      电力四级防护
+    </h2>
+    <picture class="absolute inset-0 z-0">
+      <source media="(max-width: 1024px)" srcset="/images/electricPower/bg_sm.png" />
+      <source media="(max-width: 1025px)" srcset="/images/electricPower/bg_lg.png" />
+      <img src="/images/electricPower/bg_lg.png" loading="eager" class="size-full object-cover" />
+    </picture>
+    <div
+      class="relative w-full h-[calc(100%-136px)] md:h-[calc(100%-100px)] sm:h-[calc(100%-60px)] z-20 text-white max-w-[1440px] mx-auto flex items-center justify-center gap-10"
+    >
+      <div class="md:hidden sm:hidden">
+        <div class="flex gap-8 justify-center items-center">
+          <img src="/images/electricPower/c1.png" loading="eager" class="w-[419px] h-[582px]" />
+          <img src="/images/electricPower/c2.png" loading="eager" class="w-[419px] h-[582px]" />
+        </div>
+      </div>
+      <div class="hidden md:block sm:block">
+        <div class="flex gap-8 md:gap-4 sm:gap-2 justify-center items-center">
+          <img
+            src="/images/electricPower/c1.png"
+            loading="eager"
+            class="md:w-[178px] md:h-[252px] sm:w-[89px] sm:h-[126px]"
+          />
+          <img
+            src="/images/electricPower/c2.png"
+            loading="eager"
+            class="md:w-[178px] md:h-[252px] sm:w-[89px] sm:h-[126px]"
+          />
+        </div>
+      </div>
+
+      <div
+        class="w-[580px] h-[698px] md:w-[308px] md:h-[396px] sm:w-[154px] sm:h-[198px] md:px-0 sm:px-0 px-13 md:py-6 sm:py-3 backdrop-blur-xl rounded-3xl md:rounded-xl sm:rounded-lg flex flex-col justify-center"
+        style="
+          background-image: linear-gradient(
+            270deg,
+            rgba(3, 10, 41, 0.64) 4%,
+            rgba(17, 33, 86, 0.24) 97%
+          );
+        "
+      >
+        <div
+          v-for="(item, idx) in electricPowerList"
+          :key="idx"
+          class="h-[150px] md:h-[96px] sm:h-[48px] md:pl-7 sm:pl-4 md:py-4 sm:py-2 w-full flex items-center border-b border-white/20 border-dashed gap-9 md:gap-6 sm:gap-2"
+          :class="{ 'md:border-b-0 sm:border-b-0': idx === electricPowerList.length - 1 }"
+        >
+          <img :src="item.img" loading="eager" class="size-16 md:size-10 sm:size-5" />
+          <div class="text-white">
+            <h6 class="text-3xl md:text-xl sm:text-xs font-bold">{{ item.title }}</h6>
+            <div
+              class="text-xl opacity-75 mt-4 md:mt-[6px] md:leading-[16px] sm:leading-[8px] sm:mt-[3px] md:text-base sm:text-[8px]"
+            >
+              {{ item.desc }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const electricPowerList = [
+  {
+    title: '电气安全',
+    desc: '过载与短路防护',
+    img: '/images/electricPower/icon1.png',
+  },
+  {
+    title: '人身安全',
+    desc: '绝缘与隔离防护',
+    img: '/images/electricPower/icon2.png',
+  },
+  {
+    title: '系统稳定性',
+    desc: '电磁与浪涌防护，4kV冲击',
+    img: '/images/electricPower/icon3.png',
+  },
+  {
+    title: '可靠性根基',
+    desc: '-40℃~85℃宽温域运行能力',
+    img: '/images/electricPower/icon4.png',
+  },
+]
+</script>
+
+<style scoped></style>

components/pageLayout/midele.vue

@@ -0,0 +1,66 @@
+<template>
+  <h2 class="title-font pt-20 sm:p-4 md:p-8 pb-12">全生态中间件</h2>
+  <div
+    class="max-w-[1440px] mx-auto md:p-5 bg-black relative flex items-center justify-center pb-[107px] md:pb-17 sm:pb-10"
+  >
+    <div
+      v-for="(item, idx) in middleWareList"
+      :key="idx"
+      class="relative shadow-[0_0_4px_0_rgba(7,6,44,0.61)] rounded-xl bg-cover overflow-hidden"
+      :class="item.clx"
+    >
+      <picture class="absolute inset-0 z-0">
+        <img :src="item.lgBg" loading="eager" class="size-full" />
+      </picture>
+      <section class="relative z-10 sm:p-3 size-full flex flex-col">
+        <h3
+          class="text-[#5897FF] text-5xl md:text-2xl md:mt-6 sm:text-xs mt-15 sm:mt-3 text-center font-bold"
+        >
+          {{ item.title }}
+        </h3>
+        <div
+          class="text-[#A4B0B7] flex flex-col mt-21 md:mt-6 sm:mt-3 items-center text-3xl md:text-base sm:text-[8px] sm:leading-[14px] gap-9 md:gap-4 sm:gap-2"
+        >
+          <p v-for="(content, idx) in item.contentList" :key="idx" class="text-center">
+            {{ content }}
+          </p>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const middleWareList = [
+  {
+    title: '基础协议中间件',
+    contentList: ['DI/DO/RS485/', 'Can/Led/MQTT/', 'HTTP/TCP/UDP协议'],
+    lgBg: '/images/middle/4s_lg.jpg',
+    clx: 'w-[540px] h-[584px] md:w-[234px] md:h-[288px] sm:w-[126px] sm:h-[142px] relative right-[-30px] md:right-[-16px] sm:right-[-8px]',
+  },
+  {
+    title: '增强中间件',
+    contentList: [
+      'IEC104协议',
+      'DL/T645协议',
+      'ModbusTCP Server/Client',
+      'ModbusRTU Server/Client',
+    ],
+    lgBg: '/images/middle/4m_lg.jpg',
+    clx: 'w-[612px] h-[678px] md:w-[266px] md:h-[342px] sm:w-[138px] sm:h-[172px] relative z-[20] ',
+  },
+  {
+    title: '专业中间件',
+    contentList: [
+      '日志、对时SDK',
+      '时序数据库、SQL数据库',
+      'QT HMIS、OTA升级SDK',
+      '云端数据交互SDK',
+    ],
+    lgBg: '/images/middle/4s_lg.jpg',
+    clx: 'w-[540px] h-[584px] md:w-[234px] md:h-[288px] sm:w-[126px] sm:h-[142px] relative left-[-30px] md:left-[-16px] sm:left-[-8px] ',
+  },
+]
+</script>
+
+<style scoped></style>

components/pageLayout/operation.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="max-w-[1920px] relative mx-auto">
+    <h2 class="title-font py-11 pb-20 md:py-8 sm:py-4">运维系统</h2>
+    <div class="size-full relative -left-48 sm:hidden md:hidden">
+      <img src="/images/operation/bg_lg.png" loading="eager" class="size-full object-cover" />
+    </div>
+    <div class="size-full relative hidden sm:block md:block">
+      <img src="/images/operation/bg_sm.png" loading="eager" class="size-full object-cover" />
+    </div>
+    <div class="flex flex-col gap-8 absolute right-28 top-1/2 -translate-y-1/2 md:hidden sm:hidden">
+      <div
+        v-for="(item, index) in operationList"
+        :key="index"
+        class="h-[96px] w-[397px] pl-3 bg-[rgba(85,85,86,0.38)] flex items-center"
+      >
+        <div
+          style="background-image: linear-gradient(134deg, #3023ae 0%, #6dacd7 100%)"
+          class="w-[115px] h-full flex items-center justify-center"
+        >
+          <img :src="item.icon" class="size-16 md:size-14 sm:size-7 object-cover" />
+        </div>
+        <h6
+          class="text-[26px] md:text-xl sm:text-[10px] pl-8 sm:leading-[10px] text-white font-bold"
+        >
+          {{ item.title }}
+        </h6>
+      </div>
+    </div>
+    <div class="hidden md:block sm:block w-full relative -top-[10rem] sm:-top-[2rem]">
+      <div class="flex flex-wrap md:gap-6 sm:gap-2 justify-center">
+        <div
+          v-for="(item, index) in operationList.slice(0, 2)"
+          :key="index"
+          class="md:h-[66px] md:w-[210px] sm:w-[100px] sm:h-[28px] md:pl-2 sm:pl-1 bg-[rgba(85,85,86,0.38)] flex items-center"
+        >
+          <div
+            style="background-image: linear-gradient(134deg, #3023ae 0%, #6dacd7 100%)"
+            class="md:w-[64px] sm:w-[32px] h-full flex items-center justify-center"
+          >
+            <img :src="item.icon" class="md:size-8 sm:size-4 object-cover" />
+          </div>
+          <h6
+            class="text-[26px] md:text-xl sm:text-[10px] md:pl-6 sm:pl-2 sm:leading-[10px] text-white font-bold"
+          >
+            {{ item.title }}
+          </h6>
+        </div>
+      </div>
+      <div class="flex flex-wrap md:gap-6 sm:gap-2 justify-center mt-4">
+        <div
+          v-for="(item, index) in operationList.slice(2, 5)"
+          :key="index"
+          class="md:h-[66px] md:w-[210px] sm:w-[100px] sm:h-[28px] md:pl-2 sm:pl-1 bg-[rgba(85,85,86,0.38)] flex items-center"
+        >
+          <div
+            style="background-image: linear-gradient(134deg, #3023ae 0%, #6dacd7 100%)"
+            class="md:w-[64px] sm:w-[32px] h-full flex items-center justify-center"
+          >
+            <img :src="item.icon" class="md:size-8 sm:size-4 object-cover" />
+          </div>
+          <h6
+            class="text-[26px] md:text-xl sm:text-[10px] md:pl-6 sm:pl-2 sm:leading-[10px] text-white font-bold"
+          >
+            {{ item.title }}
+          </h6>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const operationList = [
+  {
+    title: '设备信息',
+    icon: '/images/operation/8icon1.png',
+  },
+  {
+    title: '设备自检',
+    icon: '/images/operation/8icon2.png',
+  },
+  {
+    title: '设备日志',
+    icon: '/images/operation/8icon3.png',
+  },
+  {
+    title: 'OTA升级',
+    icon: '/images/operation/8icon4.png',
+  },
+  {
+    title: '网络配置',
+    icon: '/images/operation/8icon5.png',
+  },
+]
+</script>
+
+<style scoped></style>

components/pageLayout/scenarios.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="mx-auto">
+    <h2 class="title-font py-11 md:py-8 sm:py-4">应用场景</h2>
+    <div
+      class="grid grid-cols-2 gap-x-20 pl-12 md:pl-10 sm:pl-4 md:gap-8 sm:gap-4 gap-y-8 md:gap-y-6 sm:gap-y-[12px] max-w-[1440px] mx-auto md:px-10 sm:px-4"
+    >
+      <div
+        v-for="(item, idx) in sceneList"
+        :key="idx"
+        class="w-full h-[366px] md:h-[237px] sm:h-[118px] relative"
+      >
+        <picture class="absolute inset-0 z-0">
+          <source media="(max-width: 1024px)" :srcset="item.smBg" />
+          <source media="(max-width: 1025px)" :srcset="item.lgBg" />
+          <img :src="item.lgBg" loading="eager" class="size-full object-cover" />
+        </picture>
+        <div
+          class="absolute -left-10 md:-left-5 sm:-left-1 pl-12 leading-[78px] md:leading-[40px] sm:leading-[20px] z-10 w-[530px] h-[78px] md:w-[214px] md:h-[40px] sm:w-[160px] sm:h-[20px] bg-no-repeat bg-center text-white text-4xl md:text-2xl sm:text-xs font-bold"
+          style="
+            background-image: linear-gradient(
+              90deg,
+              #0b207c 0%,
+              rgba(16, 73, 119, 0.56) 54%,
+              rgba(14, 27, 111, 0) 100%
+            );
+          "
+        >
+          {{ item.title }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const sceneList = [
+  {
+    title: '工商业储能',
+    lgBg: '/images/scenarios/6.1_lg.png',
+    smBg: '/images/scenarios/6.1_sm.png',
+  },
+  {
+    title: '移动储能',
+    lgBg: '/images/scenarios/6.2_lg.png',
+    smBg: '/images/scenarios/6.2_sm.png',
+  },
+  {
+    title: '微电网',
+    lgBg: '/images/scenarios/6.3_lg.png',
+    smBg: '/images/scenarios/6.3_sm.png',
+  },
+  {
+    title: '其他电力应用',
+    lgBg: '/images/scenarios/6.4_lg.png',
+    smBg: '/images/scenarios/6.4_sm.png',
+  },
+]
+</script>
+
+<style scoped></style>

components/pageLayout/serce.vue

@@ -0,0 +1,91 @@
+<template>
+  <h2 class="title-font pt-12 pb-10 md:pb-7 sm:pt-[16px] sm:pb-[12px]">服务矩阵</h2>
+  <div class="grid grid-cols-8 gap-[24px] max-w-[1440px] mx-auto sm:hidden md:hidden">
+    <div v-for="(item, idx) in serveList" :key="idx" :class="item.clx">
+      <picture class="absolute inset-0 z-0">
+        <source media="(max-width: 480px)" :srcset="item.smBg" />
+        <source media="(max-width: 1280px)" :srcset="item.lgBg" />
+        <img :src="item.lgBg" loading="eager" class="size-full object-cover" />
+      </picture>
+      <section class="relative z-10 p-6 md:p-4 size-full">
+        <h3 class="text-white text-3xl md:text-lg font-bold">{{ item.title }}</h3>
+        <div class="text-[#A4B0B7] flex flex-col lg:text-lg gap-2 md:mt-4 mt-9">
+          <p v-for="(content, idx) in item.contentList" :key="idx">{{ content }}</p>
+        </div>
+      </section>
+    </div>
+  </div>
+  <div class="hidden md:block sm:block">
+    <div class="flex flex-wrap gap-4 mx-auto justify-center size-full">
+      <div
+        v-for="(item, idx) in serveList"
+        :key="idx"
+        class="relative w-[178px] h-[184px] md:w-[320px] md:h-[330px] md:py-6 sm:py-3 md:px-8 sm:px-4"
+      >
+        <picture class="absolute inset-0 z-0">
+          <source media="(max-width: 1024px)" :srcset="item.smBg" />
+          <source media="(max-width: 1025px)" :srcset="item.lgBg" />
+          <img :src="item.lgBg" loading="eager" class="size-full object-cover" />
+        </picture>
+        <section class="relative z-10 size-full">
+          <h3 class="text-white text-xs font-bold">{{ item.title }}</h3>
+          <div
+            class="text-[#A4B0B7] flex flex-col md:gap-4 sm:gap-2 md:mt-6 sm:mt-3 md:text-lg sm:text-[10px]"
+          >
+            <p v-for="(content, idx) in item.contentList" :key="idx">{{ content }}</p>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const serveList = [
+  {
+    title: '丰富的接口',
+    lgBg: '/images/serve/2.1_lg.png',
+    smBg: '/images/serve/2.1_sm.png',
+    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
+    clx: 'aspect-[1/1.0585] col-span-2 relative sm:aspect-auto sm:w-[160px] sm:h-[166px]',
+  },
+  {
+    title: '完美的中间件生态',
+    lgBg: '/images/serve/2.2_lg.png',
+    smBg: '/images/serve/2.2_sm.png',
+    contentList: ['MQTT', 'OPC UA', 'Modbus', 'OPC UA', 'Modbus', '……'],
+    clx: 'aspect-[1/1.0585]  relative col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
+  },
+  {
+    title: '电力四级防护',
+    lgBg: '/images/serve/2.3_lg.png',
+    smBg: '/images/serve/2.3_sm.png',
+    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
+    clx: 'aspect-[1/1.0585] relative col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
+  },
+  {
+    title: '运维系统工具',
+    lgBg: '/images/serve/2.4_lg.png',
+    smBg: '/images/serve/2.4_sm.png',
+    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
+    clx: 'aspect-[1/1.0585] col-span-2 relative sm:aspect-auto sm:w-[160px] sm:h-[166px]',
+  },
+
+  {
+    title: '储能家EMS应用',
+    lgBg: '/images/serve/2.5_lg.png',
+    smBg: '/images/serve/2.5_sm.png',
+    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
+    clx: 'aspect-[2.5/1.0158] col-span-5 relative sm:aspect-auto sm:w-[160px] sm:h-[166px]',
+  },
+  {
+    title: '云端储能平台',
+    lgBg: '/images/serve/2.6_lg.png',
+    smBg: '/images/serve/2.6_sm.png',
+    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
+    clx: 'aspect-[1.5/1.0158] col-span-3 relative sm:aspect-auto sm:w-[160px] sm:h-[166px]',
+  },
+]
+</script>
+
+<style></style>

components/ui/tabs/Tabs.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>

components/ui/tabs/TabsContent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TabsContent, type TabsContentProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsContent
+    :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

components/ui/tabs/TabsList.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TabsList, type TabsListProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn(
+      'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>

components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'inline-flex items-center justify-center whitespace-nowrap px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="truncate">
+      <slot />
+    </span>
+  </TabsTrigger>
+</template>

components/ui/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'

layouts/default.vue

@@ -104,7 +104,43 @@
   </header>
   <slot />
   <footer>
-    <p>版权所有 © 2025 比特电科</p>
+    <div class="bg-white relative py-[74px] md:py-[40px] sm:py-[10px]">
+      <div class="max-w-[1440px] h-[638px] md:h-[362px] sm:h-[166px] m-auto relative">
+        <img src="/images/about/mapBg.png" class="absolute inset-0" />
+        <div
+          class="w-[1172px] h-[300px] px-[95px] md:w-[780px] md:h-[180px] sm-[300px] sm:hidden sm:h-[150px] md:px-[20px] sm:px-[10px] bg-white absolute bottom-5 md:-bottom-6 sm:bottom-0 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-base absolute top-1/3 text-[#424242]">
+                  联系我们
+                </h4>
+              </div>
+              <p class="text-xl text-[#6B6B6B] md:text-base sm:text-sm">
+                欢迎与我们取得联系,我们将竭诚为您服务
+              </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-sm"
+          >
+            <div class="py-7 md:py-3 sm:py-2 flex items-center">
+              <img src="/images/about/location.png" class="size-10 md:size-8 sm:size-6 mr-5" />
+              来访地址：辉煌国际 北京市海淀区上地十街1号院
+            </div>
+            <div class="py-7 md:py-3 sm:py-2 border-t-[1px] border-[#979797] flex items-center">
+              <img src="/images/about/phone.png" class="size-10 md:size-8 sm:size-6 mr-5" />
+              服务邮箱：XXXXX@jsldjf.com
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </footer>
 </template>
 <script setup lang="ts">
@@ -136,6 +172,10 @@ const toggleNavbar = (open: boolean) => {
 }
 
 function onNavPush(nav: any) {
+  if (!!nav.break) {
+    window.open(nav.url, '_blank')
+    return
+  }
   router.push(nav.path)
 }
 
@@ -168,7 +208,9 @@ const navItems = [
   },
   {
     name: '技术资料',
-    path: '/technical-materials',
+    path: '',
+    break: true,
+    url: 'http://62.234.18.176:5181/',
   },
   {
     name: '在线商城',

nuxt.config.ts

@@ -1,7 +1,6 @@
 export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
   modules: [
-    'motion-v/nuxt',
     '@nuxtjs/tailwindcss',
     'shadcn-nuxt',
     '@nuxt/icon',

package.json

@@ -17,7 +17,7 @@
     "motion-v": "1.0.0-alpha.1",
     "nuxt": "^3.16.1",
     "nuxt-swiper": "2.0.0",
-    "reka-ui": "^2.1.1",
+    "reka-ui": "^2.2.0",
     "shadcn-nuxt": "1.0.3",
     "simplex-noise": "^4.0.3",
     "vue": "^3.5.13",

pages/index.vue

@@ -1,9 +1,9 @@
 <template>
   <main class="w-full bg-black lg:min-w-[1200px]">
-    <ClientOnly>
-      <div
-        class="relative h-[428px] w-full bg-gradient-to-b from-[#0C0C16] to-[#0C131E] lg:h-[888px]"
-      >
+    <div
+      class="relative h-[428px] w-full bg-gradient-to-b from-[#0C0C16] to-[#0C131E] lg:h-[888px]"
+    >
+      <ClientOnly>
         <swiper-container
           ref="containerRef"
           class="max-w-[1920px] size-full mx-auto"
@@ -13,11 +13,11 @@
         >
           <swiper-slide v-for="(slide, idx) in slides" :key="idx" class="size-full relative">
             <img
-              src="/public/images/banner/device_lg.png"
+              :src="slide.bgLg"
               loading="eager"
               class="absolute right-0 h-[100%] object-cover sm:hidden"
             />
-            <img src="/public/images/banner/device_sm.png" alt="" class="sm:block 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 }}
@@ -42,105 +42,54 @@
             </div>
           </swiper-slide>
         </swiper-container>
-      </div>
-    </ClientOnly>
-    <div>
-      <h2
-        class="pt-12 pb-10 md:pb-7 sm:pt-[16px] sm:pb-[12px] text-5xl md:text-4xl sm:text-lg font-bold text-center text-white"
-      >
-        服务矩阵
-      </h2>
-      <div
-        class="grid grid-cols-8 sm:grid-cols-2 sm:gap-2 gap-[24px] sm:w-[328px] sm:mx-auto max-w-[1440px] mx-auto md:p-5"
-      >
-        <div v-for="(item, idx) in serveList" :key="idx" :class="item.clx">
-          <picture class="absolute inset-0 z-0">
-            <source media="(max-width: 480px)" :srcset="item.smBg" />
-            <source media="(max-width: 1280px)" :srcset="item.lgBg" />
-            <img :src="item.lgBg" loading="eager" class="size-full object-cover" />
-          </picture>
-          <section class="relative z-10 p-6 sm:p-3 size-full">
-            <h3 class="text-white text-3xl md:text-lg sm:text-xs font-bold">{{ item.title }}</h3>
-            <div
-              class="text-[#A4B0B7] flex flex-col lg:text-lg sm:text-[10px] gap-2 sm:gap-1 mt-9 sm:mt-3"
-            >
-              <p v-for="(content, idx) in item.contentList" :key="idx">{{ content }}</p>
-            </div>
-          </section>
-        </div>
-      </div>
+      </ClientOnly>
     </div>
+    <Serve />
+    <Device />
+    <Middle />
+    <ElectricPower />
+    <Scenarios />
+    <CloudData />
+    <Operation />
+    <About />
   </main>
 </template>
 
 <script setup lang="ts">
+import Device from '@/components/pageLayout/device.vue'
+import Serve from '@/components/pageLayout/serce.vue'
+import Middle from '@/components/pageLayout/midele.vue'
+import Scenarios from '@/components/pageLayout/scenarios.vue'
+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'
 const slides = [
   {
-    bg: '../assets/images/banner-device.png',
-    title: '储能工业控制主机 BK-2000',
+    bgLg: '/images/banner/bk1000.png',
+    bgSm: '/images/banner/device_sm.png',
+    title: '储能工业控制主机 BK-1000',
     subtitle: '超高性价比｜开发周期缩短50%｜电力四级防护',
     tags: ['低成本', '高可靠性', '全场景适配'],
   },
-  // {
-  //   bg: '../assets/images/banner-device.png',
-  //   title: '储能工业控制主机 BK-2000',
-  //   subtitle: '超高性价比｜开发周期缩短50%｜电力四级防护',
-  //   tags: ['低成本', '高可靠性', '全场景适配'],
-  // },
-]
-
-const serveList = [
-  {
-    title: '丰富的接口',
-    lgBg: '/images/serve/2.1_lg.png',
-    smBg: '/images/serve/2.1_sm.png',
-    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
-    clx: 'md:aspect-[1/1.0585] relative md:col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
-  },
-  {
-    title: '完美的中间件生态',
-    lgBg: '/images/serve/2.2_lg.png',
-    smBg: '/images/serve/2.2_sm.png',
-    contentList: ['MQTT', 'OPC UA', 'Modbus', 'OPC UA', 'Modbus', '……'],
-    clx: 'md:aspect-[1/1.0585] relative md:col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
-  },
-  {
-    title: '电力四级防护',
-    lgBg: '/images/serve/2.3_lg.png',
-    smBg: '/images/serve/2.3_sm.png',
-    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
-    clx: 'md:aspect-[1/1.0585] relative md:col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
-  },
   {
-    title: '运维系统工具',
-    lgBg: '/images/serve/2.4_lg.png',
-    smBg: '/images/serve/2.4_sm.png',
-    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
-    clx: 'md:aspect-[1/1.0585] md:col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px] relative',
-  },
-
-  {
-    title: '储能家EMS应用',
-    lgBg: '/images/serve/2.5_lg.png',
-    smBg: '/images/serve/2.5_sm.png',
-    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
-    clx: 'md:aspect-[2.5/1.0158] relative md:col-span-5 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
-  },
-  {
-    title: '云端储能平台',
-    lgBg: '/images/serve/2.6_lg.png',
-    smBg: '/images/serve/2.6_sm.png',
-    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
-    clx: 'md:aspect-[1.5/1.0158] relative md:col-span-3 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
+    bgLg: '/images/banner/bk2000.png',
+    bgSm: '/images/banner/device_sm.png',
+    title: '储能工业控制主机 BK-2000',
+    subtitle: '超高性价比｜开发周期缩短50%｜电力四级防护',
+    tags: ['低成本', '高可靠性', '全场景适配'],
   },
 ]
 </script>
 
-<style scoped>
+<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
+          flex flex-col justify-center sm:justify-normal gap-16   md:gap-4 sm:gap-2
            xl:w-auto sm:w-[300px] text-white;
 }
+.title-font {
+  @apply text-5xl md:text-4xl sm:text-lg font-bold text-center text-white;
+}
 </style>

pnpm-lock.yaml

@@ -30,7 +30,7 @@ importers:
         specifier: 2.0.0
         version: 2.0.0(magicast@0.3.5)
       reka-ui:
-        specifier: ^2.1.1
+        specifier: ^2.2.0
         version: 2.2.0(typescript@5.6.3)(vue@3.5.13(typescript@5.6.3))
       shadcn-nuxt:
         specifier: 1.0.3

tailwind.config.js

@@ -18,7 +18,7 @@ export default {
       screens: {
         sm: { max: '479px' },
         md: { min: '480px', max: '1024px' },
-        lg: { min: '1280px' },
+        lg: { min: '1025px' },
         xl: { min: '1920px' },
       },
       spacing: {