迁移大屏UI库和应用

project/dvui/layout/AiDvDisplay/components/Display0.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="display0">
+    <div class="display0-container">
+      <div class="display0-content">
+        <img src="../asset/display0-left.png">
+        <img src="../asset/display0-left.png">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'display0',
+
+    data () {
+      return {
+
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .display0 {
+    position: relative;
+    width: 840px;
+    height: 465px;
+    background: url(../asset/display0-bg.png) no-repeat center;
+    background-size: cover;
+
+    .display0-content {
+      display: flex;
+      position: absolute;
+      top: 50%;
+      width: 100%;
+      height: 465px;
+      transform: translateY(-50%);
+      align-items: center;
+      justify-content: space-between;
+      background: url(../asset/display0-bg.png) no-repeat center;
+      background-size: cover;
+
+      img:last-child {
+        position: relative;
+        transform: rotate(180deg);
+      }
+    }
+  }
+</style>

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>