构建版本修改

2022-08-12 11:20:51 +08:00
parent c3f6fbbffe
commit 98946c1e28
167 changed files with 845 additions and 3473 deletions
--- a/components/layout/AiDvDisplay/AiDvDisplay.vue
+++ b/components/layout/AiDvDisplay/AiDvDisplay.vue
@@ -0,0 +1,131 @@
+<template>
+  <section class="AiDvDisplay">
+    <div class="display-top">
+      <img class="left" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display-icon.svg">
+      <h2>{{ title }}</h2>
+      <img class="right" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display-icon.svg">
+    </div>
+    <component class="background" :is="type"/>
+    <div class="displayPanel">
+      <div class="animation">
+        <component class="item" v-for="(op,i) in list" :key="i" :is="item" v-bind="op" :style="{transform:getPos(i)}"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import Display0 from './components/Display0'
+import DisplayItem from "./components/displayItem";
+
+export default {
+  name: 'AiDvDisplay',
+  components: {DisplayItem, Display0},
+  props: {
+    type: {default: 'display0'},
+    item: {default: 'DisplayItem'},
+    title: {
+      default: '数据统计'
+    },
+    list: {default: () => []},
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+    getPos(i) {
+      let unit = this.list.length > 0 ? 2 * Math.PI / this.list.length : 0,
+          corner = this.list.length > 0 ? 360 / this.list.length : 0
+      return `translateZ(${250 * Math.cos(unit * i)}px) translateX(${250 * Math.sin(unit * i)}px) rotateY(${corner * i}deg)`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiDvDisplay {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .display-top {
+    position: relative;
+    width: 840px;
+    background-image: url(asset/display-top.svg);
+    background-size: 1420px 142px;
+    background-position: center;
+    text-align: center;
+    overflow: hidden;
+
+    .left {
+      position: absolute;
+      left: 280px;
+      top: 50%;
+      z-index: 1;
+      width: 35px;
+      height: 22px;
+      background-image: url(asset/display-icon.svg);
+      background-size: 100% 100%;
+      transform: translate(0, -50%);
+    }
+
+    .right {
+      position: absolute;
+      right: 280px;
+      top: 50%;
+      z-index: 1;
+      width: 35px;
+      height: 22px;
+      background-image: url(asset/display-icon.svg);
+      background-size: 100% 100%;
+      transform: translate(0, -50%) rotate(180deg);
+      transform-origin: center;
+    }
+
+    h2 {
+      line-height: 75px;
+      margin: 0;
+      font-size: 36px;
+      color: #FFFFFF;
+      text-shadow: 0px 4px 20px #345FFF;
+      background: linear-gradient(180deg, #FFFFFF 0%, #A1E4FF 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .displayPanel {
+    position: absolute;
+    width: 160px;
+    height: 160px;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+    z-index: 9;
+
+    .animation {
+      animation: rotate3D 30s infinite linear;
+      transform-style: preserve-3d;
+
+      &:hover {
+        animation-play-state: paused;
+      }
+    }
+
+    .item {
+      position: absolute;
+    }
+  }
+}
+
+@keyframes rotate3D {
+  from {
+    transform: rotateY(0deg);
+  }
+  to {
+    transform: rotateY(360deg);
+  }
+}
+
+</style>