<template>
  <div class="dashboard-container">
    <!-- 顶部标题和时间 -->
    <div class="dashboard-header">
      <div class="dashboard-title">网络系统数据监控平台</div>
      <div class="dashboard-time">2025-02-25 12:08:57</div>
    </div>

    <!-- 主体区域 -->
    <div class="dashboard-main">
      <!-- 左侧 -->
      <div class="dashboard-left">
        <div class="dashboard-block">在线用户数</div>
        <div class="dashboard-block">网络流量</div>
      </div>

      <!-- 中间地图区域 -->
      <div class="dashboard-center">
        <div class="dashboard-block" :style="{ height: '70%' }">
          用户分布地图区域
        </div>
        <div class="dashboard-block" :style="{ height: '30%' }">告警详情</div>
      </div>

      <!-- 右侧 -->
      <div class="dashboard-right">
        <div class="dashboard-block">错误请求</div>
        <div class="dashboard-block">资源分配</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 逻辑待补充
</script>

<style lang="less" scoped>
/* 整体容器 */
.dashboard-container {
  width: 100%;
  height: 100%;
  background: black;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 1vh 2vw;
  box-sizing: border-box;
  overflow: hidden;
}

/* 顶部区域 */
.dashboard-header {
  position: relative;
  height: 6vh;
  margin-bottom: 1vh;
  display: flex;
  align-items: center;
}

/* 标题居中 */
.dashboard-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2vw;
  font-weight: bold;
}

/* 时间靠右 */
.dashboard-time {
  margin-left: auto;
  font-size: 1vw;
  padding-right: 0.5vw;
}

/* 主体内容区域 */
.dashboard-main {
  display: flex;
  flex: 1;
  gap: 1vw;
  overflow: hidden;
}

/* 左侧区域 */
.dashboard-left {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

/* 中间地图区域 */
.dashboard-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1vh;
  align-items: center;
  justify-content: center;
}

/* 右侧区域 */
.dashboard-right {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

/* 通用区块样式 */
.dashboard-block {
  border: 1px dashed cyan;
  padding: 1vh;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 25%;
}
</style>