更新代码

2025-09-06 10:09:54 +08:00
parent 4414fe517b
commit fa7cb5625c
39 changed files with 574 additions and 177 deletions
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@ -1,19 +1,22 @@
 <script setup>
 import {ref, onMounted, getCurrentInstance} from 'vue'
-import Swiper from '@/components/swiper/index.vue'
+import Swiper from '@/components/Swiper/index.vue'
+import Banner from '@/components/Banner/index.vue'
+
 const instance = getCurrentInstance()
 const $fontSize = instance.appContext.config.globalProperties.$fontSize

-const containerWidth = ref(1300)
-const containerHeight = ref(1500)
+// 关于燃谷
+const aboutWidth = ref(1200)
+const aboutHeight = ref(600)
+const introduction =
+  '燃谷科技成立于2023年，位于南京鼓楼万谷硅巷，秉承创新、质量和合作精神的低空领域技术创新公司，专注于低空安全监管、城市飞行服务和空间数据应用的企业。公司依托低空大数据、低空物联网、智能算法引擎、空间计算模型四个核心组件，自主研发数智底座，致力于物联网、空间计算领域，助力低空经济蓬勃发展。'
+
+// 资质证书
+const certificateWidth = ref(1300)
+const certificateHeight = ref(1500)

 const currentPage = ref(1)
-const list = [
-  {id: 1, label: 11, value: 22},
-  {id: 2, label: 33, value: 44},
-  {id: 3, label: 55, value: 66},
-  {id: 4, label: 77, value: 88},
-]

 const imgList = [
  {
@ -71,29 +74,33 @@ onMounted(() => {})

 <template>
  <div class="page">
-    <div class="placeholder"></div>
+    <Banner class="banner" img="banner/about.png" />
    <Swiper
-      id="one"
+      id="rangu"
      title="关于燃谷"
      v-model="currentPage"
-      :data="list"
-      :page-size="2"
+      :source-width="aboutWidth"
+      :source-height="aboutHeight"
      :show-pagination="false"
      :auto-play="false"
+      :showHover="false"
    >
      <template #default="{item, index, isActive}">
-        <div class="my-card" :class="{active: isActive}">
-          <h2>{{ item.label }}</h2>
+        <div class="my-card flex j-s a-c" :class="{active: isActive}">
+          <img src="/static/images/main/rangu.png" />
+          <div class="label">
+            {{ introduction }}
+          </div>
        </div>
      </template>
    </Swiper>

    <Swiper
-      id="one"
+      id="certificate"
      title="资质证书"
      v-model="currentPage"
-      :source-width="containerWidth"
-      :source-height="containerHeight"
+      :source-width="certificateWidth"
+      :source-height="certificateHeight"
      :show-pagination="false"
      :auto-play="false"
      :showHover="false"
@ -103,13 +110,8 @@ onMounted(() => {})
          <div
            v-for="(list, listIdx) in imgList"
            :index="list.id"
-            :class="[
-              'flex',
-              'j-s',
-              'a-c',
-              'wrap',
-              {'last-row': listIdx === imgList.length - 1},
-            ]"
+            class="flex j-s a-c wrap"
+            :class="{'last-row': listIdx === imgList.length - 1}"
          >
            <div v-for="(img, imgIndex) in list.list" :key="imgIndex">
              <img
@ -130,21 +132,28 @@ onMounted(() => {})
 </template>

 <style lang="scss" scoped>
-.page {
-  --card-width: v-bind(cardWidth) * 1px;
-}
-
 .my-card {
-  background: #d9d9d9;
-  height: 100%;
-}
-
-.certificate {
  width: 100%;
  height: 100%;
+  .label {
+    text-align: left;
+    width: 532px;
+    padding-right: 25px;
+    font-family: 'PingFang SC';
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 50px;
+  }
 }

-.last-row {
-  justify-content: center !important;
+#certificate {
+  margin-top: 60px;
+  .certificate {
+    width: 100%;
+    height: 100%;
+  }
+  .last-row {
+    justify-content: center !important;
+  }
 }
 </style>
--- a/src/views/homepage/index.vue
+++ b/src/views/homepage/index.vue
@ -1,5 +1,5 @@
 <script setup>
-import Swiper from '@/components/swiper/index.vue'
+import Swiper from '@/components/Swiper/index.vue'

 import {ref, onMounted} from 'vue'
 const currentPage = ref(1)
--- a/src/views/layout/pc/footer/components/logo.vue
+++ b/src/views/layout/pc/footer/components/logo.vue
@ -6,8 +6,6 @@ onMounted(() => {})
 <template>
  <div class="logo flex column j-s">
    <img class="logo-img" src="/static/images/footer/logo.png" />
-    <div class="logo-CN">燃谷科技</div>
-    <div class="logo-EN">RANGUTECH</div>
  </div>
 </template>

@ -19,22 +17,8 @@ onMounted(() => {})
  color: $white;

  .logo-img {
-    width: 204px;
-    height: 204px;
-  }
-  .logo-CN {
-    font-family: 'HYDaHeiJ';
-    font-weight: 400;
-    font-style: 'normal';
-    font-size: 38px;
-    letter-spacing: 0.1em;
-  }
-  .logo-EN {
-    font-family: 'HYZhongHeiJ';
-    font-weight: 400;
-    font-style: 'normal';
-    font-size: 24px;
-    letter-spacing: 0.23em;
+    width: 140px;
+    height: 209px;
  }
 }
 </style>
--- a/src/views/layout/pc/footer/components/navNode.vue
+++ b/src/views/layout/pc/footer/components/navNode.vue
@ -35,7 +35,7 @@ const onClick = (url) => emits('navClick', url)
  .item-label {
    font-family: 'PingFang SC';
    font-weight: 400;
-    font-size: 24px;
+    font-size: $nav_font_size;
    color: $white;
    user-select: auto;
    cursor: pointer;
@ -55,7 +55,7 @@ const onClick = (url) => emits('navClick', url)
    .item-label {
      font-family: 'PingFang SC';
      font-weight: 400;
-      font-size: 20px;
+      font-size: 14px;
      color: #999999;
    }
  }
--- a/src/views/layout/pc/footer/index.vue
+++ b/src/views/layout/pc/footer/index.vue
@ -34,19 +34,21 @@ const toMIIF = () => {
 <style lang="scss" scoped>
 .page {
  background-color: $bg_color;
+  $top: 58px;
+
  position: relative;
  #logo {
    width: 220px;
    height: 300px;
    position: absolute;
-    top: 58px;
+    top: 43px;
    left: 190px;
  }
  #nav {
    width: calc(100% - 410px - 380px);
    position: absolute;
    left: 410px;
-    top: 87px;
+    top: $top;
    padding: 0 90px 0 55px;
    box-sizing: border-box;
  }
@ -54,7 +56,7 @@ const toMIIF = () => {
    width: 150px;
    height: 150px;
    position: absolute;
-    top: 87px;
+    top: $top;
    right: 180px;
  }
  #MIIT-Filing {
--- a/src/views/layout/pc/header/index.vue
+++ b/src/views/layout/pc/header/index.vue
@ -18,15 +18,15 @@ onMounted(() => {})
    background-image: url('/static/images/header/logo.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
-    width: 173px;
-    height: 72px;
+    width: 164px;
+    height: 56px;
    position: absolute;
    left: 160px;
  }

  .nav {
    width: 1000px;
-    height: 100px;
+    height: $header_nav_height;
    position: absolute;
    right: 160px;
    overflow-y: hidden;
--- a/src/views/layout/pc/header/nav.vue
+++ b/src/views/layout/pc/header/nav.vue
@ -49,14 +49,34 @@ onUnmounted(() => {
      background-color="$bg_color"
      router
    >
-      <el-menu-item
-        v-for="item in navList"
-        :key="item.id"
-        :index="item.url"
-        :class="{'is-active': activeIndex === item.url}"
-      >
-        {{ item.label }}
-      </el-menu-item>
+      <template v-for="nav in navList" :key="nav.id">
+        <!-- 有子菜单的情况 -->
+        <el-sub-menu
+          v-if="nav.hasChildren || nav?.children?.length > 0"
+          :index="nav.url"
+          popper-class="pepper"
+        >
+          <template #title>
+            <span>{{ nav.label }}</span>
+          </template>
+          <el-menu-item
+            v-for="child in nav.children"
+            :key="child.id"
+            :index="child.url"
+          >
+            {{ child.label }}
+          </el-menu-item>
+        </el-sub-menu>
+
+        <!-- 无子菜单的情况 -->
+        <el-menu-item
+          v-else
+          :index="nav.url"
+          :class="{'is-active': activeIndex === nav.url}"
+        >
+          {{ nav.label }}
+        </el-menu-item>
+      </template>
    </el-menu>
  </div>
 </template>
@ -64,15 +84,28 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 /* 菜单容器样式 */
 .el-menu--horizontal {
-  --el-menu-horizontal-height: 101px;
+  --el-menu-horizontal-height: 81px;
+}
+
+::v-deep(.el-sub-menu__title) {
+  font-size: $nav_font_size !important;
+  font-family: 'PingFang SC' !important;
+  font-weight: 400 !important;
+  padding: 0px 25px !important;
+  box-sizing: border-box !important;
+  text-align: center !important;
+
+  i {
+    display: none !important;
+  }
 }

 /* 菜单项基础样式 */
 .el-menu-item {
-  font-family: 'PingFang SC';
  padding: 0 25px;
+  font-family: 'PingFang SC';
  font-weight: 400;
-  font-size: 24px;
+  font-size: $nav_font_size !important;
  line-height: 100%;
  letter-spacing: 0.06em;
  border-bottom: none !important;
@ -80,7 +113,7 @@ onUnmounted(() => {

  /* 激活状态样式 */
  &.is-active {
-    border-bottom: 6px solid #ffffff !important;
+    border-bottom: 2px solid #ffffff !important;
  }

  /* 悬停效果 */
@ -88,4 +121,21 @@ onUnmounted(() => {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
 }
+
+.pepper {
+  background-color: #ffffff;
+  .el-menu-item {
+    width: 246px !important;
+    height: 50px !important;
+    line-height: 50px !important;
+    box-sizing: border-box !important;
+    font-size: 14px !important;
+    color: $black !important;
+    padding: 5px 0 !important;
+    padding-left: 20px !important;
+    &:hover {
+      background-color: #f4f4f4 !important;
+    }
+  }
+}
 </style>
--- a/src/views/link/index.vue
+++ b/src/views/link/index.vue
@ -1,6 +1,7 @@
 <script setup>
 import {ref, onMounted} from 'vue'
-import Swiper from '@/components/swiper/index.vue'
+import Swiper from '@/components/Swiper/index.vue'
+import Banner from '@/components/Banner/index.vue'
 import Map from './map.vue'

 const currentPage = ref(1)
@ -10,7 +11,7 @@ onMounted(() => {})

 <template>
  <div class="page">
-    <div class="placeholder"></div>
+    <Banner class="banner" img="banner/link.png" />
    <Swiper
      id="one"
      title="联系我们"
@ -39,6 +40,12 @@ onMounted(() => {})
 </template>

 <style lang="scss" scoped>
+.placeholder {
+  background-image: url(`./static/logo/link.png`);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
 .my-card {
  width: 100%;
  height: 100%;
@ -48,13 +55,13 @@ onMounted(() => {})
    .label {
      font-family: 'PingFang SC';
      font-weight: 400;
-      font-size: 24px;
+      font-size: 20px;
      margin-bottom: 20px;
    }
    .label:nth-child(1) {
      font-family: 'PingFang SC';
      font-weight: 600;
-      font-size: 32px;
+      font-size: 26px;
    }
  }
  .img {
--- a/src/views/link/map.vue
+++ b/src/views/link/map.vue
@ -18,7 +18,9 @@ const tryKey = (key) =>
        const mapInstance = new window.AMap.Map('map', {
          viewMode: '2D',
          zoom: 19,
-          center: [118.762616, 32.068811],
+          center: center,
+          zoomEnable: false,
+          dragEnable: false,
        })
        AMapResolve({AMap: window.AMap, mapInstance, key})
      } catch (e) {
@ -35,23 +37,46 @@ const initMap = async () => {
    try {
      const {mapInstance} = await tryKey(key)
      map.value = mapInstance
-      console.log('✅ 成功使用 key:', key)
+      console.log('✅ 成功使用')
      return
    } catch {
-      console.warn('❌ key 无效:', key)
+      console.warn('❌ key 无效:')
    }
  }
-  console.error('所有 key 均无法加载地图')
 }

 const mark = () => {
+  var icon = new AMap.Icon({
+    size: new AMap.Size(16, 16),
+    image: './static/images/main/map.png',
+    imageOffset: new AMap.Pixel(0, 0), // 设置偏移量
+    imageSize: new AMap.Size(16, 16),
+  })
  let marker = new AMap.Marker({
    position: center,
+    offset: new AMap.Pixel(50, -100),
+    icon: icon,
+    label: {
+      content: '燃谷科技（南京）有限公司',
+      offset: new AMap.Pixel(-13, -20),
+    },
  })

  map.value.add(marker)
 }

+const toGDMap = () => {
+  let query = {
+    query: '万谷硅巷',
+    city: '320100',
+    geoobj: '118.757114|32.066745|118.768038|32.071509',
+    zoom: '17.5',
+  }
+  window.open(
+    `https://ditu.amap.com/search?query=${query.query}&city=${query.city}&geoobj=${query.geoobj}&zoom=${query.zoom}`
+  )
+}
+
 onMounted(async () => {
  await initMap()
  mark()
@ -59,5 +84,5 @@ onMounted(async () => {
 </script>

 <template>
-  <div id="map" class="page"></div>
+  <div id="map" class="page" @click="toGDMap"></div>
 </template>
--- a/src/views/news/detail.vue
+++ b/src/views/news/detail.vue
@ -1,23 +1,80 @@
 <script setup>
 import {onMounted} from 'vue'
-import {useRoute} from 'vue-router'
+import {useRoute, useRouter} from 'vue-router'
+
+import {newsDetail} from './mock'

 const route = useRoute()
-const id = route.query.id // 就是 /news/123 里的 123

-console.log('id===>', id)
+const detail = route.query

-onMounted(() => {
-  console.log('id===>', id)
-})
+detail.artical = newsDetail.find((item) => item.id == route.query.id).article
+
+const router = useRouter()
+onMounted(() => {})
+
+const toBack = () => {
+  router.back()
+}
 </script>

 <template>
-  <div>
-    <div class="placeholder">
-      {{ id }}
+  <div class="page flex column a-c">
+    <div class="label">
+      {{ detail.label }}
    </div>
+    <div class="time">
+      {{ detail.time }}
+    </div>
+    <div class="img">
+      <img :src="`./static/images/${detail.imgUrl}`" alt="" />
+    </div>
+    <div class="artical">
+      {{ detail.artical }}
+    </div>
+    <div class="back" @click="toBack">返回</div>
  </div>
 </template>

-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.label {
+  margin: 64px 0 20px 0;
+  font-family: 'PingFang SC';
+  font-weight: 500;
+  font-size: 28px;
+  color: $black;
+}
+.time {
+  margin-bottom: 40px;
+}
+.img {
+  width: 1200px;
+  height: 600px;
+  margin-bottom: 40px;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+.artical {
+  width: 1200px;
+  font-family: 'PingFang SC';
+  font-weight: 400;
+  font-size: 18px;
+  color: $black;
+  text-indent: 2em;
+  white-space: pre-wrap; /* 保留换行符，同时允许自动折行 */
+  word-break: break-word; /* 长单词截断 */
+  margin-bottom: 300px;
+}
+.back {
+  padding: 10px 40px;
+  background: #0389ff;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 16px;
+  margin-bottom: 60px;
+  font-size: 20px;
+  color: $white;
+  cursor: pointer;
+}
+</style>
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@ -1,71 +1,62 @@
 <script setup>
-import {ref, onMounted, getCurrentInstance} from 'vue'
-import Swiper from '@/components/swiper/index.vue'
+defineOptions({name: 'New'})
+import {ref, onMounted, nextTick, onActivated, onDeactivated} from 'vue'
+import Banner from '@/components/Banner/index.vue'
+import Swiper from '@/components/Swiper/index.vue'
 import {useRouter} from 'vue-router'
+import {onBeforeRouteLeave} from 'vue-router'
+import {list} from './mock'

 const currentPage = ref(1)

-const instance = getCurrentInstance()
-const $fontSize = instance.appContext.config.globalProperties.$fontSize
-
 const containerWidth = ref(1700)
 const containerHeight = ref(1400)

-const list = [
-  {
-    id: 1,
-    imgUrl: 'main/1.png',
-    label: '关于当前低空经济形势发展的现状',
-    time: '2025年8月29日',
-    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
-    content:
-      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
-  },
-  {
-    id: 2,
-    imgUrl: 'main/2.png',
-    label: '关于当前低空经济形势发展的现状',
-    time: '2025年8月29日',
-    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
-    content:
-      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
-  },
-  {
-    id: 3,
-    imgUrl: 'main/3.png',
-    label: '关于当前低空经济形势发展的现状',
-    time: '2025年8月29日',
-    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
-    content:
-      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
-  },
-  {
-    id: 4,
-    imgUrl: 'main/4.png',
-    label: '关于当前低空经济形势发展的现状',
-    time: '2025年8月29日',
-    subLabel: '中国低空经济：从概念起飞到加速“抢飞”的万亿新赛道',
-    content:
-      '2025年，中国的低空经济已不再是停留在纸面的概念或未来的愿景，而是进入了高速发展的“起飞”阶段。从国家顶层设计到地方实践探索，从技术突破到应用场景落地，低空经济正以惊人的速度重塑产业格局，成为培育“新质生产力”的关键领域和推动经济增长的新引擎。',
-  },
-]
-
 onMounted(() => {})

 let router = useRouter()
-const toDetail = (url) => {
+const toDetail = (item) => {
  router.push({
    path: '/news/detail',
    query: {
-      id: url,
+      id: item.id,
+      imgUrl: item.imgUrl,
+      label: item.label,
+      time: item.time,
+      subLabel: item?.subLabel,
    },
  })
 }
+
+let scrollTop = 0
+
+onDeactivated(() => {
+  scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+})
+
+onActivated(async () => {
+  await nextTick()
+  // 再强制等一帧布局
+  requestAnimationFrame(() => {
+    window.scrollTo({top: scrollTop, behavior: 'instant'})
+  })
+})
+
+onBeforeRouteLeave((to) => {
+  if (to.name === 'Detail') return
+
+  // 去别的顶级菜单 → 销毁
+  const parent = to.matched[0]
+  if (parent?.name !== 'News') {
+    // 通过修改路由 meta 让 keep-alive 排除当前组件
+    // 需要把 keep-alive 写成 :include="cachedNames" 并在 pinia 里维护数组
+  }
+})
 </script>

 <template>
  <div class="page">
-    <div class="placeholder"></div>
+    <Banner class="banner" img="banner/news.png" />
    <Swiper
      id="one"
      title="新闻中心"
@ -83,16 +74,16 @@ const toDetail = (url) => {
            :class="{active: isActive}"
            v-for="item in list"
            :key="item.id"
-            @click="toDetail(item.id)"
+            @click="toDetail(item)"
          >
            <div class="img">
-              <!-- <img :src="`./static/images/${item.imgUrl}`" /> -->
+              <img :src="`./static/images/${item.imgUrl}`" />
            </div>

            <div class="content">
              <div class="label">{{ item.label }}</div>
              <div class="time">{{ item.time }}</div>
-              <div class="sub-label">{{ item.subLabel }}</div>
+              <div class="sub-label">{{ item?.subLabel }}</div>
              <div class="text">{{ item.content }}</div>
            </div>
          </div>
@ -109,11 +100,13 @@ const toDetail = (url) => {
  .news {
    width: calc(100% - 100px);
    margin: 20px 50px;
+    padding: 10px;
    overflow-y: hidden;
    transition: all 0.3s;
    cursor: pointer;
-    border: 1px solid #eee;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    background: rgba(255, 255, 255, 0.01);
+    box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.04);
+
    &:not(:last-of-type) {
      margin-bottom: 40px;
    }
@ -125,6 +118,11 @@ const toDetail = (url) => {
    width: 428px;
    height: 278px;
    background-color: #d9d9d9;
+    border-radius: 5px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
  }
  .content {
    flex: 1;
--- a/src/views/news/mock.js
+++ b/src/views/news/mock.js
--- a/src/views/product/index.vue
+++ b/src/views/product/index.vue
@ -1,6 +1,7 @@
 <script setup>
 import {ref, onMounted} from 'vue'
-import Swiper from '@/components/swiper/index.vue'
+import Swiper from '@/components/Swiper/index.vue'
+import Banner from '@/components/Banner/index.vue'

 const currentPage = ref(1)

@ -9,7 +10,7 @@ onMounted(() => {})

 <template>
  <div class="page">
-    <div class="placeholder"></div>
+    <Banner class="banner" img="banner/product.png" />
    <Swiper
      id="one"
      title="产品体系"
--- a/src/views/product/monitorSystem.vue
+++ b/src/views/product/monitorSystem.vue
@ -0,0 +1,67 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import Swiper from '@/components/Swiper/index.vue'
+import Banner from '@/components/Banner/index.vue'
+
+const currentPage = ref(1)
+
+onMounted(() => {})
+</script>
+
+<template>
+  <div class="page">
+    <Banner class="banner" img="banner/product.png" />
+    <Swiper
+      id="one"
+      title="产品体系"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+    <Swiper
+      id="two"
+      title="软件产品"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+    <Swiper
+      id="three"
+      title="硬件产品"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-card {
+  background: #d9d9d9;
+  height: 100%;
+}
+</style>
--- a/src/views/product/remoteDevice.vue
+++ b/src/views/product/remoteDevice.vue
@ -0,0 +1,67 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import Swiper from '@/components/Swiper/index.vue'
+import Banner from '@/components/Banner/index.vue'
+
+const currentPage = ref(1)
+
+onMounted(() => {})
+</script>
+
+<template>
+  <div class="page">
+    <Banner class="banner" img="banner/product.png" />
+    <Swiper
+      id="one"
+      title="产品体系"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+    <Swiper
+      id="two"
+      title="软件产品"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+    <Swiper
+      id="three"
+      title="硬件产品"
+      v-model="currentPage"
+      :data="[1, 2, 3, 4]"
+      :page-size="2"
+      :show-pagination="false"
+      :auto-play="false"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="my-card" :class="{active: isActive}">
+          <h2>{{ item }}</h2>
+        </div>
+      </template>
+    </Swiper>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-card {
+  background: #d9d9d9;
+  height: 100%;
+}
+</style>
--- a/src/views/services/index.vue
+++ b/src/views/services/index.vue
@ -1,6 +1,7 @@
 <script setup>
 import {ref, onMounted} from 'vue'
 import Swiper from '@/components/swiper/index.vue'
+import Banner from '@/components/Banner/index.vue'

 const currentPage = ref(1)

@ -9,7 +10,7 @@ onMounted(() => {})

 <template>
  <div class="page">
-    <div class="placeholder"></div>
+    <Banner class="banner" img="banner/services.png" />
    <Swiper
      id="one"
      title="智能加载服务"