一站式卡片

src/components/OneStop.vue

@@ -9,7 +9,13 @@
       />
     </div>
     <div class="design_cards">
-      <div class="card"></div>
+      <div class="card">
+        <div class="img"></div>
+        <div class="btn_wrap">
+          <p>工业设计</p>
+          <div class="btn">查看详情</div>
+        </div>
+      </div>
       <div class="card"></div>
       <div class="card"></div>
       <div class="card"></div>
@@ -38,9 +44,36 @@ import HeadLine from 'cpns/HeadLine'
     column-gap: 7px;
     .card {
       flex: 1;
-      height: 125px;
       border-radius: 3px;
       background: #fff;
+      .img {
+        width: 100%;
+        height: 88px;
+        background: #000;
+      }
+      .btn_wrap {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 12px 10px 16px;
+        box-sizing: border-box;
+        font-size: 7px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #020208;
+        .btn {
+          background: #f94622;
+          border-radius: 8px;
+          padding: 5px 9px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 7px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
     }
   }
 }