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 | 63 +++++++++++++++++++++++++++++--
1 files changed, 59 insertions(+), 4 deletions(-)
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
index 2189204..fc201a3 100644
--- a/src/views/homePage/index.vue
+++ b/src/views/homePage/index.vue
@@ -1,7 +1,24 @@
<template>
<div class="mapChart">
<div class="leftChart">
- <map-chart></map-chart>
+ <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>
@@ -12,25 +29,63 @@
<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;
+ overflow: hidden;
+ background: #333333;
}
.leftChart {
flex: 1;
}
+.chartContent {
+ width: 100%;
+ height: 100%;
+ /* background: skyblue; */
+ display: flex;
+ flex-direction: column;
+}
+.chartHeader {
+ width: 100%;
+ height: 38px;
+}
+.chartContent .chartBox {
+ flex: 1;
+ display: flex;
+
+ /* justify-content: center; */
+
+ /*
+ height: (100% - 38px);
+*/
+}
+.leftContent {
+ 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%;
height: 100%;
--
Gitblit v1.9.3