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