case show

src/components/CaseShow.vue

@@ -1,15 +1,20 @@
 <template>
   <div class="case_show_container">
     <HeadLine
-      title="案例展示"
+      themeTitle="案例"
+      title="展示"
       line1="医疗健康、智能硬件、工业设备、高铁设备、户外设备"
       line2="特种设备、智能家居、实验仪器、消费电子"
     />
     <div class="line_cards">
       <div class="card"></div>
       <div class="card"></div>
-    </div>
-    <div class="line_cards nomg">
+      <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>
@@ -23,18 +28,17 @@ import HeadLine from 'cpns/HeadLine'
 <style lang="scss" scoped>
 .case_show_container {
   .line_cards {
-    margin-top: 35px;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+    column-gap: 7px;
+    row-gap: 7px;
     .card {
+      height: 132px;
+      background: #ffffff;
+      border-radius: 3px;
       flex: 1;
-      height: 162px;
-      background: #000;
     }
   }
-  .nomg {
-    margin-top: 0;
-  }
 }
 </style>