mechanical drive

src/components/MechanicalDrive.vue

@@ -2,7 +2,8 @@
   <div class="mechanical_drive_container">
     <div class="header_wrap">
       <HeadLine
-        title="机械传动专家"
+        themeTitle="机械传动"
+        title="专家"
         line1="我们精通气动、液动、电动等各种传动机构"
         line2="完成机械所需的各种动作"
       />
@@ -14,6 +15,15 @@
       <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 class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
     </div>
   </div>
 </template>
@@ -25,17 +35,20 @@ import HeadLine from 'cpns/HeadLine'
 <style lang="scss" scoped>
 .mechanical_drive_container {
   .header_wrap {
-    padding: 39px 0 39px 0;
-    background: #ebeff7;
+    background: #f5f5f5;
   }
   .grid_layouts {
+    padding: 0 7px;
+    box-sizing: border-box;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(5, 1fr);
+    column-gap: 7px;
+    row-gap: 7px;
     .card {
-      width: 100%;
-      height: 87px;
-      background: #a1abfb;
+      flex: 1;
+      height: 107px;
+      background: #ffffff;
     }
   }
 }