diff --git a/src/components/AboutUs.vue b/src/components/AboutUs.vue
new file mode 100644
index 0000000..d9e27e3
--- /dev/null
+++ b/src/components/AboutUs.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="about_us_card_container">about us</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.about_us_card_container {
+  padding: 58px 34px 83px 34px;
+  background: #e6effc;
+}
+</style>
diff --git a/src/components/Awards.vue b/src/components/Awards.vue
new file mode 100644
index 0000000..c755165
--- /dev/null
+++ b/src/components/Awards.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="awards_container">
+    <div class="header_wrap">
+      <HeadLine title="荣获奖项" />
+    </div>
+    <div class="award_cards">
+      <div class="card"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import HeadLine from 'cpns/HeadLine'
+</script>
+
+<style lang="scss" scoped>
+.awards_container {
+  .header_wrap {
+    padding: 33px 0;
+    background: #edf0f6;
+  }
+  .award_cards {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    .card {
+      width: 100%;
+      height: 125px;
+      background: #f3f4f7;
+    }
+  }
+}
+</style>
diff --git a/src/components/CaseShow.vue b/src/components/CaseShow.vue
index 0247cee..9913299 100644
--- a/src/components/CaseShow.vue
+++ b/src/components/CaseShow.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="case_show_container">
-    <HeadLine />
+    <HeadLine
+      title="案例展示"
+      line1="医疗健康、智能硬件、工业设备、高铁设备、户外设备"
+      line2="特种设备、智能家居、实验仪器、消费电子"
+    />
     <div class="line_cards">
       <div class="card"></div>
       <div class="card"></div>
diff --git a/src/components/Cooperation.vue b/src/components/Cooperation.vue
new file mode 100644
index 0000000..4d37096
--- /dev/null
+++ b/src/components/Cooperation.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="cooperation_container">
+    <div class="header_wrap">
+      <HeadLine
+        title="合作客户"
+        line1="医疗企业  互联网公司  智能硬件公司  科研院所  工业自动化企业"
+      />
+    </div>
+    <div class="client_wrap">
+      <div class="card"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import HeadLine from 'cpns/HeadLine'
+</script>
+
+<style lang="scss" scoped>
+.cooperation_container {
+  .header_wrap {
+    padding: 37px 0 37px 0;
+  }
+  .client_wrap {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+    .card {
+      width: 100%;
+      height: 94px;
+      background: #f3f3f3;
+    }
+  }
+}
+</style>
diff --git a/src/components/HeadLine.vue b/src/components/HeadLine.vue
index 6f38aa0..34b9156 100644
--- a/src/components/HeadLine.vue
+++ b/src/components/HeadLine.vue
@@ -1,12 +1,24 @@
 <template>
   <div class="headline_container">
-    <h2 class="title_h2">案例展示</h2>
-    <p class="line1">医疗健康、智能硬件、工业设备、高铁设备、户外设备</p>
-    <p class="line2">特种设备、智能家居、实验仪器、消费电子</p>
+    <h2 class="title_h2">{{ title }}</h2>
+    <p class="line1" v-if="line1">{{ line1 }}</p>
+    <p class="line2" v-if="line2">{{ line2 }}</p>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+  },
+  line1: {
+    type: String,
+  },
+  line2: {
+    type: String,
+  },
+})
+</script>
 
 <style lang="scss" scoped>
 .headline_container {
@@ -25,13 +37,15 @@
     font-family: Alibaba PuHuiTi;
     font-weight: 300;
     color: #595959;
-    line-height: 9px;
+    line-height: 16px;
+    text-align: center;
   }
   .line2 {
     font-size: 7px;
     font-family: Alibaba PuHuiTi;
     font-weight: 300;
     color: #595959;
+    text-align: center;
     line-height: 9px;
     margin-top: 4px;
   }
diff --git a/src/components/MechanicalDrive.vue b/src/components/MechanicalDrive.vue
new file mode 100644
index 0000000..7a12137
--- /dev/null
+++ b/src/components/MechanicalDrive.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="mechanical_drive_container">
+    <div class="header_wrap">
+      <HeadLine
+        title="机械传动专家"
+        line1="我们精通气动、液动、电动等各种传动机构"
+        line2="完成机械所需的各种动作"
+      />
+    </div>
+    <div class="grid_layouts">
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import HeadLine from 'cpns/HeadLine'
+</script>
+
+<style lang="scss" scoped>
+.mechanical_drive_container {
+  .header_wrap {
+    padding: 39px 0 39px 0;
+    background: #ebeff7;
+  }
+  .grid_layouts {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+    .card {
+      width: 100%;
+      height: 87px;
+      background: #a1abfb;
+    }
+  }
+}
+</style>
diff --git a/src/components/News.vue b/src/components/News.vue
new file mode 100644
index 0000000..e6d14e9
--- /dev/null
+++ b/src/components/News.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="news_container">
+    <div class="header_wrap">
+      <HeadLine title="新闻/NEWS" line1="获取行业最新咨询" />
+    </div>
+    <div class="card_wrap">
+      <div class="card"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import HeadLine from 'cpns/HeadLine'
+</script>
+
+<style lang="scss" scoped>
+.news_container {
+  .header_wrap {
+    padding: 26px 0 23px 0;
+  }
+  .card_wrap {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    .card {
+      width: 100%;
+      background: #000;
+      height: 101px;
+    }
+  }
+}
+</style>
diff --git a/src/components/OneStop.vue b/src/components/OneStop.vue
new file mode 100644
index 0000000..9008ded
--- /dev/null
+++ b/src/components/OneStop.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="one_stop_container">
+    <div class="header_wrap">
+      <HeadLine
+        title="一站式设计+制造的产业链模式"
+        line1="旗下开设独资机箱壳子批量加工中心，消除了客户从概念导入到产品实现全程无障碍之忧"
+        line2="助力产品设计方案快速落地，以最快速度截获市场先机"
+      />
+    </div>
+    <div class="design_cards">
+      <div class="card"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import HeadLine from 'cpns/HeadLine'
+</script>
+
+<style lang="scss" scoped>
+.one_stop_container {
+  .header_wrap {
+    padding: 56px 31px 47px 31px;
+  }
+  .design_cards {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    .card {
+      width: 100%;
+      height: 88px;
+      background: #ddd;
+    }
+  }
+}
+</style>
diff --git a/src/components/Track.vue b/src/components/Track.vue
new file mode 100644
index 0000000..1285109
--- /dev/null
+++ b/src/components/Track.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="track_container">
+    <div class="card"></div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.track_container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  .card {
+    width: 100%;
+    height: 125px;
+    background: #4056fa;
+  }
+}
+</style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 2e95543..a9cd593 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,13 +1,27 @@
 <template>
-  <div>
+  <div class="home_container">
     <Summarize />
     <CaseShow />
+    <MechanicalDrive />
+    <AboutUs />
+    <Track />
+    <OneStop />
+    <News />
+    <Cooperation />
+    <Awards />
   </div>
 </template>
 
 <script setup>
 import Summarize from 'cpns/Summarize'
 import CaseShow from 'cpns/CaseShow'
+import MechanicalDrive from 'cpns/MechanicalDrive'
+import AboutUs from 'cpns/AboutUs'
+import Track from 'cpns/Track'
+import OneStop from 'cpns/OneStop'
+import News from 'cpns/News'
+import Cooperation from 'cpns/Cooperation'
+import Awards from 'cpns/Awards'
 </script>
 
 <style></style>