feat: 搭建主页面全市布局

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

@@ -0,0 +1,58 @@
+<template >
+  <div class="EquipmentMaintenanceRanking">
+    <ContainerBorder title="重庆市设备维保排行榜">
+      11
+    </ContainerBorder>
+    <ButtonGroup 
+      class="custom-btn-group"
+      :buttons="buttons"
+    />
+  </div>
+</template>
+
+<script>
+import { ContainerBorder } from '@/components'
+import ButtonGroup from '../../components/ButtonGroup.vue'
+
+export default {
+  name: 'EquipmentMaintenanceRanking',
+  components: {
+    ContainerBorder,
+    ButtonGroup
+  },
+  data() {
+    return {
+      buttons: [
+        {
+          name: '当日',
+          key: 'today'
+        },
+        {
+          name: '近一周',
+          key: 'week'
+        },
+        {
+          name: '近一月',
+          key: 'mouth'
+        }
+      ]}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang='less'>
+.EquipmentMaintenanceRanking {
+  position: relative;
+  width: 937px;
+  height: 342px;
+  background: url('@/assets/images/main-bottom-bg.png') no-repeat;
+  background-size: 100% 100%;
+  
+  .custom-btn-group {
+    position: absolute;
+    top: 20px;
+    right: 0;
+  }
+}
+</style>

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

@@ -0,0 +1,59 @@
+<template >
+  <div class="FirePatrolRanking">
+    <ContainerBorder title="重庆市防火巡查排行榜">
+      11
+    </ContainerBorder>
+    <ButtonGroup 
+      class="custom-btn-group"
+      :buttons="buttons"
+    />
+  </div>
+</template>
+
+<script>
+import { ContainerBorder } from '@/components'
+import ButtonGroup from '../../components/ButtonGroup.vue'
+
+export default {
+  name: 'FirePatrolRanking',
+  components: {
+    ContainerBorder,
+    ButtonGroup
+  },
+  data() {
+    return {
+      buttons: [
+        {
+          name: '当日',
+          key: 'today'
+        },
+        {
+          name: '近一周',
+          key: 'week'
+        },
+        {
+          name: '近一月',
+          key: 'mouth'
+        }
+      ]
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang='less'>
+.FirePatrolRanking {
+  position: relative;
+  width: 937px;
+  height: 342px;
+  background: url('@/assets/images/main-bottom-bg.png') no-repeat;
+  background-size: 100% 100%;
+
+  .custom-btn-group {
+    position: absolute;
+    top: 20px;
+    right: 0;
+  }
+}
+</style>

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

@@ -1,11 +1,29 @@
 <template >
-  <div style="color: #fff;background-color: #B32FF7;">Bottom</div>
+  <div class="main-bottom" style="color: #fff;">
+    <div>
+      <FirePatrolRanking />
+    </div>
+    <div >
+      <EquipmentMaintenanceRanking />
+    </div>
+  </div>
 </template>
 
 <script>
+import EquipmentMaintenanceRanking from './EquipmentMaintenanceRanking.vue'
+import FirePatrolRanking from './FirePatrolRanking.vue'
 
 export default {
   name: 'Main.Bottom',
+  components: {
+    EquipmentMaintenanceRanking,
+    FirePatrolRanking
+  },
+  provide() {
+    return {
+      pos: 'left'
+    }
+  },
   data() {
     return {}
   },
@@ -14,4 +32,10 @@ export default {
 </script>
 
 <style scoped lang='less'>
+.main-bottom{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5.5px 5.5px 0px 5.5px;
+}
 </style>