bigscreen style fixed

components/layout/AiDvSummary/components/Summary19.vue

@@ -2,8 +2,7 @@
   <div class="summary19">
     <div class="summary19-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
       <div class="label" v-text="item[keys]"/>
-      <span v-text="item[value]"/>
-      <p v-if="item.unit" v-text="item.unit"/>
+      <span v-text="item[value]" :unit="item.unit"/>
     </div>
   </div>
 </template>
@@ -37,8 +36,11 @@ $theme-color: #23ECFD;
   padding: 22px 14px;
   background: hsla(0, 0%, 100%, .04);
   margin: -16px 16px auto;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  //display: grid;
+  //grid-template-columns: repeat(2, 1fr);
   font-size: 14px;
 
   div {
@@ -46,8 +48,9 @@ $theme-color: #23ECFD;
   }
 
   .summary19-item {
+    width: 48%;
     display: grid;
-    grid-template-columns: 4fr 1fr 20px;
+    grid-template-columns: 3fr 1fr;
     align-items: baseline;
     //justify-content: space-between;
     gap: 4px;
@@ -58,6 +61,11 @@ $theme-color: #23ECFD;
       color: $theme-color;
       min-width: 60px;
       margin-left: 8px;
+
+      &:after {
+        content: attr(unit);
+        font-size: 14px;
+      }
     }
 
     p {