机械传动

src/components/MechanicalDrive.vue

@@ -9,30 +9,19 @@
       />
     </div>
     <div class="grid_layouts">
-      <div class="card">
-        <div class="img"></div>
-        <div class="title"><p class="text">同步带传动</p></div>
+      <div class="card" v-for="item in mechanicalDriveList" :key="item.id">
+        <img class="img" :src="item.pic" />
+        <div class="title">
+          <p class="text">{{ item.title }}</p>
+        </div>
       </div>
-      <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 class="card"></div>
-      <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 class="card"></div>
     </div>
   </div>
 </template>
 
 <script setup>
 import HeadLine from 'cpns/HeadLine'
+import { mechanicalDriveList } from '@/mock'
 </script>
 
 <style lang="scss" scoped>
@@ -54,8 +43,7 @@ import HeadLine from 'cpns/HeadLine'
       border-radius: 3px;
       .img {
         width: 100%;
-        height: 89px;
-        background: #000;
+        height: auto;
       }
       .title {
         font-family: Source Han Sans CN;

src/mock/index.js

@@ -9,6 +9,7 @@ import L8 from '@/static/img/case/li8.png'
 import L9 from '@/static/img/case/li9.png'
 import L10 from '@/static/img/case/li10.png'
 
+// 首页案例展示
 export const caseList = [
   {
     id: 1,
@@ -73,6 +74,7 @@ import Y8 from '@/static/img/hardware/hardware8.png'
 import Y9 from '@/static/img/hardware/hardware9.png'
 import Y10 from '@/static/img/hardware/hardware10.png'
 
+// 首页硬件展示
 export const hardList = [
   {
     id: 1,
@@ -125,3 +127,98 @@ export const hardList = [
     pic: Y10,
   },
 ]
+
+import J1 from '@/static/img/machinery/jixie1.png'
+import J2 from '@/static/img/machinery/jixie2.png'
+import J3 from '@/static/img/machinery/jixie3.png'
+import J4 from '@/static/img/machinery/jixie4.png'
+import J5 from '@/static/img/machinery/jixie5.png'
+import J6 from '@/static/img/machinery/jixie6.png'
+import J7 from '@/static/img/machinery/jixie7.png'
+import J8 from '@/static/img/machinery/jixie8.png'
+import J9 from '@/static/img/machinery/jixie9.png'
+import J10 from '@/static/img/machinery/jixie10.png'
+import J11 from '@/static/img/machinery/jixie11.png'
+import J12 from '@/static/img/machinery/jixie12.png'
+import J13 from '@/static/img/machinery/jixie13.png'
+import J14 from '@/static/img/machinery/jixie14.png'
+import J15 from '@/static/img/machinery/jixie15.png'
+
+// 首页机械传动
+export const mechanicalDriveList = [
+  {
+    id: 1,
+    title: '同步带传动',
+    pic: J1,
+  },
+  {
+    id: 2,
+    title: '链条传动',
+    pic: J2,
+  },
+  {
+    id: 3,
+    title: '丝杠传动',
+    pic: J3,
+  },
+  {
+    id: 4,
+    title: '直线导轨',
+    pic: J4,
+  },
+  {
+    id: 5,
+    title: '气缸传动',
+    pic: J5,
+  },
+  {
+    id: 6,
+    title: '电动顶杆',
+    pic: J6,
+  },
+  {
+    id: 7,
+    title: '锥齿传动',
+    pic: J7,
+  },
+  {
+    id: 8,
+    title: '齿轮传动',
+    pic: J8,
+  },
+  {
+    id: 9,
+    title: '涡轮蜗杆',
+    pic: J9,
+  },
+  {
+    id: 10,
+    title: '齿轮齿条',
+    pic: J10,
+  },
+  {
+    id: 11,
+    title: '行星减速机',
+    pic: J11,
+  },
+  {
+    id: 12,
+    title: '液压传动',
+    pic: J12,
+  },
+  {
+    id: 13,
+    title: '行星轮传动',
+    pic: J13,
+  },
+  {
+    id: 14,
+    title: 'RV减速机',
+    pic: J14,
+  },
+  {
+    id: 15,
+    title: '谐波减速机',
+    pic: J15,
+  },
+]