From 6ae4841b48665145aa469d574fbadb988a9c498c Mon Sep 17 00:00:00 2001 From: suerprisePlus <15810472099@163.com> Date: 星期四, 27 六月 2024 15:55:17 +0800 Subject: [PATCH] 演示1版本 --- src/views/homePage/index.vue | 58 +++++++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 47 insertions(+), 11 deletions(-) diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue index ddd7f6c..fc201a3 100644 --- a/src/views/homePage/index.vue +++ b/src/views/homePage/index.vue @@ -1,13 +1,24 @@ <template> <div class="mapChart"> <div class="leftChart"> - <div - :class=" - $store.state.setScreenFlag ? 'leftContentActive' : 'leftContent' - " - > - <map-chart></map-chart></div> + <div class="chartContent"> + <div class="chartHeader"> + <chartHeader></chartHeader> + </div> + <div class="chartBox"> + <div + :class=" + $store.state.setScreenFlag ? 'leftContentActive' : 'leftContent' + " + > + <map-chart></map-chart> + </div> + </div> + </div> <!-- --> + <!-- --> + + <!-- </div> --> </div> <div :class="$store.state.setScreenFlag ? 'rightMapActive' : 'rightMap'"> <map-view></map-view> @@ -18,37 +29,62 @@ <script> import mapChart from "./../mapChart/index.vue"; import mapView from "./../mapView/index.vue"; +import chartHeader from "./../mapChart/chartHeader.vue"; export default { components: { mapChart, - mapView + mapView, + chartHeader }, mounted() {} }; </script> -<style> +<style scoped> .mapChart { width: 100%; height: 100%; display: flex; overflow: hidden; + background: #333333; } .leftChart { flex: 1; +} +.chartContent { + width: 100%; + height: 100%; + /* background: skyblue; */ display: flex; - justify-content: center; + flex-direction: column; +} +.chartHeader { + width: 100%; + height: 38px; +} +.chartContent .chartBox { + flex: 1; + display: flex; + + /* justify-content: center; */ + + /* + height: (100% - 38px); +*/ } .leftContent { - width: 50%; + width: 100%; height: 100%; transition: 1s ease-out; + display: flex; + justify-content: center; + background: skyblue; } .leftContentActive { width: 100%; height: 100%; transition: 1s ease-out; - + background: skyblue; } .rightMapActive { width: 50%; -- Gitblit v1.9.3