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

2024-04-12 10:22:47 +08:00
parent a4d4e3cea5
commit b5523f5f40
191 changed files with 374 additions and 355 deletions
--- a/ui/dv/layout/AiDvSummary/components/Summary20.vue
+++ b/ui/dv/layout/AiDvSummary/components/Summary20.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="summary20">
+    <div class="item" v-for="(item, i) in list" :key="i">
+      <div class="label" v-text="item[keys]"/>
+      <div class="value" v-text="item[value]"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'summary20',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+
+    keys: {
+      type: String,
+      default: 'key'
+    },
+
+    value: {
+      type: String,
+      default: 'value'
+    }
+  },
+  computed: {
+    list: v => v.data?.slice(0, 4) || []
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.summary20 {
+  .item {
+    margin-bottom: 20px;
+  }
+
+  .label {
+    font-weight: 500;
+    font-size: 18px;
+    color: #9BB7D4;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+
+    &:before {
+      content: ">";
+      color: #FFDA52;
+      margin-right: 6px;
+      font-size: 14px;
+    }
+  }
+
+  .value {
+    color: white;
+    width: 100%;
+    padding: 6px 14px;
+    font-family: DIN;
+    font-weight: 700;
+    font-size: 30px;
+    background-image: linear-gradient(90deg, #01c4ec07 0%, #01c4ec27 100%);
+  }
+}
+</style>