From 2bd38f3c07fa4ec63c5b5fd99bca19d2b1b4ee2d Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期二, 19 三月 2024 14:54:50 +0800 Subject: [PATCH] refactor --- src/views/screen/components/screen-wrapper/index.vue | 20 ++++++++++++++++---- 1 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue index 6c44f8e..532a79a 100644 --- a/src/views/screen/components/screen-wrapper/index.vue +++ b/src/views/screen/components/screen-wrapper/index.vue @@ -1,14 +1,18 @@ <template> <div class="wrapper-container"> + <div class="wrapper-content"> <div class="left-container wrapper"> <screen-face></screen-face> + <screen-car></screen-car> + <screen-video></screen-video> </div> <div class="center-container wrapper"> <screen-detection></screen-detection> + </div> <div class="right-container wrapper"> - + <screen-examine></screen-examine> </div> </div> </div> @@ -17,11 +21,17 @@ <script> import ScreenFace from '../screen-face/index'; import ScreenDetection from '../screen-detection/index'; +import ScreenExamine from '../screen-examine/index'; +import ScreenVideo from '../screen-video/index'; +import ScreenCar from '../screen-car/index'; export default { name: 'ScreenWrapper', components: { ScreenFace, - ScreenDetection + ScreenDetection, + ScreenExamine, + ScreenVideo, + ScreenCar }, } </script> @@ -34,16 +44,17 @@ top: 0; left: 0; z-index: 1; + .wrapper-content { width: 100%; height: calc(100% - 100px); margin-top: 100px; - border: 1px solid red; position: relative; box-sizing: border-box; padding: 20px; display: flex; align-items: center; + justify-content: space-between; } } @@ -52,13 +63,14 @@ height: 100%; box-sizing: border-box; padding: 0 10px; - border: 1px solid red; display: flex; flex-direction: column; justify-content: space-between; + &:first-of-type { padding-left: 0; } + &:last-of-type { padding-right: 0; } -- Gitblit v1.8.0