九大赛道

src/components/Track.vue

@@ -2,25 +2,22 @@
   <div>
     <HeadLine themeTitle="赛道" title="九大" line1="TRACK" :flip="true" />
     <div class="track_container">
-      <div class="card">
-        <div class="icon"></div>
-        <p class="title">医疗健康</p>
+      <div
+        :class="item.bg ? 'card bg' : 'card'"
+        v-for="item in trackList"
+        :key="item.id"
+      >
+        <img class="icon" :src="item.pic" />
+        <p class="title">{{ item.title }}</p>
         <div class="btn">点击查看更多</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>
   </div>
 </template>
 
 <script setup>
 import HeadLine from 'cpns/HeadLine'
+import { trackList } from '@/mock'
 </script>
 
 <style lang="scss" scoped>
@@ -33,8 +30,8 @@ import HeadLine from 'cpns/HeadLine'
   box-sizing: border-box;
   .card {
     flex: 1;
-    background: #fafafa;
-    padding: 30px;
+    background: #fff;
+    padding: 30px 0;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -64,5 +61,8 @@ import HeadLine from 'cpns/HeadLine'
       white-space: nowrap;
     }
   }
+  .bg {
+    background: #fafafa;
+  }
 }
 </style>

src/mock/index.js

@@ -222,3 +222,71 @@ export const mechanicalDriveList = [
     pic: J15,
   },
 ]
+
+import T1 from '@/static/img/track/track1.png'
+import T2 from '@/static/img/track/track2.png'
+import T3 from '@/static/img/track/track3.png'
+import T4 from '@/static/img/track/track4.png'
+import T5 from '@/static/img/track/track5.png'
+import T6 from '@/static/img/track/track6.png'
+import T7 from '@/static/img/track/track7.png'
+import T8 from '@/static/img/track/track8.png'
+import T9 from '@/static/img/track/track9.png'
+
+// 首页赛道
+export const trackList = [
+  {
+    id: 1,
+    title: '医疗健康',
+    pic: T1,
+    bg: true,
+  },
+  {
+    id: 2,
+    title: '智能硬件',
+    pic: T2,
+    bg: false,
+  },
+  {
+    id: 3,
+    title: '工业设备',
+    pic: T3,
+    bg: true,
+  },
+  {
+    id: 4,
+    title: '高铁设备',
+    pic: T4,
+    bg: false,
+  },
+  {
+    id: 5,
+    title: '户外设备',
+    pic: T5,
+    bg: true,
+  },
+  {
+    id: 6,
+    title: '特种装备',
+    pic: T6,
+    bg: false,
+  },
+  {
+    id: 7,
+    title: '智能家居',
+    pic: T7,
+    bg: true,
+  },
+  {
+    id: 8,
+    title: '实验仪器',
+    pic: T8,
+    bg: false,
+  },
+  {
+    id: 9,
+    title: '消费电子',
+    pic: T9,
+    bg: true,
+  },
+]