动效优化

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>