<template>
  <div class="screen-container">
    <!-- Cesium地图背景 -->
    <div id="cesiumContainer" class="cesium-background"></div>

    <!-- 顶部标题栏 -->
    <header class="top-title-bar">
      <h1 class="system-title">数据监测分析系统</h1>
      <div class="header-info">
        <div class="current-time">{{ currentTime }}</div>
        <div class="system-status">
          <span class="status-dot online"></span>
          <span>系统正常运行中</span>
        </div>
      </div>
    </header>

    <!-- 菜单栏 -->
    <nav class="menu-bar">
      <ul class="menu-list">
        <li class="menu-item active">
          <span class="menu-icon home-icon"></span>
          <span>首页概览</span>
        </li>
        <li class="menu-item">
          <span class="menu-icon monitor-icon"></span>
          <span>实时监测</span>
        </li>
        <li class="menu-item">
          <span class="menu-icon alarm-icon"></span>
          <span>报警管理</span>
        </li>
        <li class="menu-item">
          <span class="menu-icon analysis-icon"></span>
          <span>数据分析</span>
        </li>
        <li class="menu-item">
          <span class="menu-icon system-icon"></span>
          <span>系统设置</span>
        </li>
      </ul>
    </nav>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 左侧数据模块 -->
      <div class="left-modules">
        <!-- 模块1：数据总览 -->
        <div class="data-module">
          <div class="module-header">
            <h3>数据总览</h3>
            <span class="refresh-icon"></span>
          </div>
          <div class="module-body">
            <div class="data-stats">
              <div class="stat-item">
                <span class="stat-label">监测点位</span>
                <span class="stat-value">256</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">在线设备</span>
                <span class="stat-value online">245</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">数据采集量</span>
                <span class="stat-value">1.2万</span>
              </div>
            </div>
            <div class="progress-bars">
              <div class="progress-item">
                <span class="progress-label">设备在线率</span>
                <div class="progress-container">
                  <div class="progress-bar" style="width: 95%"></div>
                </div>
                <span class="progress-value">95.7%</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 模块2：实时报警 -->
        <div class="data-module">
          <div class="module-header">
            <h3>实时报警</h3>
            <span class="alarm-count">5</span>
          </div>
          <div class="module-body">
            <div class="alarm-list">
              <div class="alarm-item level-1">
                <span class="alarm-level">紧急</span>
                <span class="alarm-content">温度异常</span>
                <span class="alarm-point">A-12区</span>
                <span class="alarm-time">10:23</span>
              </div>
              <div class="alarm-item level-2">
                <span class="alarm-level">重要</span>
                <span class="alarm-content">设备离线</span>
                <span class="alarm-point">B-05区</span>
                <span class="alarm-time">09:45</span>
              </div>
              <div class="alarm-item level-3">
                <span class="alarm-level">一般</span>
                <span class="alarm-content">数据异常</span>
                <span class="alarm-point">C-08区</span>
                <span class="alarm-time">08:30</span>
              </div>
              <div class="alarm-item level-3">
                <span class="alarm-level">一般</span>
                <span class="alarm-content">压力偏低</span>
                <span class="alarm-point">D-01区</span>
                <span class="alarm-time">07:55</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 模块3：环境监测 -->
        <div class="data-module">
          <div class="module-header">
            <h3>环境监测</h3>
            <span class="time-range">今日</span>
          </div>
          <div class="module-body">
            <div class="env-data-grid">
              <div class="env-item">
                <span class="env-icon temp"></span>
                <span class="env-label">平均温度</span>
                <span class="env-value">26.3°C</span>
              </div>
              <div class="env-item">
                <span class="env-icon humidity"></span>
                <span class="env-label">平均湿度</span>
                <span class="env-value">65.8%</span>
              </div>
              <div class="env-item">
                <span class="env-icon pressure"></span>
                <span class="env-label">平均气压</span>
                <span class="env-value">101.5kPa</span>
              </div>
              <div class="env-item">
                <span class="env-icon wind"></span>
                <span class="env-label">平均风速</span>
                <span class="env-value">3.2m/s</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧数据模块 -->
      <div class="right-modules">
        <!-- 模块4：趋势分析 -->
        <div class="data-module">
          <div class="module-header">
            <h3>数据趋势分析</h3>
            <span class="chart-type">24小时</span>
          </div>
          <div class="module-body">
            <div class="chart-container" id="trendChart"></div>
          </div>
        </div>

        <!-- 模块5：设备状态 -->
        <div class="data-module">
          <div class="module-header">
            <h3>设备运行状态</h3>
            <span class="view-more">查看全部</span>
          </div>
          <div class="module-body">
            <div class="device-status-list">
              <div class="device-item">
                <span class="device-name">传感器A-1</span>
                <span class="device-status normal">正常</span>
                <span class="device-value">125.6</span>
                <span class="device-time">3分钟前</span>
              </div>
              <div class="device-item">
                <span class="device-name">传感器B-3</span>
                <span class="device-status normal">正常</span>
                <span class="device-value">89.2</span>
                <span class="device-time">5分钟前</span>
              </div>
              <div class="device-item">
                <span class="device-name">传感器C-2</span>
                <span class="device-status warning">警告</span>
                <span class="device-value">185.3</span>
                <span class="device-time">1分钟前</span>
              </div>
              <div class="device-item">
                <span class="device-name">传感器D-5</span>
                <span class="device-status offline">离线</span>
                <span class="device-value">--</span>
                <span class="device-time">2小时前</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 模块6：系统负载 -->
        <div class="data-module">
          <div class="module-header">
            <h3>系统资源监控</h3>
            <span class="system-time">{{ currentTimeShort }}</span>
          </div>
          <div class="module-body">
            <div class="system-resources">
              <div class="resource-item">
                <span class="resource-label">CPU使用率</span>
                <div class="resource-bar-container">
                  <div class="resource-bar cpu-bar" style="width: 42%"></div>
                </div>
                <span class="resource-value">42%</span>
              </div>
              <div class="resource-item">
                <span class="resource-label">内存使用率</span>
                <div class="resource-bar-container">
                  <div class="resource-bar mem-bar" style="width: 68%"></div>
                </div>
                <span class="resource-value">68%</span>
              </div>
              <div class="resource-item">
                <span class="resource-label">磁盘使用率</span>
                <div class="resource-bar-container">
                  <div class="resource-bar disk-bar" style="width: 35%"></div>
                </div>
                <span class="resource-value">35%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: "",
      currentTimeShort: "",
      viewer: null,
    };
  },
  mounted() {
    // 初始化时间
    this.updateTime();
    setInterval(() => this.updateTime(), 1000);

    // 初始化Cesium地图
    this.initCesium();

    // 初始化图表
    this.$nextTick(() => {
      this.drawTrendChart();
    });

    // 监听窗口大小变化
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    if (this.viewer) {
      this.viewer.destroy();
    }
  },
  methods: {
    // 更新时间
    updateTime() {
      const now = new Date();
      // 完整时间格式
      this.currentTime = now.toLocaleString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
      });
      // 短时间格式
      this.currentTimeShort = now.toLocaleTimeString("zh-CN", {
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
      });
    },

    // 初始化Cesium地图
    initCesium() {
      try {
        // 设置Cesium基础路径
        window.CESIUM_BASE_URL = "/cesium/";

        // 创建Cesium视图
        this.viewer = new Cesium.Viewer("cesiumContainer", {
          imageryProvider: new Cesium.BingMapsImageryProvider({
            url: "https://dev.virtualearth.net",
            mapStyle: Cesium.BingMapsStyle.AERIAL,
            key: "your-bing-maps-key", // 请替换为实际的Bing Maps密钥
          }),
          baseLayerPicker: false,
          timeline: false,
          animation: false,
          fullscreenButton: false,
          geocoder: false,
          homeButton: false,
          infoBox: false,
          sceneModePicker: false,
          navigationHelpButton: false,
          navigationInstructionsInitiallyVisible: false,
        });

        // 设置相机位置
        this.viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(
            116.397428,
            39.90923,
            10000.0
          ),
          orientation: {
            heading: Cesium.Math.toRadians(0.0),
            pitch: Cesium.Math.toRadians(-90.0),
            roll: 0.0,
          },
        });

        // 禁用默认的点击事件
        this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
          Cesium.ScreenSpaceEventType.LEFT_CLICK
        );
      } catch (error) {
        console.error("Cesium初始化失败:", error);
        // 设置备用背景
        const container = document.getElementById("cesiumContainer");
        container.style.backgroundColor = "#001a33";
        container.style.backgroundImage =
          "linear-gradient(45deg, #001a33 25%, #00264d 25%, #00264d 50%, #001a33 50%, #001a33 75%, #00264d 75%, #00264d 100%)";
        container.style.backgroundSize = "10px 10px";
      }
    },

    // 绘制趋势图
    drawTrendChart() {
      const container = document.getElementById("trendChart");
      if (!container) return;

      const canvas = document.createElement("canvas");
      canvas.width = container.clientWidth;
      canvas.height = container.clientHeight;
      container.appendChild(canvas);

      const ctx = canvas.getContext("2d");

      // 模拟数据
      const data = [
        12, 19, 15, 25, 32, 28, 22, 35, 29, 21, 18, 24, 27, 31, 26, 29, 33, 38,
        35, 30, 28, 25, 22, 27,
      ];
      const labels = Array.from({ length: 24 }, (_, i) => `${i}h`);

      // 设置画布大小和边距
      const padding = { top: 20, right: 20, bottom: 30, left: 40 };
      const width = canvas.width - padding.left - padding.right;
      const height = canvas.height - padding.top - padding.bottom;

      // 计算数据范围
      const maxValue = Math.max(...data);
      const minValue = Math.min(...data);
      const valueRange = maxValue - minValue || 1;

      // 绘制背景
      ctx.fillStyle = "rgba(0, 20, 40, 0.5)";
      ctx.fillRect(padding.left, padding.top, width, height);

      // 绘制网格线
      ctx.strokeStyle = "rgba(100, 150, 200, 0.3)";
      ctx.lineWidth = 1;

      // 垂直网格线
      for (let i = 0; i <= 24; i++) {
        const x = padding.left + (width / 24) * i;
        ctx.beginPath();
        ctx.moveTo(x, padding.top);
        ctx.lineTo(x, padding.top + height);
        ctx.stroke();
      }

      // 水平网格线
      for (let i = 0; i <= 5; i++) {
        const y = padding.top + (height / 5) * i;
        ctx.beginPath();
        ctx.moveTo(padding.left, y);
        ctx.lineTo(padding.left + width, y);
        ctx.stroke();
      }

      // 绘制趋势线
      ctx.strokeStyle = "#00ffcc";
      ctx.lineWidth = 2;
      ctx.beginPath();

      data.forEach((value, index) => {
        const x = padding.left + (width / 23) * index;
        const y =
          padding.top + height - ((value - minValue) / valueRange) * height;

        if (index === 0) {
          ctx.moveTo(x, y);
        } else {
          ctx.lineTo(x, y);
        }
      });

      ctx.stroke();

      // 绘制数据点
      ctx.fillStyle = "#00ffcc";
      data.forEach((value, index) => {
        const x = padding.left + (width / 23) * index;
        const y =
          padding.top + height - ((value - minValue) / valueRange) * height;

        ctx.beginPath();
        ctx.arc(x, y, 3, 0, Math.PI * 2);
        ctx.fill();
      });

      // 绘制时间标签
      ctx.fillStyle = "#ffffff";
      ctx.font = "10px Arial";
      ctx.textAlign = "center";

      for (let i = 0; i < labels.length; i += 3) {
        const x = padding.left + (width / 23) * i;
        const y = padding.top + height + 15;
        ctx.fillText(labels[i], x, y);
      }
    },

    // 处理窗口大小变化
    handleResize() {
      // 重新调整Cesium视图大小
      if (this.viewer) {
        this.viewer.resize();
      }

      // 重新绘制图表
      const chartContainer = document.getElementById("trendChart");
      if (chartContainer && chartContainer.firstChild) {
        chartContainer.removeChild(chartContainer.firstChild);
        this.drawTrendChart();
      }
    },
  },
};
</script>

<style lang="scss" scope>
// 基础样式 - 1rem = 100px
html {
  font-size: 100px;
}

// 屏幕容器
.screen-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  color: #fff;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  overflow: hidden;
}

// Cesium地图背景
.cesium-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

// 顶部标题栏
.top-title-bar {
  position: relative;
  height: 0.6rem;
  background: linear-gradient(to right, #003366, #0066cc);
  border-bottom: 2px solid #00aaff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.4rem;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 170, 255, 0.3);

  .system-title {
    font-size: 0.22rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
    margin: 0;
  }

  .header-info {
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  .current-time {
    font-size: 0.14rem;
    color: #00ffcc;
    font-weight: 500;
  }

  .system-status {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    font-size: 0.14rem;
  }

  .status-dot {
    width: 0.08rem;
    height: 0.08rem;
    border-radius: 50%;

    &.online {
      background-color: #00ff00;
      box-shadow: 0 0 0.05rem #00ff00;
    }

    &.offline {
      background-color: #ff3333;
      box-shadow: 0 0 0.05rem #ff3333;
    }
  }
}

// 菜单栏
.menu-bar {
  position: relative;
  height: 0.4rem;
  background: rgba(0, 30, 60, 0.9);
  border-bottom: 1px solid #005080;
  z-index: 99;

  .menu-list {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0 0.2rem;
    list-style: none;
  }

  .menu-item {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    padding: 0 0.2rem;
    height: 0.3rem;
    margin-right: 0.2rem;
    border-radius: 0.04rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.14rem;

    &:hover {
      background: rgba(0, 170, 255, 0.2);
    }

    &.active {
      background: linear-gradient(to right, #005080, #0078b0);
      box-shadow: 0 0 0.1rem rgba(0, 170, 255, 0.5);
    }
  }

  .menu-icon {
    width: 0.16rem;
    height: 0.16rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .home-icon {
    background-image: url("/static/images/home-icon.png");
  }

  .monitor-icon {
    background-image: url("/static/images/monitor-icon.png");
  }

  .alarm-icon {
    background-image: url("/static/images/alarm-icon.png");
  }

  .analysis-icon {
    background-image: url("/static/images/analysis-icon.png");
  }

  .system-icon {
    background-image: url("/static/images/system-icon.png");
  }
}

// 主内容区
.main-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0.2rem;
  height: calc(100vh - 1rem);
  z-index: 2;
}

// 左右模块容器
.left-modules,
.right-modules {
  width: 3.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

// 数据模块通用样式
.data-module {
  background: rgba(0, 20, 40, 0.85);
  border: 1px solid #005080;
  border-radius: 0.04rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(0.05rem);
  box-shadow: 0 0 0.15rem rgba(0, 100, 200, 0.3);

  &:nth-child(1) {
    height: 2.2rem;
  }

  &:nth-child(2) {
    height: 2.5rem;
  }

  &:nth-child(3) {
    height: 2rem;
  }
}

// 模块头部
.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.12rem 0.16rem;
  background: linear-gradient(to right, #003060, #005090);
  border-bottom: 1px solid #0070b0;

  h3 {
    margin: 0;
    font-size: 0.16rem;
    font-weight: 500;
    color: #00ffcc;
  }

  .refresh-icon,
  .view-more {
    font-size: 0.12rem;
    color: #99ccff;
    cursor: pointer;
  }

  .alarm-count {
    background-color: #ff3333;
    color: #fff;
    padding: 0.02rem 0.08rem;
    border-radius: 0.1rem;
    font-size: 0.12rem;
    font-weight: bold;
  }

  .time-range,
  .chart-type,
  .system-time {
    font-size: 0.12rem;
    color: #66ccff;
  }
}

// 模块内容区
.module-body {
  flex: 1;
  padding: 0.16rem;
  overflow: hidden;
}

// 数据总览样式
.data-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.16rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0.8rem;
}

.stat-label {
  font-size: 0.12rem;
  color: #99ccff;
  margin-bottom: 0.05rem;
}

.stat-value {
  font-size: 0.2rem;
  font-weight: bold;
  color: #ffffff;

  &.online {
    color: #00ff00;
  }
}

.progress-bars {
  margin-top: 0.1rem;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-bottom: 0.08rem;
}

.progress-label {
  font-size: 0.12rem;
  color: #ffffff;
  width: 0.8rem;
}

.progress-container {
  flex: 1;
  height: 0.06rem;
  background: rgba(0, 40, 80, 0.6);
  border: 1px solid #005080;
  border-radius: 0.03rem;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(to right, #00aaff, #00ffcc);
  box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
}

.progress-value {
  font-size: 0.12rem;
  color: #00ffcc;
  font-weight: bold;
  width: 0.4rem;
  text-align: right;
}

// 报警列表样式
.alarm-list {
  height: 100%;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 0.04rem;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 40, 80, 0.5);
  }

  &::-webkit-scrollbar-thumb {
    background: #0070b0;
    border-radius: 0.02rem;
  }
}

.alarm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.1rem;
  margin-bottom: 0.08rem;
  border-radius: 0.04rem;
  border-left: 3px solid;
  background: rgba(0, 30, 60, 0.7);
  font-size: 0.12rem;

  &.level-1 {
    border-color: #ff3333;
    background: rgba(255, 51, 51, 0.1);
  }

  &.level-2 {
    border-color: #ff9900;
    background: rgba(255, 153, 0, 0.1);
  }

  &.level-3 {
    border-color: #ffff00;
    background: rgba(255, 255, 0, 0.1);
  }
}

.alarm-level {
  font-weight: bold;
  width: 0.35rem;

  .alarm-item.level-1 & {
    color: #ff3333;
  }

  .alarm-item.level-2 & {
    color: #ff9900;
  }

  .alarm-item.level-3 & {
    color: #ffff00;
  }
}

.alarm-content {
  flex: 1;
  color: #ffffff;
}

.alarm-point {
  color: #99ccff;
  width: 0.5rem;
}

.alarm-time {
  color: #66ccff;
  font-size: 0.11rem;
}

// 环境数据样式
.env-data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem;
  height: 100%;
}

.env-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 30, 60, 0.7);
  border-radius: 0.04rem;
  border: 1px solid #005080;
  padding: 0.1rem;
}

.env-icon {
  width: 0.3rem;
  height: 0.3rem;
  margin-bottom: 0.08rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.env-icon.temp {
  background-image: url("/static/images/temp-icon.png");
}

.env-icon.humidity {
  background-image: url("/static/images/humidity-icon.png");
}

.env-icon.pressure {
  background-image: url("/static/images/pressure-icon.png");
}

.env-icon.wind {
  background-image: url("/static/images/wind-icon.png");
}

.env-label {
  font-size: 0.12rem;
  color: #99ccff;
  margin-bottom: 0.05rem;
}

.env-value {
  font-size: 0.16rem;
  font-weight: bold;
  color: #00ffcc;
}

// 图表容器
.chart-container {
  width: 100%;
  height: 100%;
  min-height: 1.5rem;
}

// 设备状态列表
.device-status-list {
  height: 100%;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 0.04rem;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 40, 80, 0.5);
  }

  &::-webkit-scrollbar-thumb {
    background: #0070b0;
    border-radius: 0.02rem;
  }
}

.device-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.1rem 0;
  border-bottom: 1px solid rgba(0, 100, 200, 0.2);
  font-size: 0.12rem;

  &:last-child {
    border-bottom: none;
  }
}

.device-name {
  color: #ffffff;
  width: 0.8rem;
}

.device-status {
  padding: 0.02rem 0.08rem;
  border-radius: 0.03rem;
  font-size: 0.11rem;
  font-weight: bold;

  &.normal {
    background: rgba(0, 255, 0, 0.2);
    color: #00ff00;
  }

  &.warning {
    background: rgba(255, 153, 0, 0.2);
    color: #ff9900;
  }

  &.offline {
    background: rgba(255, 51, 51, 0.2);
    color: #ff3333;
  }
}

.device-value {
  color: #00ffcc;
  font-weight: bold;
  width: 0.6rem;
  text-align: right;
}

.device-time {
  color: #66ccff;
  font-size: 0.11rem;
}

// 系统资源监控
.system-resources {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.resource-item {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.resource-label {
  font-size: 0.12rem;
  color: #ffffff;
  width: 0.9rem;
}

.resource-bar-container {
  flex: 1;
  height: 0.08rem;
  background: rgba(0, 40, 80, 0.6);
  border: 1px solid #005080;
  border-radius: 0.04rem;
  overflow: hidden;
}

.resource-bar {
  height: 100%;
  box-shadow: 0 0 0.05rem;

  &.cpu-bar {
    background: linear-gradient(to right, #00aaff, #00ffcc);
    box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
  }

  &.mem-bar {
    background: linear-gradient(to right, #ff9900, #ffcc00);
    box-shadow: 0 0 0.05rem rgba(255, 204, 0, 0.7);
  }

  &.disk-bar {
    background: linear-gradient(to right, #00cc66, #00ff99);
    box-shadow: 0 0 0.05rem rgba(0, 255, 153, 0.7);
  }
}

.resource-value {
  font-size: 0.12rem;
  font-weight: bold;
  width: 0.4rem;
  text-align: right;

  &.low {
    color: #00ff00;
  }

  &.medium {
    color: #ffcc00;
  }

  &.high {
    color: #ff3333;
  }
}

// 响应式设计 - 基于1920*1080分辨率的适配
@media (max-width: 1600px) {
  html {
    font-size: 83.3px; // 1600/1920 * 100
  }
}

@media (max-width: 1440px) {
  html {
    font-size: 75px; // 1440/1920 * 100
  }

  .left-modules,
  .right-modules {
    width: 3rem;
  }
}

@media (max-width: 1280px) {
  html {
    font-size: 66.7px; // 1280/1920 * 100
  }

  .left-modules,
  .right-modules {
    width: 2.6rem;
  }
}

// 修复滚动条样式
*::-webkit-scrollbar {
  width: 0.04rem;
  height: 0.04rem;
}

*::-webkit-scrollbar-track {
  background: rgba(0, 40, 80, 0.3);
  border-radius: 0.02rem;
}

*::-webkit-scrollbar-thumb {
  background: #0070b0;
  border-radius: 0.02rem;
}

*::-webkit-scrollbar-thumb:hover {
  background: #0090d0;
}
</style>