diff --git a/src/assets/images/coder-community/Frame 29.png b/src/assets/images/coder-community/Frame 29.png
new file mode 100644
index 0000000..579a3a9
Binary files /dev/null and b/src/assets/images/coder-community/Frame 29.png differ
diff --git a/src/assets/images/coder-community/Frame(1).png b/src/assets/images/coder-community/Frame(1).png
new file mode 100644
index 0000000..b852bb3
Binary files /dev/null and b/src/assets/images/coder-community/Frame(1).png differ
diff --git a/src/assets/images/coder-community/Frame(10).png b/src/assets/images/coder-community/Frame(10).png
new file mode 100644
index 0000000..54328fe
Binary files /dev/null and b/src/assets/images/coder-community/Frame(10).png differ
diff --git a/src/assets/images/coder-community/Frame(2).png b/src/assets/images/coder-community/Frame(2).png
new file mode 100644
index 0000000..1ea90eb
Binary files /dev/null and b/src/assets/images/coder-community/Frame(2).png differ
diff --git a/src/assets/images/coder-community/Frame(3).png b/src/assets/images/coder-community/Frame(3).png
new file mode 100644
index 0000000..01509dc
Binary files /dev/null and b/src/assets/images/coder-community/Frame(3).png differ
diff --git a/src/assets/images/coder-community/Frame(4).png b/src/assets/images/coder-community/Frame(4).png
new file mode 100644
index 0000000..f3d8e64
Binary files /dev/null and b/src/assets/images/coder-community/Frame(4).png differ
diff --git a/src/assets/images/coder-community/Frame(5).png b/src/assets/images/coder-community/Frame(5).png
new file mode 100644
index 0000000..46afe0e
Binary files /dev/null and b/src/assets/images/coder-community/Frame(5).png differ
diff --git a/src/assets/images/coder-community/Frame(6).png b/src/assets/images/coder-community/Frame(6).png
new file mode 100644
index 0000000..6986fae
Binary files /dev/null and b/src/assets/images/coder-community/Frame(6).png differ
diff --git a/src/assets/images/coder-community/Frame(7).png b/src/assets/images/coder-community/Frame(7).png
new file mode 100644
index 0000000..a634a2f
Binary files /dev/null and b/src/assets/images/coder-community/Frame(7).png differ
diff --git a/src/assets/images/coder-community/Frame(8).png b/src/assets/images/coder-community/Frame(8).png
new file mode 100644
index 0000000..34a4352
Binary files /dev/null and b/src/assets/images/coder-community/Frame(8).png differ
diff --git a/src/assets/images/coder-community/Frame(9).png b/src/assets/images/coder-community/Frame(9).png
new file mode 100644
index 0000000..6700170
Binary files /dev/null and b/src/assets/images/coder-community/Frame(9).png differ
diff --git a/src/assets/images/coder-community/Frame.png b/src/assets/images/coder-community/Frame.png
new file mode 100644
index 0000000..65075dd
Binary files /dev/null and b/src/assets/images/coder-community/Frame.png differ
diff --git a/src/assets/images/coder-community/Group 1000002263(1).png b/src/assets/images/coder-community/Group 1000002263(1).png
new file mode 100644
index 0000000..b480fcb
Binary files /dev/null and b/src/assets/images/coder-community/Group 1000002263(1).png differ
diff --git a/src/assets/images/coder-community/Group 1000002263(2).png b/src/assets/images/coder-community/Group 1000002263(2).png
new file mode 100644
index 0000000..ac419f8
Binary files /dev/null and b/src/assets/images/coder-community/Group 1000002263(2).png differ
diff --git a/src/assets/images/coder-community/Group 1000002263.png b/src/assets/images/coder-community/Group 1000002263.png
new file mode 100644
index 0000000..bf5da3b
Binary files /dev/null and b/src/assets/images/coder-community/Group 1000002263.png differ
diff --git a/src/assets/images/coder-community/Group 1000002594.png b/src/assets/images/coder-community/Group 1000002594.png
new file mode 100644
index 0000000..fbd590e
Binary files /dev/null and b/src/assets/images/coder-community/Group 1000002594.png differ
diff --git a/src/assets/images/coder-community/Group 1000002595.png b/src/assets/images/coder-community/Group 1000002595.png
new file mode 100644
index 0000000..14fe620
Binary files /dev/null and b/src/assets/images/coder-community/Group 1000002595.png differ
diff --git a/src/assets/images/coder-community/Group 1000002596.png b/src/assets/images/coder-community/Group 1000002596.png
new file mode 100644
index 0000000..90ddbf4
Binary files /dev/null and b/src/assets/images/coder-community/Group 1000002596.png differ
diff --git a/src/assets/images/coder-community/Group 1000002597.png b/src/assets/images/coder-community/Group 1000002597.png
new file mode 100644
index 0000000..c8b45c9
Binary files /dev/null and b/src/assets/images/coder-community/Group 1000002597.png differ
diff --git a/src/assets/images/coder-community/Group 1000002598.png b/src/assets/images/coder-community/Group 1000002598.png
new file mode 100644
index 0000000..9e0a6cd
Binary files /dev/null and b/src/assets/images/coder-community/Group 1000002598.png differ
diff --git a/src/assets/images/coder-community/Group 1000002645.png b/src/assets/images/coder-community/Group 1000002645.png
new file mode 100644
index 0000000..83c762a
Binary files /dev/null and b/src/assets/images/coder-community/Group 1000002645.png differ
diff --git a/src/assets/images/coder-community/Group 1000002646.png b/src/assets/images/coder-community/Group 1000002646.png
new file mode 100644
index 0000000..5e86d47
Binary files /dev/null and b/src/assets/images/coder-community/Group 1000002646.png differ
diff --git a/src/assets/images/coder-community/Group 1000002647.png b/src/assets/images/coder-community/Group 1000002647.png
new file mode 100644
index 0000000..e0b897f
Binary files /dev/null and b/src/assets/images/coder-community/Group 1000002647.png differ
diff --git a/src/assets/images/coder-community/Group 1000002648.png b/src/assets/images/coder-community/Group 1000002648.png
new file mode 100644
index 0000000..6f4d57f
Binary files /dev/null and b/src/assets/images/coder-community/Group 1000002648.png differ
diff --git a/src/assets/images/coder-community/Mask group.png b/src/assets/images/coder-community/Mask group.png
new file mode 100644
index 0000000..69fad53
Binary files /dev/null and b/src/assets/images/coder-community/Mask group.png differ
diff --git a/src/assets/images/coder-community/banner.png b/src/assets/images/coder-community/banner.png
new file mode 100644
index 0000000..474bddc
Binary files /dev/null and b/src/assets/images/coder-community/banner.png differ
diff --git a/src/assets/images/device-center/Frame(1).png b/src/assets/images/device-center/Frame(1).png
new file mode 100644
index 0000000..00a6287
Binary files /dev/null and b/src/assets/images/device-center/Frame(1).png differ
diff --git a/src/assets/images/device-center/Frame(2).png b/src/assets/images/device-center/Frame(2).png
new file mode 100644
index 0000000..6eec2b5
Binary files /dev/null and b/src/assets/images/device-center/Frame(2).png differ
diff --git a/src/assets/images/device-center/Frame(3).png b/src/assets/images/device-center/Frame(3).png
new file mode 100644
index 0000000..77c500f
Binary files /dev/null and b/src/assets/images/device-center/Frame(3).png differ
diff --git a/src/assets/images/device-center/Frame(4).png b/src/assets/images/device-center/Frame(4).png
new file mode 100644
index 0000000..905d1f9
Binary files /dev/null and b/src/assets/images/device-center/Frame(4).png differ
diff --git a/src/assets/images/device-center/Frame(5).png b/src/assets/images/device-center/Frame(5).png
new file mode 100644
index 0000000..83f470b
Binary files /dev/null and b/src/assets/images/device-center/Frame(5).png differ
diff --git a/src/assets/images/device-center/Frame(6).png b/src/assets/images/device-center/Frame(6).png
new file mode 100644
index 0000000..db48e0e
Binary files /dev/null and b/src/assets/images/device-center/Frame(6).png differ
diff --git a/src/assets/images/device-center/Frame.png b/src/assets/images/device-center/Frame.png
new file mode 100644
index 0000000..82e4ec9
Binary files /dev/null and b/src/assets/images/device-center/Frame.png differ
diff --git a/src/assets/images/device-center/water.png b/src/assets/images/device-center/water.png
new file mode 100644
index 0000000..738239f
Binary files /dev/null and b/src/assets/images/device-center/water.png differ
diff --git a/src/views/appCenter.vue b/src/views/appCenter.vue
index ac03592..c3dbdf8 100644
--- a/src/views/appCenter.vue
+++ b/src/views/appCenter.vue
@@ -3,7 +3,7 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2024-10-25 16:12:44
- * @LastEditTime: 2024-10-25 16:12:54
+ * @LastEditTime: 2024-10-26 21:22:43
 -->
 <template>
   <div>
diff --git a/src/views/coderCommunity.vue b/src/views/coderCommunity.vue
new file mode 100644
index 0000000..ed79014
--- /dev/null
+++ b/src/views/coderCommunity.vue
@@ -0,0 +1,318 @@
+<!--
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2024-10-27 17:26:39
+ * @LastEditTime: 2024-10-27 20:38:39
+-->
+<template>
+  <div class="coder-community">
+    <section class="banner-area">
+      <div class="title" style="color: white;">贵鸿开发者社区</div>
+      <div class="des">建立资源共享、技术支持、开放交流的平台，帮助厂商的开发人员提高技能和解决问题，推动贵鸿生态系统建设，促进创新和合作</div>
+    </section>
+
+    <section class="introduction">
+      <div class="title">丰富的开发工具和开发资料，满足一站式开发需求</div>
+      <div class="introducts">
+        <div v-for="item of introducts" class="item">
+          <img :src="item.imgUrl" >
+          <p class="mini-title" style="margin: 24px 0;">{{ item.title }}</p>
+          <p class="desc" style="margin-bottom: 50px;">{{ item.desc }}</p>
+          <span style="cursor: pointer">了解更多 <img style="vertical-align: bottom;" :src="morePng"></span>
+        </div>
+      </div>
+    </section>
+
+    <section class="support" style="height: 771px;">
+      <div class="title">获得多维度的全程技术支持</div>
+      <div class="container">
+        <div class="image-box">
+          <img src="../assets//images/coder-community/Frame 29.png" />
+        </div>
+        <div 
+          v-for="(item, index) in cards" 
+          :key="index" 
+          class="card"
+        >
+          <div class="card-content">
+            <p class="mini-title" style="margin-bottom: 56px;">{{ item.title }}</p>
+            <p class="desc" style="cursor: pointer">
+              {{ item.description }}
+              <img style="vertical-align: sub;" :src="morePng">
+            </p>
+          </div>
+          <img class="imgage" :src="item.imgUrl" >
+        </div>
+      </div>
+    </section>
+
+    
+    <section class="introduction" style="height: 672px;">
+      <div class="title">接入规范</div>
+      <div class="introducts">
+        <div v-for="item of norms" style="flex: 1;" class="item">
+          <img :src="item.imgUrl" >
+          <p class="mini-title" style="margin: 24px 0;">{{ item.title }}</p>
+          <p class="desc" style="margin-bottom: 50px;">{{ item.desc }}</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="experience" style="height: 579px;">
+      <div class="title">立即体验贵鸿OS</div>
+      <div class="experience-ways">
+        <div v-for="item of experiences" class="item">
+          <p class="mini-title">{{ item.title }}</p>
+          <p class="desc" style="margin: 20px 0;">{{ item.desc }}</p>
+          <img :src="item.imgUrl" >
+        </div>
+      </div>
+    </section>
+
+    <section class="introduction" style="height: 800px;">
+      <div class="title">提供完善的生态厂商服务，帮助厂商简易、低成本完成设备与应用的开发，提高产品竞争力，并提供全套运营支撑服务</div>
+      <div class="introducts">
+        <div v-for="item of services" class="item">
+          <img :src="item.imgUrl" >
+          <p class="mini-title" style="margin: 24px 0;">{{ item.title }}</p>
+          <p class="desc" style="margin-bottom: 50px;">{{ item.desc }}</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="import-guide">
+      <div class="title" style="margin:78px 0 72px;color: white;">厂商接入指引</div>
+      <div class="steps">
+        <img src="../assets/images/coder-community/Group 1000002598.png">
+        <img src="../assets/images/coder-community/Group 1000002597.png">
+        <img src="../assets/images/coder-community/Group 1000002596.png">
+        <img src="../assets/images/coder-community/Group 1000002595.png">
+        <img src="../assets/images/coder-community/Group 1000002594.png">
+      </div>
+
+      <div class="button">查看文档</div>
+    </section>
+
+    <section class="all-rights">
+      <p>Copyright @ wwwguifa.com, All Rights Reserved</p>
+      <p>贵阳贵安鸿蒙城市生态中心</p>
+    </section>
+  </div>
+</template>
+
+<script setup>
+const morePng = new URL('../assets/images/coder-community/Frame(1).png', import.meta.url).href
+
+const introductPng1 = new URL('../assets/images/coder-community/Frame.png', import.meta.url).href
+const introductPng2 = new URL('../assets/images/coder-community/Frame(2).png', import.meta.url).href
+const introductPng3 = new URL('../assets/images/coder-community/Frame(3).png', import.meta.url).href
+
+const norms1 = new URL('../assets/images/coder-community/Frame(4).png', import.meta.url).href
+const norms2 = new URL('../assets/images/coder-community/Frame(5).png', import.meta.url).href
+const norms3 = new URL('../assets/images/coder-community/Frame(6).png', import.meta.url).href
+
+const service1 = new URL('../assets/images/coder-community/Group 1000002263.png', import.meta.url).href
+const service2 = new URL('../assets/images/coder-community/Group 1000002263(1).png', import.meta.url).href
+const service3 = new URL('../assets/images/coder-community/Group 1000002263(2).png', import.meta.url).href
+
+const support1 = new URL('../assets/images/coder-community/Group 1000002645.png', import.meta.url).href
+const support2 = new URL('../assets/images/coder-community/Group 1000002646.png', import.meta.url).href
+const support3 = new URL('../assets/images/coder-community/Group 1000002647.png', import.meta.url).href
+const support4 = new URL('../assets/images/coder-community/Group 1000002648.png', import.meta.url).href
+
+const way1 = new URL('../assets/images/coder-community/Frame(7).png', import.meta.url).href
+const way2 = new URL('../assets/images/coder-community/Frame(8).png', import.meta.url).href
+const way3 = new URL('../assets/images/coder-community/Frame(9).png', import.meta.url).href
+const way4 = new URL('../assets/images/coder-community/Frame(10).png', import.meta.url).href
+
+const introducts = [
+  { title: '开发工具', imgUrl: introductPng1, desc: '提供了一套全面的开发工具，旨在帮助开发者更高效地构建和优化应用，例如：DevEco Studio、DevEco Device Tool、DevEco Debug等等，这些工具为开发者提供了从设计、开发、测试到部署的全流程支持，让开发者更高效地为用户提供更好的体验。' },
+  { title: '开发资料', imgUrl: introductPng2, desc: '提供了丰富的开发资料，以帮助开发者快速上手和开发，包括源代码、开发文档、示例代码、教程等等，这些开发资料为开发者提供了全面的技术支持，帮助他们更好地理解和使用贵鸿OS，开发出高质量的产品。随着贵鸿OS项目的不断发展，这些资料也会不断更新和完善。' },
+  { title: '开发板', imgUrl: introductPng3, desc: '贵鸿OS支持多种设备，包括各种开发板，对于开发者来说，开发板可用于硬件的开发、测试和原型设计；对于贵鸿OS来说，开发板可以用于验证操作系统的功能、开发应用程序或进行硬件兼容性测试。随着贵鸿OS的不断壮大，会有更多的开发板支持。' },
+]
+
+const norms = [
+  { title: '鸿蒙设备接入规范', imgUrl: norms1, desc: '提供虚拟设备调试、真实设备调试、应用开发调试等功能，方便厂商顺利完成设备、应用开发。' },
+  { title: '开发工具', imgUrl: norms2, desc: '专家团队全程指导，帮助生态厂商快速完成接入，给与最中肯的建议。' },
+  { title: '开发工具', imgUrl: norms3, desc: '提供完善的开发文档，提供典型的案例与代码实例，零门槛入驻平台，分享鸿蒙生态发展红利。' },
+]
+
+const services = [
+  { title: '开发调试', imgUrl: service1, desc: '为了让设备能够接入贵鸿生态系统，制定了一系列的设备接入规范，包括：硬件兼容性规范、系统兼容性规范、安全规范、接口与协议等，这些规范旨在确保设备能够无缝地融入贵鸿生态系统，为用户提供一致和高质量的体验，这些规范也在更新和完善中。' },
+  { title: '专家指导', imgUrl: service2, desc: '贵鸿OS应用接入规范涉及多个方面，为确保应用能够顺利运行在贵鸿OS系统上，制定了相应的接入规范，包括：应用开发环境、应用配置、签名、启动流程、API使用、安全性规范等，这些规范确保了应用能够在贵鸿OS上提供一致和高质量的用户体验。' },
+  { title: '文档与案例', imgUrl: service3, desc: '解决方案接入规范是为了确保各种硬件设备、应用程序和服务能够在贵鸿生态中无缝协作和运行，包括：兼容性要求、硬件规范、系统安全性、分布式能力、应用开发标准、API与SDK使用等，这些规范有助于确保贵鸿生态系统的健康发展。' },
+]
+
+const cards = [
+  { title: "文档中心", description: "查看文档", imgUrl: support1 },
+  { title: "开发者教程", description: "查看教程", imgUrl: support2 },
+  { title: "帮助中心", description: "前往", imgUrl: support3 },
+  { title: "工单支持", description: "提交工单", imgUrl: support4 },
+]
+
+const experiences = [
+  { title: '贵鸿OS下载', desc: '贵鸿OS已发布，点击下载', imgUrl: way1},
+  { title: 'IDE下载', desc: 'DevEco Studio 3.0 已发布，点击下载', imgUrl: way2},
+  { title: '视频教程', desc: '系统学习贵鸿OS设备、应用的开发', imgUrl: way3},
+  { title: '开发者示例', desc: '快速体验服务教程和开发示例', imgUrl: way4},
+]
+</script>
+
+<style lang="scss">
+.coder-community {
+  section {
+    flex-direction: column;
+  }
+  .title {
+    text-align: center;
+    font-weight: bold;
+    font-size: 40px;
+    color: #000000;
+    line-height: 47px;
+    margin: 100px 0;
+  }
+  .mini-title {
+    font-weight: bold;
+    font-size: 24px;
+    color: #000000;
+    line-height: 28px;
+  }
+  .desc {
+    font-weight: 400;
+    font-size: 14px;
+    color: rgba(0,0,0,0.6);
+    line-height: 27px;
+  }
+  .banner-area {
+    background-image: url('../assets/images/coder-community/banner.png');
+    height: 615px;
+    justify-content: center;
+    align-items: center;
+    color: #FFFFFF;
+    background-color: #ccc;
+    .title {
+      font-weight: bold;
+      font-size: 72px;
+      line-height: 107px;
+      margin-bottom: 37px;
+    }
+    .des {
+      font-weight: 400;
+      font-size: 32px;
+      margin: 0 240px;
+      text-align: center;
+      line-height: 48px;
+    }
+  }
+
+  .introduction {
+    height: 718px;
+    background: rgba(237,244,255,0.5);
+    .title {
+      margin: 100px 240px;
+      line-height: 60px;
+    }
+    .introducts {
+      display: flex;
+      justify-content: space-between;
+      margin: 0 240px;
+      gap: 24px;
+      .item {
+        background: #FFFFFF;
+        border-radius: 24px 24px 24px 24px;
+        padding: 24px;
+      }
+    }
+  }
+
+  .support {
+    margin: 0 240px;
+    .container {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 20px;
+      .image-box {
+        grid-row: 1 / span 2;
+      }
+      .card {
+        height: 200px;
+        background: #EDF4FF;
+        border-radius: 24px 24px 24px 24px;
+        padding: 48px 32px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .imgage {
+          width: 80px;
+          height: 80px;
+        }
+      }
+    }
+  }
+  
+  .experience {
+    align-items: center;
+    .experience-ways {
+      margin: 0 240px;
+      display: flex;
+      justify-content: space-between;
+      gap: 24px;
+      .item {
+        flex: 1;
+        padding: 24px;
+        background: #EDF4FF;
+        border-radius: 24px 24px 24px 24px;
+        display: flex;
+        flex-direction: column;
+        img {
+          width: 66px;
+          height: 66px;
+          margin-left: auto;
+          margin-top: auto;
+        }
+      }
+    }  
+  }
+
+  .import-guide {
+    height: 790px;
+    background-image: url('../assets/images/coder-community/Mask group.png');
+    align-items: center;
+    .steps {
+      margin: 0 240px;
+      display: flex;
+      gap: 39px;
+      img {
+        width: calc((100% - (39px * 4)) / 5);
+      }
+    }
+    .button {
+      width: 204px;
+      height: 56px;
+      text-align: center;
+      line-height: 56px;
+      color: white;
+      background: #007CF7;
+      border-radius: 37px 37px 37px 37px;
+      margin-top: 56px;
+      cursor: pointer;
+    }
+  }
+
+  .all-rights {
+    height: 80px;
+    background: #000000;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    p {
+      line-height: 22px;
+    }
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/deviceCenter.vue b/src/views/deviceCenter.vue
new file mode 100644
index 0000000..6d69425
--- /dev/null
+++ b/src/views/deviceCenter.vue
@@ -0,0 +1,405 @@
+<template>
+  <div class="device-center">
+    <section class="banner-area">
+      <div class="title">贵鸿设备中心</div>
+      <div class="des">繁荣鸿蒙生态发展，赋能智盖城市管理、服务提质增效</div>
+    </section>
+
+    <section class="device-area">
+      <div class="title">基于贵鸿，打造生态硬件设备</div>
+      <div class="des">繁荣鸿蒙生态发展，赋能智盖城市管理、服务提质增效</div>
+      <div class="device">
+        <div v-for="i of 5">
+          <img src="../assets/images/device-center/water.png">
+        </div>
+      </div>
+    </section>
+
+    <section class="access-mode-area">
+      <div class="title">贵鸿生态设备支持的接入方式</div>
+      <div class="modes">
+        <div v-for="item of modes" class="item">
+          <p class="name">{{ item.title }}</p>
+          <p class="desc">{{ item.desc }}</p>
+          <img :src="item.imgUrl" >
+        </div>
+      </div>
+    </section>
+  
+    <section class="system-info">
+      <div class="title">鸿蒙设备接入，统操作系统，凝聚智慧互联力量</div>
+      <div class="des">不是一个单一的操作系统，而是可以被灵活组装的操作系统能力集合，基于一个高度弹性的架构，将这些操作系统能力按需组合，满足千行百业场景需要的场景化操作系</div>
+      <div class="button">加入贵鸿生态</div>
+      <div class="system">
+        <div v-for="item of systems" class="item">
+          <img :src="item.imgUrl" >
+          <p class="name">{{ item.title }}</p>
+          <p class="desc">{{ item.desc }}</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="device-search">
+      <div class="title">贵鸿生态设备鸿蒙兼容性评测查询</div>
+      <div class="filter-buttons">
+        <div class="filter-group">
+          <label>评测设备类型：</label>
+          <div
+            v-for="type in deviceTypes"
+            :key="type.value"
+            class="button"
+            :class="{ active: selectedDeviceType === type.value }"
+            @click="selectedDeviceType = type.value"
+          >
+            {{ type.label }}
+          </div>
+        </div>
+        <div class="filter-group">
+          <label>评测OS类型：</label>
+          <div
+            v-for="os in osTypes"
+            class="button"
+            :key="os.value"
+            :class="{ active: selectedOSType === os.value }"
+            @click="selectedOSType = os.value"
+          >
+            {{ os.label }}
+          </div>
+        </div>
+      </div>
+      <!-- 设备展示 -->
+      <div class="device-list">
+        <div v-for="device in filteredDevices" :key="device.id" class="device-card">
+          <img :src="device.image"/>
+          <p class="title">{{ device.name }}</p>
+          <p class="desc">{{ device.desc }}</p>
+          <p class="company">{{ device.company }}</p>
+        </div>
+      </div>
+
+      <el-pagination background layout="prev, pager, next" :total="1" />
+
+    </section>
+
+    <section class="all-rights">
+      <p>Copyright @ wwwguifa.com, All Rights Reserved</p>
+      <p>贵阳贵安鸿蒙城市生态中心</p>
+    </section>
+  </div>
+</template>
+
+<script setup>
+const modePng1 = new URL('../assets/images/device-center/Frame(3).png', import.meta.url).href
+const modePng2 = new URL('../assets/images/device-center/Frame(4).png', import.meta.url).href
+const modePng3 = new URL('../assets/images/device-center/Frame(5).png', import.meta.url).href
+const modePng4 = new URL('../assets/images/device-center/Frame(6).png', import.meta.url).href
+
+const systemPng1 = new URL('../assets/images/device-center/Frame.png', import.meta.url).href
+const systemPng2 = new URL('../assets/images/device-center/Frame(1).png', import.meta.url).href
+const systemPng3 = new URL('../assets/images/device-center/Frame(2).png', import.meta.url).href
+
+const devicePng1 = new URL('../assets/images/device-center/water.png', import.meta.url).href
+
+// 接入方式
+const modes = [
+  { title: '贵鸿操作系统接入', desc: '具体说明具体说明具体说明具体说明具体说明具体说明具体说明具体说明', imgUrl: modePng1},
+  { title: '贵鸿SDK接入', desc: '具体说明具体说明具体说明具体说明具体说明具体说明具体说明具体说明', imgUrl: modePng2},
+  { title: '互联互通SDK接入', desc: '具体说明具体说明具体说明具体说明具体说明具体说明具体说明具体说明', imgUrl: modePng3},
+  { title: '模组接入', desc: '具体说明具体说明具体说明具体说明具体说明具体说明具体说明具体说明', imgUrl: modePng4},
+]
+const systems = [
+  { title: '鸿蒙设备接入', desc: '文案说明，文案说明，文案说明，文案说明，文案说明', imgUrl: systemPng3 },
+  { title: '鸿蒙设备开发', desc: '文案说明，文案说明，文案说明，文案说明，文案说明', imgUrl: systemPng1 },
+  { title: '鸿蒙设备运维', desc: '文案说明，文案说明，文案说明，文案说明，文案说明', imgUrl: systemPng2 }
+]
+// 设备数据
+const devices = ref([
+  { id: 1, name: '星闪开发板', type: '开发板', os: '轻量系统', image: devicePng1, desc: '2024.10.23 通过评测', company: '湖南开鸿智谷' },
+  { id: 2, name: '星闪模块', type: '模块', os: '小型系统', image: devicePng1, desc: '2024.10.23 通过评测', company: '湖南开鸿智谷' },
+  // 更多设备数据...
+]);
+
+// 筛选条件
+const deviceTypes = [
+  { label: '全部', value: '' },
+  { label: '模块/开发板', value: '开发板' },
+  { label: '商业设备', value: '商业设备' },
+  { label: '发行版', value: '发行版' }
+];
+const osTypes = [
+  { label: '全部', value: '' },
+  { label: '轻量系统', value: '轻量系统' },
+  { label: '小型系统', value: '小型系统' },
+  { label: '标准系统', value: '标准系统' }
+];
+
+// 筛选状态
+const selectedDeviceType = ref('');
+const selectedOSType = ref('');
+
+// 计算属性：根据选择的类型过滤设备
+const filteredDevices = computed(() => {
+  return devices.value.filter(device => {
+    const matchesDeviceType = selectedDeviceType.value === '' || device.type === selectedDeviceType.value;
+    const matchesOSType = selectedOSType.value === '' || device.os === selectedOSType.value;
+    return matchesDeviceType && matchesOSType;
+  });
+});
+</script>
+
+<style lang="scss">
+.device-center {
+  section {
+    flex-direction: column;
+  }
+  .banner-area {
+    height: 616px;
+    justify-content: center;
+    align-items: center;
+    color: #FFFFFF;
+    background-color: #ccc;
+    .title {
+      font-weight: bold;
+      font-size: 72px;
+      line-height: 107px;
+      margin-bottom: 37px;
+    }
+    .des {
+      font-weight: 400;
+      font-size: 32px;
+    }
+  }
+  .device-area {
+    height: 782px;
+    align-items: center;
+    color: #000000;
+    background-color: #fff;
+    .title {
+      margin-top: 100px;
+      font-weight: bold;
+      font-size: 40px;
+      line-height: 47px;
+      margin-bottom: 40px;
+    }
+    .des {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 27px;
+      color: rgba(0,0,0,0.6);
+    }
+    .device {
+      display: flex;
+      justify-content: space-between;
+      margin: 190px 240px 100px;
+    }
+  }
+  .access-mode-area {
+    height: 565px;
+    align-items: center;
+    background-color: #EDF4FF;
+    .title {
+      font-weight: bold;
+      font-size: 40px;
+      color: #000000;
+      line-height: 47px;
+      margin: 100px 0 68px;
+    }
+    .modes {
+      margin: 0 240px;
+      display: flex;
+      justify-content: space-between;
+      gap: 24px;
+      .item {
+        padding: 24px;
+        background: #FFFFFF;
+        border-radius: 24px 24px 24px 24px;
+        display: flex;
+        flex-direction: column;
+        .name {
+          font-weight: bold;
+          font-size: 20px;
+          color: #000000;
+          line-height: 23px;
+          margin-top: 24px;
+          margin-bottom: 23px;
+        }
+        .desc {
+          font-weight: 400;
+          font-size: 14px;
+          color: rgba(0,0,0,0.6);
+          line-height: 27px;
+          margin-bottom: 6px;
+        }
+        img {
+          width: 66px;
+          height: 66px;
+          margin-left: auto;
+        }
+      }
+    }
+  }
+  .system-info {
+    align-items: center;
+    .title {
+      font-weight: bold;
+      font-size: 40px;
+      color: #000000;
+      line-height: 47px;
+      margin: 100px 0 40px;
+    }
+    .des {
+      margin-bottom: 60px;
+      font-weight: 400;
+      font-size: 14px;
+      color: rgba(0,0,0,0.6);
+      line-height: 27px;
+    }
+    .button {
+      width: 204px;
+      height: 56px;
+      text-align: center;
+      line-height: 56px;
+      color: white;
+      background: #007CF7;
+      border-radius: 37px 37px 37px 37px;
+      margin-bottom: 120px;
+      cursor: pointer;
+    }
+    .system {
+      margin: 0 240px;
+      display: flex;
+      justify-content: space-between;
+      gap: 24px;
+      margin-bottom: 100px;
+      .item {
+        padding: 51px 64px 54px;
+        background: #EDF4FF;
+        border-radius: 24px 24px 24px 24px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .name {
+          font-weight: bold;
+          font-size: 20px;
+          color: #000000;
+          line-height: 23px;
+          margin-top: 35px;
+          margin-bottom: 10px;
+        }
+        .desc {
+          font-weight: 400;
+          font-size: 14px;
+          color: rgba(0,0,0,0.6);
+          line-height: 16px;
+          margin-bottom: 6px;
+        }
+        img {
+          width: 66px;
+          height: 66px;
+        }
+      }
+    }
+  }
+  .device-search {
+    background-color: #F2F4F5;
+    padding: 0 240px;
+    align-items: center;
+    .title {
+      font-weight: bold;
+      font-size: 40px;
+      color: #000000;
+      line-height: 48px;
+      margin: 100px 0 48px;
+    }
+    .filter-buttons {
+      width: 100%;
+      height: 184px;
+      background: #FFFFFF;
+      border-radius: 24px 24px 24px 24px;
+      padding: 40px 24px;
+      box-sizing: border-box;
+      margin-bottom: 56px;
+      .filter-group {
+        font-weight: 400;
+        font-size: 16px;
+        color: #000000;
+        display: flex;
+        margin-bottom: 24px;
+        gap: 16px;
+        label {
+          line-height: 40px;
+          width: 112px;
+        }
+        .button {
+          cursor: pointer;
+          padding: 8px 24px;
+          height: 40px;
+          line-height: 24px;
+          box-sizing: border-box;
+          background: #FFFFFF;
+          border-radius: 4px 4px 4px 4px;
+          border: 1px solid rgba(0,0,0,0.1);
+          &.active {
+            border: 1px solid rgba(0,124,247,0.9);
+            color: rgba(0,124,247,0.9);
+          }
+        }
+      }
+    }
+    .device-list {
+      width: 100%;
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      row-gap: 24px;
+      column-gap: 24px;
+      margin-bottom: 24px;
+      .device-card {
+        height: 443px;
+        background: #FFFFFF;
+        border-radius: 24px 24px 24px 24px;
+        padding: 32px 40px;
+        box-sizing: border-box;
+        p {
+          text-align: center;
+        }
+        .title {
+          margin: 24px 0;
+          font-weight: 500;
+          font-size: 18px;
+          color: #000000;
+          line-height: 21px;
+        }
+        .desc {
+          height: 32px;
+          background: #F2F4F5;
+          line-height: 32px;
+          border-radius: 4px 4px 4px 4px;
+          margin-bottom: 16px;
+        }
+        .company {
+          font-weight: 400;
+          font-size: 14px;
+          color: rgba(0,0,0,0.6);
+          line-height: 16px;
+        }
+      }
+    }
+    .el-pagination {
+      margin-bottom: 100px;
+    }
+  }
+  .all-rights {
+    height: 80px;
+    background: #000000;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    p {
+      line-height: 22px;
+    }
+  }
+}
+
+</style>
\ No newline at end of file