<!-- 首页 -->
<template>
  <div class="container home-wrapper">
    <!-- 顶部 card  -->
    <top-panel class="row-container" />
    <!-- 中部图表  -->
    <MiddleChart class="row-container"></MiddleChart>
    <!-- 设备分布地图 -->
    <DeviceMap class="row-container" />
    <!-- 列表排名 -->
    <!-- <rank-list class="row-container" /> -->
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import TopPanel from './components/TopPanel.vue';
import MiddleChart from './components/MiddleChart.vue';
import DeviceMap from './components/DeviceMap.vue';


onMounted(() => {
  // 页面加载时的初始化操作
});
</script>
<style lang="scss" src="./index.scss"></style>
<style scoped>
.row-container:not(:last-child) {
  margin-bottom: 16px;
}
:deep(.el-card__body) {
  padding-top: 0 !important;
}
:deep(a) {
  cursor: pointer;
}
:deep(a:active) {
  color: #1c55cf;
}
:deep(a:hover) {
  color: rgba(0, 97, 253, 0.8);
}
</style>
