one stop

src/components/OneStop.vue

@@ -9,24 +9,25 @@
       />
     </div>
     <div class="design_cards">
-      <div class="card">
-        <div class="img"></div>
+      <div class="card" v-for="item in OneList" :key="item.id">
+        <img class="img" :src="item.pic" />
         <div class="btn_wrap">
-          <p>工业设计</p>
-          <div class="btn"><span class="fontscale">查看详情</span></div>
+          <p>{{ item.title }}</p>
+          <div v-if="item.btn" class="btn">
+            <span class="fontscale">查看详情</span>
+          </div>
+          <div v-else class="btn2">
+            <span class="fontscale">{{ item.en }}</span>
+          </div>
         </div>
       </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 { OneList } from '@/mock'
 </script>
 
 <style lang="scss" scoped>
@@ -60,6 +61,7 @@ import HeadLine from 'cpns/HeadLine'
         font-size: 7px;
         font-family: Source Han Sans CN;
         font-weight: 400;
+        white-space: nowrap;
         color: #020208;
         .btn {
           background: #f94622;
@@ -78,6 +80,21 @@ import HeadLine from 'cpns/HeadLine'
             white-space: nowrap;
           }
         }
+        .btn2 {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 49px;
+          height: 17px;
+          .fontscale {
+            transform: scale(0.4);
+            white-space: nowrap;
+            font-size: 12px;
+            font-family: Zona Pro;
+            font-weight: 600;
+            color: #000000;
+          }
+        }
       }
     }
   }

src/components/Track.vue

@@ -37,8 +37,7 @@ import { trackList } from '@/mock'
     align-items: center;
     .icon {
       width: 20px;
-      height: 20px;
-      background: #000;
+      height: auto;
       margin-bottom: 11px;
     }
     .title {

src/mock/index.js

@@ -290,3 +290,49 @@ export const trackList = [
     bg: true,
   },
 ]
+
+import O1 from '@/static/img/onestop/onestop1.png'
+import O2 from '@/static/img/onestop/onestop2.png'
+import O3 from '@/static/img/onestop/onestop3.png'
+import O4 from '@/static/img/onestop/onestop4.png'
+import O5 from '@/static/img/onestop/onestop5.png'
+import O6 from '@/static/img/onestop/onestop6.png'
+
+export const OneList = [
+  {
+    id: 1,
+    title: '工业设计',
+    pic: O1,
+    btn: true,
+  },
+  {
+    id: 2,
+    title: '结构设计',
+    pic: O2,
+    btn: true,
+  },
+  {
+    id: 3,
+    title: '软件研发',
+    pic: O3,
+    btn: true,
+  },
+  {
+    id: 4,
+    title: '硬件研发',
+    pic: O4,
+    btn: true,
+  },
+  {
+    id: 5,
+    title: '样机制作',
+    pic: O5,
+    en: 'INDUSTRIAL DESIGN',
+  },
+  {
+    id: 6,
+    title: '产品量产',
+    pic: O6,
+    en: 'INDUSTRIAL DESIGN',
+  },
+]