同步

src/components/area/ProblemArea.vue

@@ -6,19 +6,19 @@
             circle-style="green"
             content-style="89"
             @parentRun="run">
-        <div v-for="o in 50" :key="o">
-            <WindturbineMinCard status="1"></WindturbineMinCard>
+        <div v-for="o in 3" :key="o">
+            <MatrixCard title="故障"></MatrixCard>
         </div>
     </gy-card>
 </template>
 
 <script>
-    import WindturbineMinCard from "./windturbine/WindturbineMinCard.vue";
+    import MatrixCard from "./windturbine/MatrixCard.vue";
 
     export default {
         name: "ProblemArea",
         components: {
-            WindturbineMinCard
+            MatrixCard
         },
         methods: {
             run() {

src/components/area/windturbine/MatrixCard.vue

@@ -1,17 +1,19 @@
 <template>
-  <div>
+<div class="main">
     <div>{{title}}</div>
     <div class="content">
-
+        <div v-for="o in 10" :key="o">
+            <WindturbineMinCard status="1"></WindturbineMinCard>
+        </div>
     </div>
     <div class="bottom"></div>
-  </div>
+</div>
 </template>
 
 <script>
 import WindturbineMinCard from './WindturbineMinCard.vue'
 export default{
-    name="MatrixCard",
+    name:"MatrixCard",
     props:{
         title:String,
     },
@@ -24,9 +26,17 @@ export default{
 <style scoped>
 .content{
     display: grid;
+    grid-template-columns: repeat(5,20%);
 }
 .bottom{
-    border-bottom-width: 2px;
-    border-color: #292929;
+    background-color: #292929;
+    width:100%;
+    height: 2px;
+    margin-top: 5px;
+}
+.main{
+    margin-bottom: 15px;
+    margin-left: 5px;
+    margin-right: 5px;
 }
 </style>

src/components/area/windturbine/WindturbineMinCard.vue

@@ -56,7 +56,7 @@
 <style scoped>
     .card-style-1 {
         position: relative;
-        width: 120px;
+        width: 116px;
         height: 50px;
         border: 2px solid #4952a6;
         background-color: rgba(73, 82, 166, 0.5);
@@ -76,7 +76,7 @@
 
     .card-right-style-1 {
         position: relative;
-        width: calc(120px - 4px - 6px - 25px);
+        width: calc(116px - 4px - 6px - 25px);
         height: calc(50px - 2px);
         border-left: 2px dashed #4952a6;
         box-sizing: border-box;