机械传动card

src/components/MechanicalDrive.vue

@@ -9,7 +9,10 @@
       />
     </div>
     <div class="grid_layouts">
-      <div class="card"></div>
+      <div class="card">
+        <div class="img"></div>
+        <div class="title">同步带传动</div>
+      </div>
       <div class="card"></div>
       <div class="card"></div>
       <div class="card"></div>
@@ -47,9 +50,25 @@ import HeadLine from 'cpns/HeadLine'
     row-gap: 7px;
     .card {
       flex: 1;
-      height: 107px;
       background: #ffffff;
       border-radius: 3px;
+      .img {
+        width: 100%;
+        height: 89px;
+        background: #000;
+      }
+      .title {
+        font-size: 14px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #000000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #fafafa;
+        padding: 12px 0;
+        width: 100%;
+      }
     }
   }
 }