动效优化

components/layout/AiDvDisplay/AiDvDisplay.vue

@@ -5,11 +5,11 @@
       <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">
+    <div class="displayPanel fill">
+      <div class="animation abs-center">
         <component class="item" v-for="(op,i) in list" :key="i" :is="item" v-bind="op" :style="{transform:getPos(i)}"/>
       </div>
+      <component class="content-background abs-center" :is="type"/>
     </div>
   </section>
 </template>
@@ -29,10 +29,6 @@ export default {
     },
     list: {default: () => []},
   },
-  data () {
-    return {
-    }
-  },
   methods: {
     getPos(i) {
       let unit = this.list.length > 0 ? 2 * Math.PI / this.list.length : 0,
@@ -48,6 +44,15 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .abs-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 
   .display-top {
     position: relative;
@@ -96,17 +101,15 @@ export default {
   }
 
   .displayPanel {
-    position: absolute;
-    width: 160px;
-    height: 160px;
-    transform: translate(-50%, -50%);
-    top: 50%;
-    left: 50%;
-    z-index: 9;
+    position: relative;
+    transform-style: preserve-3d;
 
     .animation {
       animation: rotate3D 30s infinite linear;
       transform-style: preserve-3d;
+      width: 160px;
+      height: 160px;
+      margin-top: -50px;
 
       &:hover {
         animation-play-state: paused;
@@ -115,16 +118,21 @@ export default {
 
     .item {
       position: absolute;
+      transform-style: preserve-3d;
     }
   }
+
+  .content-background {
+    transform-style: preserve-3d;
+  }
 }
 
 @keyframes rotate3D {
   from {
-    transform: rotateY(0deg);
+    transform: translate(-50%, -50%) rotateX(-10deg) rotateY(0deg);
   }
   to {
-    transform: rotateY(360deg);
+    transform: translate(-50%, -50%) rotateX(-10deg) rotateY(360deg);
   }
 }
 

components/layout/AiDvDisplay/components/Display0.vue

@@ -2,48 +2,49 @@
   <div class="display0">
     <div class="display0-container">
       <div class="display0-content">
-        <img src="https://cdn.cunwuyun.cn/dvcp/dv/img/display0-left.png">
-        <img src="https://cdn.cunwuyun.cn/dvcp/dv/img/display0-left.png">
+        <img class="leftBg" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display0-left.png">
+        <img class="contentBg" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display0-bg.png" alt=""/>
+        <img class="leftBg" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display0-left.png">
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'display0',
-
-    data () {
-      return {
-      }
-    }
-  }
+export default {
+  name: 'display0',
+}
 </script>
 
 <style lang="scss" scoped>
-  .display0 {
-    position: relative;
-    width: 840px;
+.display0 {
+  //position: relative;
+  width: 840px;
+  height: 465px;
+
+  .display0-content {
+    display: flex;
+    position: absolute;
+    width: 100%;
     height: 465px;
-    background: url(./../asset/display0-bg.png) no-repeat center;
+    align-items: center;
+    justify-content: space-between;
     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;
+    .leftBg {
+      position: absolute;
+      left: 0;
+
+      &:last-of-type {
+        left: unset;
+        right: 0;
         transform: rotate(180deg);
       }
     }
+    .contentBg{
+      transform-style: preserve-3d;
+    }
   }
+}
 </style>