迁移大屏UI库和应用

2022-03-25 11:09:26 +08:00
parent 60bd0b1dff
commit cc87206dbc
104 changed files with 7124 additions and 139 deletions
--- a/project/dvui/layout/AiDvDisplay/components/displayItem.vue
+++ b/project/dvui/layout/AiDvDisplay/components/displayItem.vue
@@ -0,0 +1,64 @@
+<template>
+  <section class="displayItem">
+    <span class="num" v-text="value"/>
+    <span v-text="label"/>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "displayItem",
+  props: {
+    label: {default: "标题"},
+    value: {default: 0},
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.displayItem {
+  width: 160px;
+  height: 160px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 15px;
+  font-weight: bold;
+  line-height: 26px;
+  position: relative;
+  background-image: url("../asset/displayItem-bg.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+
+  &:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    content: " ";
+    background-image: url("../asset/displayItem-bg1.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    animation: rotate 4s infinite linear;
+    background-color: transparent;
+  }
+
+  .num {
+    font-family: DIN;
+    font-size: 32px;
+    line-height: 32px;
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>