From 7d8fabb5feddf7d2daffd2452781c515d2eb13cd Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期三, 17 四月 2024 15:34:52 +0800 Subject: [PATCH] Merge branch 'dev-threejs' --- src/views/screen/components/screen-wrapper/index.vue | 28 +++++++++++++++++++++++----- 1 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue index b2dac5e..680c6d1 100644 --- a/src/views/screen/components/screen-wrapper/index.vue +++ b/src/views/screen/components/screen-wrapper/index.vue @@ -5,13 +5,14 @@ 杩斿洖 </div> <div class="wrapper-content"> + <screen-map-three></screen-map-three> <div class="left-container wrapper"> <screen-face class="enter-left" :class="{ 'animate-enter-x': isEnd }"></screen-face> <screen-car class="enter-left animate-delay-1" :class="{ 'animate-enter-x': isEnd }"></screen-car> <screen-video class="enter-left animate-delay-2" :class="{ 'animate-enter-x': isEnd }"></screen-video> </div> <div class="center-container center-wrapper"> - <screen-map></screen-map> + <screen-map-cover></screen-map-cover> <screen-table class="enter-top" :class="{ 'animate-enter-y': isEnd }"></screen-table> <!-- <screen-detection></screen-detection> --> @@ -30,16 +31,19 @@ import ScreenFace from '../screen-face/index'; import ScreenVideo from '../screen-video/index'; import ScreenCar from '../screen-car/index'; -import ScreenMap from '../screen-map/index'; +import ScreenMapCover from '../screen-map-cover/index'; import ScreenTable from '../screen-table/index'; +import ScreenMapThree from '../screen-map-three/index'; import ScreenData from '../screen-data/index'; + export default { name: 'ScreenWrapper', components: { SelectItem, ScreenExamine, - ScreenMap, ScreenTable, + ScreenMapCover, + ScreenMapThree, ScreenFace, ScreenVideo, ScreenCar, @@ -133,24 +137,30 @@ 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; } @@ -164,14 +174,22 @@ } @keyframes enter-x { - 100% { + from { + opacity: 0; + } + + to { opacity: 1; transform: translateX(0); } } @keyframes enter-y { - 100% { + from { + opacity: 0; + } + + to { opacity: 1; transform: translateY(0); } -- Gitblit v1.8.0