From 70c4afc5c81e282b905a56e54ea3ecfde974d14c Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Mon, 19 Jun 2023 15:00:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B9=9D=E5=A4=A7=E8=B5=9B=E9=81=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Track.vue | 26 +++++++++---------
 src/mock/index.js        | 68 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 81 insertions(+), 13 deletions(-)

diff --git a/src/components/Track.vue b/src/components/Track.vue
index ac6e753..b1787a9 100644
--- a/src/components/Track.vue
+++ b/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>
diff --git a/src/mock/index.js b/src/mock/index.js
index 0bf1602..d40df8f 100644
--- a/src/mock/index.js
+++ b/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,
+  },
+]