单独构建大屏ui库,避免引入混乱

ui/dv/layout/AiDvSummary/components/Summary19.vue

@@ -0,0 +1,78 @@
+<template>
+  <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]" :unit="item.unit"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'summary19',
+
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+
+    keys: {
+      type: String,
+      default: 'key'
+    },
+
+    value: {
+      type: String,
+      default: 'value'
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$theme-color: #23ECFD;
+.summary19 {
+  padding: 22px 14px;
+  background: hsla(0, 0%, 100%, .04);
+  margin: -16px 16px auto;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  font-size: 14px;
+
+  div {
+    box-sizing: border-box;
+  }
+
+  .summary19-item {
+    width: 48%;
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    align-items: baseline;
+    gap: 4px;
+
+    span {
+      font-family: D-DIN;
+      font-size: 22px;
+      color: $theme-color;
+      min-width: 60px;
+      margin-left: 8px;
+
+      &:after {
+        content: attr(unit);
+        font-size: 14px;
+      }
+    }
+
+    p {
+      color: $theme-color;
+    }
+
+    .label {
+      color: white;
+      text-align: right;
+    }
+  }
+}
+</style>