From 84cab370f2421d6823021e93ecb0e1e47dce4410 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期二, 02 四月 2024 11:52:33 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'

---
 src/views/screen/components/screen-wrapper/index.vue |   59 ++++++++++++++++++++++++++++++++++++++++++++++++++++-------
 1 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue
index 2d1ba35..d375a26 100644
--- a/src/views/screen/components/screen-wrapper/index.vue
+++ b/src/views/screen/components/screen-wrapper/index.vue
@@ -6,18 +6,18 @@
     </div>
     <div class="wrapper-content">
       <div class="left-container wrapper">
-        <screen-face></screen-face>
-        <screen-car></screen-car>
-        <screen-video></screen-video>
+        <screen-face class="animate-enter-x enter-left"></screen-face>
+        <screen-car class="animate-enter-x enter-left animate-delay-1"></screen-car>
+        <screen-video class="animate-enter-x enter-left animate-delay-2"></screen-video>
       </div>
       <div class="center-container center-wrapper">
         <screen-map></screen-map>
-        <screen-table></screen-table>
+        <screen-table class="animate-enter-y enter-top"></screen-table>
         <!-- <screen-detection></screen-detection> -->
 
       </div>
       <div class="right-container wrapper">
-        <screen-examine></screen-examine>
+        <screen-examine class="animate-enter-x enter-right"></screen-examine>
       </div>
     </div>
   </div>
@@ -56,6 +56,7 @@
   right: 20px;
   top: 40px;
 }
+
 .wrapper-container {
   width: 100%;
   height: 100%;
@@ -78,7 +79,7 @@
 }
 
 .wrapper {
-  width: 25%;
+  width: 20%;
   height: 100%;
   box-sizing: border-box;
   padding: 0 10px;
@@ -94,8 +95,9 @@
     padding-right: 0;
   }
 }
+
 .center-wrapper {
-  width: 50%;
+  width: 60%;
   height: 100%;
   box-sizing: border-box;
   padding: 0 10px;
@@ -103,4 +105,47 @@
   flex-direction: column;
   justify-content: space-between;
 }
+.animate-enter-x {
+  animation: enter-x 0.4s ease forwards;
+}
+.animate-enter-y {
+  animation: enter-y 0.4s ease forwards;
+}
+.enter-left {
+  transform: translateX(-100px);
+  opacity: 0;
+}
+.enter-right {
+  transform: translateX(100px);
+  opacity: 0;
+}
+.enter-top {
+  transform: translateY(100px);
+  opacity: 0;
+}
+.animate-delay-1 {
+  animation-delay: 0.1s;
+}
+
+.animate-delay-2 {
+  animation-delay: 0.3s;
+}
+
+.animate-delay-3 {
+  animation-delay: 0.5s;
+}
+
+@keyframes enter-x {
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes enter-y {
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 </style>
\ No newline at end of file

--
Gitblit v1.8.0