zhgkpt-datav/app/src/views/HomeView.vue

<template>
  <div class="home">
    <Headers />
    <div>
      <div
        style="padding: 0px 35px; display: flex; justify-content: space-between"
      >
        <div>
          <border-panel
            height="302px"
            style="margin-bottom: 6px"
            title="基础信息"
          >
          <FirstHight/>
          </border-panel>
          <border-panel
            height="346px"
            style="margin-bottom: 6px"
            title="隐患排查（一楼一策）"
          >
            2222
          </border-panel>
          <border-panel height="296px" title="自主管理">
            <AutonomousManagement />
          </border-panel>
        </div>
        <div class="display: flex; ">
          <div class="map">
            <MapCharts/>
          </div>
          <div>
            <border-panel
              title="警情动态"
              width="938px"
              height="321px"
              :header-type="1"
            >
            <AlarmingSituationDynamics />
            <template #ext-header>
              <!-- TODO  实现警情动态日期范围切换事件 -->
              <button-block :items="['本日', '本周', '本月']"/>
            </template>
            </border-panel>
          </div>
        </div>
        <div>
          <border-panel
            height="311px"
            style="margin-bottom: 6px"
            title="风险预警"
          >
           <RiskWarning/>
          </border-panel>
          <border-panel
            height="331px"
            style="margin-bottom: 6px"
            title="智慧消防"
          >
          <WisdomFire/>
          </border-panel>
          <border-panel height="298px" title="火灾指标"> 3333 
            <template #ext-header>
              <!-- TODO  实现火灾指标日期范围切换事件 -->
              <button-block :items="['月', '年']"/>
            </template>
          </border-panel>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Headers from "@/components/Headers.vue";
import FirstHight from "./components/FirstHight.vue";
import AlarmingSituationDynamics from './components/AlarmingSituationDynamics.vue'
import AutonomousManagement from './components/AutonomousManagement.vue'
import MapCharts from "./components/MapCharts.vue";
import RiskWarning from './components/RiskWarning.vue';
import WisdomFire from './components/WisdomFire.vue'
export default {
  components: {
    Headers,
    FirstHight,AlarmingSituationDynamics,
    MapCharts,RiskWarning,
    AutonomousManagement,
    WisdomFire
  }
};
</script>
<style scoped>
.home {
  background: url("../../src/assets/homebg.png") center no-repeat;
  background-size: 100% 100%;
  width: 100%;
}
.map{
flex: 1;

}

</style>