feat: 搭建全市页面的布局

src/views/main/index.vue

@@ -1,18 +1,36 @@
 <template >
   <PageBackground id="main-page">
     <Header />
+    <div class="content-module">
+      <div class="content-top">
+        <LeftModule class="left" />
+        <CenterMapModule class="center" />
+        <RightModule class="right"/>
+      </div>
+      <div  class="content-bottom">
+        <BottomModule />
+      </div>
+    </div>
   </PageBackground>
 </template>
 
 <script>
 import PageBackground from './components/PageBackground.vue'
 import Header from './components/Header.vue'
+import BottomModule from './modules/bottom/index.vue'
+import LeftModule from './modules/left/index.vue'
+import RightModule from './modules/right/index.vue'
+import CenterMapModule from './modules/center-map/index.vue'
 
 export default {
   name: 'MainView',
   components: {
     Header,
-    PageBackground
+    PageBackground,
+    LeftModule,
+    RightModule,
+    BottomModule,
+    CenterMapModule
   },
   data() {
     return {}
@@ -25,5 +43,27 @@ export default {
 #main-page {
   width: 100vw;
   height: 100vh;
+  .content-module {
+    margin-top: 18px;
+    display: flex;
+    flex-direction: column;
+    .content-top {
+      height: 618px;
+      margin: 0px 5.5px 5.5px 5.5px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      .left {
+        width: 368px;
+      }
+      .center {
+        width: 1135px;
+        height: 590px;
+      }
+      .right {
+        width: 381px;
+      }
+    }
+  }
 }
 </style>

src/views/main/modules/bottom/index.vue

@@ -0,0 +1,17 @@
+<template >
+  <div style="color: #fff;background-color: #B32FF7;">Bottom</div>
+</template>
+
+<script>
+
+export default {
+  name: 'Main.Bottom',
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang='less'>
+</style>

src/views/main/modules/center-map/index.vue

@@ -0,0 +1,17 @@
+<template >
+  <div style="color: #fff;background-color: #9C27D8;">CenterMap</div>
+</template>
+
+<script>
+
+export default {
+  name: 'Main.CenterMap',
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang='less'>
+</style>

src/views/main/modules/left/index.vue

@@ -0,0 +1,17 @@
+<template >
+  <div style="color: #fff;background-color: #8521B9;">Left</div>
+</template>
+
+<script>
+
+export default {
+  name: 'Main.Left',
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang='less'>
+</style>

src/views/main/modules/right/index.vue

@@ -0,0 +1,17 @@
+<template >
+  <div style="color: #fff;background-color:#631889;">Right</div>
+</template>
+
+<script>
+
+export default {
+  name: 'Main.Right',
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang='less'>
+</style>