## 参考大屏

<a href="https://cdn0-templates-dataease-cn.fit2cloud.com/upload/网络系统数据监控平台.png" target="_blank">
  <img src="https://cdn0-templates-dataease-cn.fit2cloud.com/upload/网络系统数据监控平台.png" alt="大屏展示示例" style="max-width: 100%; cursor: zoom-in;" />
</a>

## 布局预览

<a href="./img/网络系统数据监控平台.jpg" target="_blank">
  <img src="./img/网络系统数据监控平台.jpg" alt="大屏展示示例" style="max-width: 100%; cursor: zoom-in;" />
</a>

## 布局实现代码

```vue
<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>
```