From a079b51dedafb805f9269826e24208ce28b43884 Mon Sep 17 00:00:00 2001 From: 龚焕茏 <2842157468@qq.com> Date: 星期二, 26 三月 2024 18:01:43 +0800 Subject: [PATCH] 卡片图片预览 --- src/views/screen/components/screen-wrapper/index.vue | 52 +++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 45 insertions(+), 7 deletions(-) diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue index 0dbff49..2d1ba35 100644 --- a/src/views/screen/components/screen-wrapper/index.vue +++ b/src/views/screen/components/screen-wrapper/index.vue @@ -1,11 +1,20 @@ <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"> - <screen-detection></screen-detection> + <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> @@ -15,20 +24,38 @@ </template> <script> +import SelectItem from '../select-item/index'; 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'; +import ScreenMap from '../screen-map/index'; +import ScreenTable from '../screen-table/index'; export default { name: 'ScreenWrapper', components: { + SelectItem, ScreenFace, - ScreenDetection, 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%; @@ -36,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