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 | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 103 insertions(+), 0 deletions(-)
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
new file mode 100644
index 0000000..fc201a3
--- /dev/null
+++ b/src/views/homePage/index.vue
@@ -0,0 +1,103 @@
+<template>
+ <div class="mapChart">
+ <div class="leftChart">
+ <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>
+ </div>
+ </div>
+</template>
+
+<script>
+import mapChart from "./../mapChart/index.vue";
+import mapView from "./../mapView/index.vue";
+import chartHeader from "./../mapChart/chartHeader.vue";
+export default {
+ components: {
+ mapChart,
+ mapView,
+ chartHeader
+ },
+ mounted() {}
+};
+</script>
+
+<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;
+ 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%;
+ transition: 1s ease-out;
+}
+.rightMap {
+ width: 0%;
+ height: 100%;
+ transition: 1s;
+}
+.chartHeader {
+ width: 100%;
+ height: 38px;
+}
+</style>
--
Gitblit v1.9.3