From 07e7a6323d6f98fe2dfdf2733daf457a4e4f42f4 Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期四, 28 三月 2024 14:13:38 +0800 Subject: [PATCH] style:登录页面样式 --- src/views/screen/components/screen-wrapper/index.vue | 54 ++++++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 48 insertions(+), 6 deletions(-) diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue index c8e55ed..2d1ba35 100644 --- a/src/views/screen/components/screen-wrapper/index.vue +++ b/src/views/screen/components/screen-wrapper/index.vue @@ -1,30 +1,61 @@ <template> <div class="wrapper-container"> + <select-item></select-item> + <div class="return-button"> + <el-button type="primary" @click="returnPath">绠$悊绯荤粺</el-button> + </div> <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"> + <div class="center-container center-wrapper"> + <screen-map></screen-map> + <screen-table></screen-table> + <!-- <screen-detection></screen-detection> --> </div> <div class="right-container wrapper"> - + <screen-examine></screen-examine> </div> </div> </div> </template> <script> +import SelectItem from '../select-item/index'; import ScreenFace from '../screen-face/index'; +import ScreenExamine from '../screen-examine/index'; +import ScreenVideo from '../screen-video/index'; +import ScreenCar from '../screen-car/index'; +import ScreenMap from '../screen-map/index'; +import ScreenTable from '../screen-table/index'; export default { name: 'ScreenWrapper', components: { - ScreenFace + SelectItem, + ScreenFace, + ScreenExamine, + ScreenVideo, + ScreenCar, + ScreenMap, + ScreenTable }, + methods: { + returnPath() { + this.$router.push('/index'); + } + } } </script> <style lang="scss" scoped> +.return-button { + position: absolute; + right: 20px; + top: 40px; +} .wrapper-container { width: 100%; height: 100%; @@ -32,33 +63,44 @@ 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; } } .wrapper { - width: 33.3%; + width: 25%; 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; } } +.center-wrapper { + width: 50%; + height: 100%; + box-sizing: border-box; + padding: 0 10px; + display: flex; + flex-direction: column; + justify-content: space-between; +} </style> \ No newline at end of file -- Gitblit v1.8.0