|
|
@@ -0,0 +1,1790 @@
|
|
|
+<template>
|
|
|
+ <div class="dashboard">
|
|
|
+ <!-- 背景和基础元素 -->
|
|
|
+ <div class="station-bg"></div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="bottom-bg"></div>
|
|
|
+ <div class="top-title"></div>
|
|
|
+ <div class="system-title">数字孪生黑林小流域</div>
|
|
|
+
|
|
|
+ <!-- 顶部按钮 -->
|
|
|
+ <div class="sub-title left-1" @click="goBack">
|
|
|
+ 首页
|
|
|
+ </div>
|
|
|
+ <div class="sub-title left-2" @click="goToHeilinStation">
|
|
|
+ 测站详情
|
|
|
+ </div>
|
|
|
+ <div class="sub-title right-2" @click="goToSimulation">
|
|
|
+ 测控平台
|
|
|
+ </div>
|
|
|
+ <div class="sub-title right-3" @click="goToWaterCulture">
|
|
|
+ 智能巡检
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 主要内容区域 -->
|
|
|
+ <div class="main-content">
|
|
|
+ <!-- 左侧面板区域 -->
|
|
|
+ <div class="left-sidebar">
|
|
|
+ <!-- 左侧数据框容器 -->
|
|
|
+ <div class="left-container">
|
|
|
+ <!-- 左侧面板1：设备状态 -->
|
|
|
+ <div class="data-card station-intro">
|
|
|
+ <div class="panel-header">
|
|
|
+ <h3>设备状态</h3>
|
|
|
+ <span class="more-btn" @click="showDetailModal = true">更多</span>
|
|
|
+ </div>
|
|
|
+ <div class="panel-content">
|
|
|
+ <div class="device-status-section">
|
|
|
+ <!-- 机器人实时状态 - 一行卡片展示 -->
|
|
|
+ <div class="status-cards-row">
|
|
|
+ <div class="status-card">
|
|
|
+ <div class="status-card-label">剩余电量</div>
|
|
|
+ <div class="status-card-value">85%</div>
|
|
|
+ </div>
|
|
|
+ <div class="status-card">
|
|
|
+ <div class="status-card-label">运行模式</div>
|
|
|
+ <div class="status-card-value">自动巡检</div>
|
|
|
+ </div>
|
|
|
+ <div class="status-card">
|
|
|
+ <div class="status-card-label">信号强度</div>
|
|
|
+ <div class="status-card-value">强</div>
|
|
|
+ </div>
|
|
|
+ <div class="status-card">
|
|
|
+ <div class="status-card-label">当前位置</div>
|
|
|
+ <div class="status-card-value">1号监测断面</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 搭载设备状态 - 机器人背景 + 小图标 -->
|
|
|
+ <div class="robot-status-container">
|
|
|
+ <div class="robot-bg">
|
|
|
+ <img src="/src/assets/images/Heilin/机器人.png" alt="巡检机器人" class="robot-image" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 运行参数卡片 -->
|
|
|
+ <div class="params-cards-row">
|
|
|
+ <div class="param-card">
|
|
|
+ <div class="param-label">采集频率</div>
|
|
|
+ <div class="param-value">5秒/次</div>
|
|
|
+ </div>
|
|
|
+ <div class="param-card">
|
|
|
+ <div class="param-label">数据传输状态</div>
|
|
|
+ <div class="param-value normal">正常</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 左侧面板 2：巡检任务 -->
|
|
|
+ <div class="data-card video-monitor">
|
|
|
+ <div class="panel-header">
|
|
|
+ <h3>巡检任务</h3>
|
|
|
+ </div>
|
|
|
+ <div class="panel-content">
|
|
|
+ <!-- 路线选择 -->
|
|
|
+ <div class="task-section">
|
|
|
+ <h4>路线选择</h4>
|
|
|
+ <div class="route-info">
|
|
|
+ <div class="route-item">
|
|
|
+ <span class="route-label">当前路线：</span>
|
|
|
+ <span class="route-value">1号监测断面 → 测验设备区 → 汇水区</span>
|
|
|
+ </div>
|
|
|
+ <div class="route-item">
|
|
|
+ <span class="route-label">预设路线：</span>
|
|
|
+ <select v-model="selectedRoute" class="route-select">
|
|
|
+ <option value="route1">标准巡检路线</option>
|
|
|
+ <option value="route2">重点区域巡检路线</option>
|
|
|
+ <option value="route3">全面覆盖路线</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="route-progress">
|
|
|
+ <span class="progress-label">当前进度：</span>
|
|
|
+ <div class="progress-bar">
|
|
|
+ <div class="progress-fill" style="width: 60%"></div>
|
|
|
+ </div>
|
|
|
+ <span class="progress-text">60% (已完成2/3点位)</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 任务下达 -->
|
|
|
+ <div class="task-section" style="margin-top: 20px;">
|
|
|
+ <h4>任务下达</h4>
|
|
|
+ <div class="task-input">
|
|
|
+ <div class="task-input-item">
|
|
|
+ <label>巡检区域：</label>
|
|
|
+ <select v-model="taskArea" class="task-select">
|
|
|
+ <option value="all">全部区域</option>
|
|
|
+ <option value="section1">1号监测断面</option>
|
|
|
+ <option value="section2">测验设备区</option>
|
|
|
+ <option value="section3">汇水区</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="task-input-item">
|
|
|
+ <label>巡检频次：</label>
|
|
|
+ <select v-model="taskFrequency" class="task-select">
|
|
|
+ <option value="once">单次</option>
|
|
|
+ <option value="hourly">每小时</option>
|
|
|
+ <option value="daily">每天</option>
|
|
|
+ <option value="weekly">每周</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="task-input-item">
|
|
|
+ <label>重点巡检项：</label>
|
|
|
+ <div class="checkbox-group">
|
|
|
+ <label><input type="checkbox" v-model="taskItems.camera" /> 摄像头</label>
|
|
|
+ <label><input type="checkbox" v-model="taskItems.flow" /> 流速</label>
|
|
|
+ <label><input type="checkbox" v-model="taskItems.water" /> 水质</label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <button class="task-btn" @click="issueTask">下达任务</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 当前任务列表 -->
|
|
|
+ <div class="task-list" style="margin-top: 15px;">
|
|
|
+ <h5>当前任务</h5>
|
|
|
+ <div class="task-list-item">
|
|
|
+ <div class="task-id">任务编号：T20260311001</div>
|
|
|
+ <div class="task-info">
|
|
|
+ <span>巡检区域：全部区域</span>
|
|
|
+ <span>下达时间：2026-03-11 09:00</span>
|
|
|
+ <span>预计完成：2026-03-11 10:30</span>
|
|
|
+ <span>进度：80%（已完成5个点位）</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 中间空间 -->
|
|
|
+ <div class="center-space">
|
|
|
+ <div class="poi-container">
|
|
|
+ <div class="poi-item" style="left: 512px; top: 704px;">
|
|
|
+ <div class="poi-label">巡检机器人</div>
|
|
|
+ <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧面板区域 -->
|
|
|
+ <div class="right-sidebar">
|
|
|
+ <!-- 右侧数据框容器 -->
|
|
|
+ <div class="right-container">
|
|
|
+ <!-- 右侧面板 1：预警成果 -->
|
|
|
+ <div class="data-card data-card-1">
|
|
|
+ <div class="panel-header">
|
|
|
+ <h3>预警成果</h3>
|
|
|
+ </div>
|
|
|
+ <div class="panel-content">
|
|
|
+ <!-- 预警报警信息 -->
|
|
|
+ <div class="warning-section">
|
|
|
+ <h4>预警报警信息</h4>
|
|
|
+ <div class="warning-list">
|
|
|
+ <div class="warning-item urgent">
|
|
|
+ <div class="warning-id">预警编号：W20260311001</div>
|
|
|
+ <div class="warning-info">
|
|
|
+ <span>类型：流量异常</span>
|
|
|
+ <span>位置：1号监测断面</span>
|
|
|
+ <span>时间：2026-03-11 08:30</span>
|
|
|
+ <span>等级：紧急</span>
|
|
|
+ </div>
|
|
|
+ <div class="warning-status">未处置</div>
|
|
|
+ </div>
|
|
|
+ <div class="warning-item normal">
|
|
|
+ <div class="warning-id">预警编号：W20260311002</div>
|
|
|
+ <div class="warning-info">
|
|
|
+ <span>类型：传感器异常</span>
|
|
|
+ <span>位置：测验设备区</span>
|
|
|
+ <span>时间：2026-03-11 07:15</span>
|
|
|
+ <span>等级：一般</span>
|
|
|
+ </div>
|
|
|
+ <div class="warning-status">已处置</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 成果展示 -->
|
|
|
+ <div class="result-section" style="margin-top: 20px;">
|
|
|
+ <h4>成果展示</h4>
|
|
|
+
|
|
|
+ <!-- 异常成果 -->
|
|
|
+ <div class="result-group">
|
|
|
+ <h5>异常成果</h5>
|
|
|
+ <div class="abnormal-list">
|
|
|
+ <div class="abnormal-item">
|
|
|
+ <div class="abnormal-id">异常编号：A20260311001</div>
|
|
|
+ <div class="abnormal-info">
|
|
|
+ <span>类型：流速传感器数据漂移</span>
|
|
|
+ <span>位置：1号监测断面</span>
|
|
|
+ <span>时间：2026-03-11 06:45</span>
|
|
|
+ </div>
|
|
|
+ <div class="abnormal-image">
|
|
|
+ <img src="/src/assets/images/Heilin/图5.jpeg" alt="异常现场" class="abnormal-img" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 数据成果 -->
|
|
|
+ <div class="result-group" style="margin-top: 15px;">
|
|
|
+ <h5>数据成果</h5>
|
|
|
+ <div class="data-result">
|
|
|
+ <div class="data-item">
|
|
|
+ <span class="data-label">实时瞬时流量：</span>
|
|
|
+ <span class="data-value">0.28 m³/s</span>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <span class="data-label">当日平均流量：</span>
|
|
|
+ <span class="data-value">0.25 m³/s</span>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <span class="data-label">巡检周期流量汇总：</span>
|
|
|
+ <span class="data-value">6.0 m³</span>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <span class="data-label">水位：</span>
|
|
|
+ <span class="data-value">32.15 m</span>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <span class="data-label">pH值：</span>
|
|
|
+ <span class="data-value normal">7.2（正常）</span>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <span class="data-label">浊度：</span>
|
|
|
+ <span class="data-value normal">15 NTU（正常）</span>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <span class="data-label">溶解氧：</span>
|
|
|
+ <span class="data-value normal">8.5 mg/L（正常）</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧面板 2：历史任务 -->
|
|
|
+ <div class="data-card data-card-2">
|
|
|
+ <div class="panel-header">
|
|
|
+ <h3>历史任务</h3>
|
|
|
+ </div>
|
|
|
+ <div class="panel-content">
|
|
|
+ <div class="history-list">
|
|
|
+ <div class="history-item">
|
|
|
+ <div class="history-id">任务编号：T20260310001</div>
|
|
|
+ <div class="history-info">
|
|
|
+ <span>巡检区域：全部区域</span>
|
|
|
+ <span>执行时间：2026-03-10 14:00</span>
|
|
|
+ <span>完成状态：已完成</span>
|
|
|
+ <span>核心成果：无异常</span>
|
|
|
+ </div>
|
|
|
+ <button class="history-btn">查看详情</button>
|
|
|
+ </div>
|
|
|
+ <div class="history-item">
|
|
|
+ <div class="history-id">任务编号：T20260310002</div>
|
|
|
+ <div class="history-info">
|
|
|
+ <span>巡检区域：测验设备区</span>
|
|
|
+ <span>执行时间：2026-03-10 09:30</span>
|
|
|
+ <span>完成状态：已完成</span>
|
|
|
+ <span>核心成果：发现传感器异常</span>
|
|
|
+ </div>
|
|
|
+ <button class="history-btn">查看详情</button>
|
|
|
+ </div>
|
|
|
+ <div class="history-item">
|
|
|
+ <div class="history-id">任务编号：T20260309001</div>
|
|
|
+ <div class="history-info">
|
|
|
+ <span>巡检区域：1号监测断面</span>
|
|
|
+ <span>执行时间：2026-03-09 16:00</span>
|
|
|
+ <span>完成状态：已完成</span>
|
|
|
+ <span>核心成果：无异常</span>
|
|
|
+ </div>
|
|
|
+ <button class="history-btn">查看详情</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 渐变装饰层（四周暗角） -->
|
|
|
+ <GradientOverlay />
|
|
|
+
|
|
|
+ <!-- 详情弹窗 -->
|
|
|
+ <div v-if="showDetailModal" class="modal-overlay" @click="closeModal">
|
|
|
+ <div class="modal-content" @click.stop>
|
|
|
+ <div class="modal-header">
|
|
|
+ <h2>智能巡检详细信息</h2>
|
|
|
+ <span class="close-btn" @click="closeModal">×</span>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <!-- 基本信息区域 -->
|
|
|
+ <div class="station-info-header">
|
|
|
+ <div class="station-basic">
|
|
|
+ <h3 class="station-name">智能巡检系统</h3>
|
|
|
+ <p class="station-code">系统代码：ZNXJ-2026</p>
|
|
|
+ <p class="station-basin">所在区域：黑林小流域</p>
|
|
|
+ </div>
|
|
|
+ <div class="station-qr">
|
|
|
+ <img src="/src/assets/images/Heilin/测站二维码.png" alt="智能巡检二维码" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 系统介绍 -->
|
|
|
+ <div class="detail-section">
|
|
|
+ <h4>系统介绍</h4>
|
|
|
+ <p>智能巡检系统是基于AI技术的水文站巡检机器人管理平台，通过搭载多种传感器的巡检机器人，实现对水文站设备、环境的实时监测和巡检任务的智能调度。系统集成了设备状态监测、巡检任务管理、预警报警、历史数据查询等功能，为水文站的运维管理提供全方位支持。</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 技术参数 -->
|
|
|
+ <div class="detail-section">
|
|
|
+ <h4>技术参数</h4>
|
|
|
+ <div class="data-grid">
|
|
|
+ <div class="data-item">
|
|
|
+ <span class="data-label">机器人型号</span>
|
|
|
+ <span class="data-value">ZNXJ-001</span>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <span class="data-label">续航时间</span>
|
|
|
+ <span class="data-value">8小时</span>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <span class="data-label">最大速度</span>
|
|
|
+ <span class="data-value">3km/h</span>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <span class="data-label">通信方式</span>
|
|
|
+ <span class="data-value">5G</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 设备配置 -->
|
|
|
+ <div class="detail-section">
|
|
|
+ <h4>设备配置</h4>
|
|
|
+ <div class="extreme-data">
|
|
|
+ <div class="data-row">
|
|
|
+ <span class="data-label">摄像头：</span>
|
|
|
+ <span class="data-text">4K高清摄像头，支持夜视功能</span>
|
|
|
+ </div>
|
|
|
+ <div class="data-row">
|
|
|
+ <span class="data-label">流速传感器：</span>
|
|
|
+ <span class="data-text">多普勒流速仪，精度±0.01m/s</span>
|
|
|
+ </div>
|
|
|
+ <div class="data-row">
|
|
|
+ <span class="data-label">水质传感器：</span>
|
|
|
+ <span class="data-text">多参数水质分析仪，可测pH、浊度、溶解氧等</span>
|
|
|
+ </div>
|
|
|
+ <div class="data-row">
|
|
|
+ <span class="data-label">温湿度仪：</span>
|
|
|
+ <span class="data-text">高精度温湿度传感器，精度±0.5℃</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 补充信息 -->
|
|
|
+ <div class="detail-section">
|
|
|
+ <h4>补充信息</h4>
|
|
|
+ <div class="supplement-info">
|
|
|
+ <div class="data-row">
|
|
|
+ <span class="data-label">制造商：</span>
|
|
|
+ <span class="data-text">南自所</span>
|
|
|
+ </div>
|
|
|
+ <div class="data-row">
|
|
|
+ <span class="data-label">安装时间：</span>
|
|
|
+ <span class="data-text">2026年1月</span>
|
|
|
+ </div>
|
|
|
+ <div class="data-row">
|
|
|
+ <span class="data-label">维护周期：</span>
|
|
|
+ <span class="data-text">每季度一次</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import GradientOverlay from '../components/gradient-overlay.vue'
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+const showDetailModal = ref(false)
|
|
|
+
|
|
|
+// 巡检任务相关变量
|
|
|
+const selectedRoute = ref('route1')
|
|
|
+const taskArea = ref('all')
|
|
|
+const taskFrequency = ref('once')
|
|
|
+const taskItems = ref({
|
|
|
+ camera: true,
|
|
|
+ flow: true,
|
|
|
+ water: true
|
|
|
+})
|
|
|
+
|
|
|
+const goBack = () => {
|
|
|
+ router.push('/')
|
|
|
+}
|
|
|
+
|
|
|
+const goToSimulation = () => {
|
|
|
+ router.push('/simulation')
|
|
|
+}
|
|
|
+
|
|
|
+const goToWaterCulture = () => {
|
|
|
+ router.push('/water-culture')
|
|
|
+}
|
|
|
+
|
|
|
+const goToHeilinStation = () => {
|
|
|
+ router.push('/heilin-station')
|
|
|
+}
|
|
|
+
|
|
|
+const closeModal = () => {
|
|
|
+ showDetailModal.value = false
|
|
|
+}
|
|
|
+
|
|
|
+const issueTask = () => {
|
|
|
+ // 这里可以添加任务下达的逻辑
|
|
|
+ console.log('下达任务:', {
|
|
|
+ area: taskArea.value,
|
|
|
+ frequency: taskFrequency.value,
|
|
|
+ items: taskItems.value
|
|
|
+ })
|
|
|
+ // 模拟任务下达成功
|
|
|
+ alert('任务下达成功！')
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ // 页面加载时的初始化逻辑
|
|
|
+ console.log('智能巡检页面加载完成')
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* 智能巡检页面样式 */
|
|
|
+.dashboard {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-bg {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-image: url('/src/assets/images/Heilin/WPS图片(1).jpeg');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 3;
|
|
|
+}
|
|
|
+
|
|
|
+.station-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-image: url('/src/assets/images/Heilin/水文站图.jpeg');
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 2;
|
|
|
+}
|
|
|
+
|
|
|
+.top-title {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-image: url('/src/assets/images/顶部大标题.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 4;
|
|
|
+}
|
|
|
+
|
|
|
+.system-title {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: bold;
|
|
|
+ background: linear-gradient(to bottom, #ffffff 50%, #00d5ff 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ background-clip: text;
|
|
|
+ color: transparent;
|
|
|
+ text-shadow: 0 0 1px rgba(2, 217, 255, 0.205);
|
|
|
+ z-index: 4;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* 顶部按钮样式 */
|
|
|
+.sub-title {
|
|
|
+ position: absolute;
|
|
|
+ top: 30px;
|
|
|
+ width: 151px;
|
|
|
+ height: 63px;
|
|
|
+ background-image: url('/src/assets/images/顶部小标题.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding-top: 10px;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #e0fcff;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
|
|
|
+ z-index: 4;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.sub-title:hover {
|
|
|
+ transform: scale(1.05);
|
|
|
+}
|
|
|
+
|
|
|
+.sub-title.left-1 {
|
|
|
+ left: 180px;
|
|
|
+}
|
|
|
+
|
|
|
+.sub-title.left-2 {
|
|
|
+ left: 400px;
|
|
|
+}
|
|
|
+
|
|
|
+.sub-title.right-2 {
|
|
|
+ right: 400px;
|
|
|
+}
|
|
|
+
|
|
|
+.sub-title.right-3 {
|
|
|
+ right: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 主要内容区域 */
|
|
|
+.main-content {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ height: calc(100% - 130px);
|
|
|
+ padding: 130px 20px 20px;
|
|
|
+ gap: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ z-index: 3;
|
|
|
+}
|
|
|
+
|
|
|
+/* 左侧面板 */
|
|
|
+.left-sidebar {
|
|
|
+ width: 350px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.left-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 右侧面板 */
|
|
|
+.right-sidebar {
|
|
|
+ width: 400px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.right-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 数据卡片样式 */
|
|
|
+.data-card {
|
|
|
+ width: 100%;
|
|
|
+ background: linear-gradient(135deg, rgba(0, 20, 40, 0.8), rgba(0, 10, 30, 0.9));
|
|
|
+ border: 1px solid rgba(0, 212, 255, 0.3);
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.data-card::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 2px;
|
|
|
+ background: linear-gradient(90deg, transparent, #00d5ff, transparent);
|
|
|
+ box-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
|
|
|
+}
|
|
|
+
|
|
|
+.panel-header {
|
|
|
+ height: 45px;
|
|
|
+ background: linear-gradient(135deg, rgba(0, 60, 120, 0.3), rgba(0, 30, 60, 0.3));
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-bottom: 1px solid rgba(0, 212, 255, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.panel-header h3 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #00d5ff;
|
|
|
+ text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.panel-header h3::before {
|
|
|
+ content: '▶';
|
|
|
+ font-size: 12px;
|
|
|
+ color: #00d5ff;
|
|
|
+ animation: pulse 2s infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.panel-content {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.4;
|
|
|
+ width: 100%;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.station-intro {
|
|
|
+ min-height: 500px;
|
|
|
+}
|
|
|
+
|
|
|
+.station-intro .panel-content {
|
|
|
+ padding: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.video-monitor {
|
|
|
+ min-height: 350px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 设备状态区域 */
|
|
|
+.device-status-section {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 一行卡片展示 */
|
|
|
+.status-cards-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-card {
|
|
|
+ flex: 1;
|
|
|
+ background: linear-gradient(135deg, rgba(0, 60, 120, 0.6), rgba(0, 30, 60, 0.6));
|
|
|
+ border: 1px solid rgba(0, 213, 255, 0.4);
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 12px 8px;
|
|
|
+ text-align: center;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.status-card::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 1px;
|
|
|
+ background: linear-gradient(90deg, transparent, #00d5ff, transparent);
|
|
|
+}
|
|
|
+
|
|
|
+.status-card:hover {
|
|
|
+ border-color: rgba(0, 213, 255, 0.8);
|
|
|
+ box-shadow: 0 0 15px rgba(0, 213, 255, 0.4);
|
|
|
+ transform: translateY(-2px);
|
|
|
+}
|
|
|
+
|
|
|
+.status-card-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #00d5ff;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 213, 255, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.status-card-value {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #00ff88;
|
|
|
+ text-shadow: 0 0 8px rgba(0, 255, 136, 0.8);
|
|
|
+}
|
|
|
+
|
|
|
+/* 机器人状态容器 */
|
|
|
+.robot-status-container {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.robot-bg {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.robot-image {
|
|
|
+ width: 180px;
|
|
|
+ height: 180px;
|
|
|
+ object-fit: contain;
|
|
|
+ opacity: 0.9;
|
|
|
+ z-index: 1;
|
|
|
+ filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.3));
|
|
|
+}
|
|
|
+
|
|
|
+/* 运行参数卡片 */
|
|
|
+.params-cards-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.param-card {
|
|
|
+ flex: 1;
|
|
|
+ background: linear-gradient(135deg, rgba(0, 60, 120, 0.6), rgba(0, 30, 60, 0.6));
|
|
|
+ border: 1px solid rgba(0, 213, 255, 0.4);
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 12px;
|
|
|
+ text-align: center;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.param-card::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 1px;
|
|
|
+ background: linear-gradient(90deg, transparent, #00d5ff, transparent);
|
|
|
+}
|
|
|
+
|
|
|
+.param-card:hover {
|
|
|
+ border-color: rgba(0, 213, 255, 0.8);
|
|
|
+ box-shadow: 0 0 15px rgba(0, 213, 255, 0.4);
|
|
|
+ transform: translateY(-2px);
|
|
|
+}
|
|
|
+
|
|
|
+.param-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #00d5ff;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 213, 255, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.param-value {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #00ff88;
|
|
|
+ text-shadow: 0 0 8px rgba(0, 255, 136, 0.8);
|
|
|
+}
|
|
|
+
|
|
|
+.param-value.normal {
|
|
|
+ color: #00ff88;
|
|
|
+}
|
|
|
+
|
|
|
+.param-value.abnormal {
|
|
|
+ color: #ff4444;
|
|
|
+ animation: blink 1s infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes blink {
|
|
|
+ 0%, 100% { opacity: 1; }
|
|
|
+ 50% { opacity: 0.3; }
|
|
|
+}
|
|
|
+
|
|
|
+.status-group h4 {
|
|
|
+ color: #00d5ff;
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
|
|
|
+}
|
|
|
+
|
|
|
+.status-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ padding: 8px;
|
|
|
+ background: rgba(0, 20, 40, 0.5);
|
|
|
+ border-radius: 4px;
|
|
|
+ border-left: 3px solid #00d5ff;
|
|
|
+}
|
|
|
+
|
|
|
+.status-label {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-value {
|
|
|
+ color: #00ff88;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.status-value.normal {
|
|
|
+ color: #00ff88;
|
|
|
+}
|
|
|
+
|
|
|
+.status-value.abnormal {
|
|
|
+ color: #ff4444;
|
|
|
+}
|
|
|
+
|
|
|
+/* 巡检任务区域 */
|
|
|
+.task-section h4 {
|
|
|
+ color: #00d5ff;
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 0 0 12px 0;
|
|
|
+ text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.task-section h4::before {
|
|
|
+ content: '●';
|
|
|
+ font-size: 10px;
|
|
|
+ color: #00d5ff;
|
|
|
+ animation: pulse 2s infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.route-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.route-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.route-label {
|
|
|
+ color: #00d5ff;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.route-value {
|
|
|
+ color: #00ff88;
|
|
|
+ font-size: 14px;
|
|
|
+ background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1px solid rgba(0, 212, 255, 0.2);
|
|
|
+ text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.route-select {
|
|
|
+ background: linear-gradient(135deg, rgba(0, 20, 40, 0.8), rgba(0, 10, 20, 0.8));
|
|
|
+ color: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 212, 255, 0.4);
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.route-select:hover {
|
|
|
+ border-color: rgba(0, 212, 255, 0.8);
|
|
|
+ box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.route-progress {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.progress-label {
|
|
|
+ color: #00d5ff;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.progress-bar {
|
|
|
+ width: 100%;
|
|
|
+ height: 10px;
|
|
|
+ background: rgba(0, 10, 20, 0.6);
|
|
|
+ border: 1px solid rgba(0, 212, 255, 0.2);
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.progress-fill {
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(90deg, #00d5ff, #00ff88);
|
|
|
+ border-radius: 6px;
|
|
|
+ transition: width 0.5s ease;
|
|
|
+ box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.progress-text {
|
|
|
+ color: #00ff88;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: right;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+/* 任务下达区域 */
|
|
|
+.task-input {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.task-input-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.task-input-item label {
|
|
|
+ color: #00d5ff;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.task-select {
|
|
|
+ background: linear-gradient(135deg, rgba(0, 20, 40, 0.8), rgba(0, 10, 20, 0.8));
|
|
|
+ color: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 212, 255, 0.4);
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.task-select:hover {
|
|
|
+ border-color: rgba(0, 212, 255, 0.8);
|
|
|
+ box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.checkbox-group {
|
|
|
+ display: flex;
|
|
|
+ gap: 15px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.checkbox-group label {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 13px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.checkbox-group label:hover {
|
|
|
+ color: #00d5ff;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
|
|
|
+}
|
|
|
+
|
|
|
+.checkbox-group input[type="checkbox"] {
|
|
|
+ accent-color: #00d5ff;
|
|
|
+}
|
|
|
+
|
|
|
+.task-btn {
|
|
|
+ background: linear-gradient(90deg, #00d5ff, #0066cc);
|
|
|
+ color: #ffffff;
|
|
|
+ border: none;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ margin-top: 10px;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
|
|
|
+ box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.task-btn:hover {
|
|
|
+ background: linear-gradient(90deg, #0066cc, #00d5ff);
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
|
|
|
+}
|
|
|
+
|
|
|
+/* 任务列表 */
|
|
|
+.task-list h5 {
|
|
|
+ color: #00d5ff;
|
|
|
+ font-size: 13px;
|
|
|
+ margin: 0 0 12px 0;
|
|
|
+ text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.task-list h5::before {
|
|
|
+ content: '●';
|
|
|
+ font-size: 10px;
|
|
|
+ color: #00d5ff;
|
|
|
+ animation: pulse 2s infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.task-list-item {
|
|
|
+ background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 12px;
|
|
|
+ border-left: 3px solid #00d5ff;
|
|
|
+ border: 1px solid rgba(0, 212, 255, 0.2);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.task-list-item:hover {
|
|
|
+ border-color: rgba(0, 212, 255, 0.5);
|
|
|
+ box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.task-id {
|
|
|
+ color: #00ff88;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.task-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.task-info span {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.task-info span::before {
|
|
|
+ content: '▸';
|
|
|
+ font-size: 10px;
|
|
|
+ color: #00d5ff;
|
|
|
+}
|
|
|
+
|
|
|
+/* 预警成果区域 */
|
|
|
+.warning-section h4 {
|
|
|
+ color: #00d5ff;
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 0 0 12px 0;
|
|
|
+ text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.warning-section h4::before {
|
|
|
+ content: '●';
|
|
|
+ font-size: 10px;
|
|
|
+ color: #00d5ff;
|
|
|
+ animation: pulse 2s infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.warning-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.warning-item {
|
|
|
+ background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 12px;
|
|
|
+ border-left: 3px solid #00d5ff;
|
|
|
+ border: 1px solid rgba(0, 212, 255, 0.2);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.warning-item:hover {
|
|
|
+ border-color: rgba(0, 212, 255, 0.5);
|
|
|
+ box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.warning-item.urgent {
|
|
|
+ border-left: 3px solid #ff4444;
|
|
|
+ background: linear-gradient(135deg, rgba(40, 0, 0, 0.6), rgba(20, 0, 0, 0.6));
|
|
|
+ border: 1px solid rgba(255, 68, 68, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.warning-item.urgent:hover {
|
|
|
+ border-color: rgba(255, 68, 68, 0.6);
|
|
|
+ box-shadow: 0 0 10px rgba(255, 68, 68, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
+.warning-id {
|
|
|
+ color: #00ff88;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.warning-item.urgent .warning-id {
|
|
|
+ color: #ff4444;
|
|
|
+ text-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.warning-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 5px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.warning-info span {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.warning-info span::before {
|
|
|
+ content: '▸';
|
|
|
+ font-size: 10px;
|
|
|
+ color: #00d5ff;
|
|
|
+}
|
|
|
+
|
|
|
+.warning-item.urgent .warning-info span::before {
|
|
|
+ color: #ff4444;
|
|
|
+}
|
|
|
+
|
|
|
+.warning-status {
|
|
|
+ color: #00ff88;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: right;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.warning-item.urgent .warning-status {
|
|
|
+ color: #ff4444;
|
|
|
+ text-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+/* 成果展示区域 */
|
|
|
+.result-section h4 {
|
|
|
+ color: #00d5ff;
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 0 0 12px 0;
|
|
|
+ text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.result-section h4::before {
|
|
|
+ content: '●';
|
|
|
+ font-size: 10px;
|
|
|
+ color: #00d5ff;
|
|
|
+ animation: pulse 2s infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.result-group h5 {
|
|
|
+ color: #00ff88;
|
|
|
+ font-size: 13px;
|
|
|
+ margin: 0 0 12px 0;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.result-group h5::before {
|
|
|
+ content: '▸';
|
|
|
+ font-size: 10px;
|
|
|
+ color: #00ff88;
|
|
|
+}
|
|
|
+
|
|
|
+.abnormal-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.abnormal-item {
|
|
|
+ background: linear-gradient(135deg, rgba(40, 0, 0, 0.6), rgba(20, 0, 0, 0.6));
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 12px;
|
|
|
+ border-left: 3px solid #ff4444;
|
|
|
+ border: 1px solid rgba(255, 68, 68, 0.3);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.abnormal-item:hover {
|
|
|
+ border-color: rgba(255, 68, 68, 0.6);
|
|
|
+ box-shadow: 0 0 10px rgba(255, 68, 68, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
+.abnormal-id {
|
|
|
+ color: #ff4444;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ text-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.abnormal-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 5px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.abnormal-info span {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.abnormal-info span::before {
|
|
|
+ content: '▸';
|
|
|
+ font-size: 10px;
|
|
|
+ color: #ff4444;
|
|
|
+}
|
|
|
+
|
|
|
+.abnormal-image {
|
|
|
+ margin-top: 10px;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid rgba(255, 68, 68, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.abnormal-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ object-fit: cover;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.abnormal-img:hover {
|
|
|
+ transform: scale(1.02);
|
|
|
+ filter: brightness(1.1);
|
|
|
+}
|
|
|
+
|
|
|
+/* 数据成果 */
|
|
|
+.data-result {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.data-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+ background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
|
|
|
+ border-radius: 6px;
|
|
|
+ border-left: 3px solid #00d5ff;
|
|
|
+ border: 1px solid rgba(0, 212, 255, 0.2);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.data-item:hover {
|
|
|
+ border-color: rgba(0, 212, 255, 0.5);
|
|
|
+ box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.data-label {
|
|
|
+ color: #00d5ff;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.data-value {
|
|
|
+ color: #00ff88;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.data-value.normal {
|
|
|
+ color: #00ff88;
|
|
|
+}
|
|
|
+
|
|
|
+.data-value.abnormal {
|
|
|
+ color: #ff4444;
|
|
|
+}
|
|
|
+
|
|
|
+/* 历史任务区域 */
|
|
|
+.history-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.history-item {
|
|
|
+ background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 12px;
|
|
|
+ border-left: 3px solid #00d5ff;
|
|
|
+ border: 1px solid rgba(0, 212, 255, 0.2);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.history-item:hover {
|
|
|
+ border-color: rgba(0, 212, 255, 0.5);
|
|
|
+ box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.history-id {
|
|
|
+ color: #00ff88;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.history-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.history-info span {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.history-info span::before {
|
|
|
+ content: '▸';
|
|
|
+ font-size: 10px;
|
|
|
+ color: #00d5ff;
|
|
|
+}
|
|
|
+
|
|
|
+.history-btn {
|
|
|
+ background: linear-gradient(90deg, rgba(0, 212, 255, 0.2), rgba(0, 66, 122, 0.2));
|
|
|
+ color: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 212, 255, 0.4);
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 8px 16px;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ align-self: flex-end;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.history-btn:hover {
|
|
|
+ background: linear-gradient(90deg, rgba(0, 212, 255, 0.4), rgba(0, 66, 122, 0.4));
|
|
|
+ border-color: rgba(0, 212, 255, 0.8);
|
|
|
+ box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
|
|
|
+ transform: translateY(-1px);
|
|
|
+}
|
|
|
+
|
|
|
+/* 中间空间 */
|
|
|
+.center-space {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.poi-container {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ pointer-events: none;
|
|
|
+ transform: translate(-320px, -125px);
|
|
|
+}
|
|
|
+
|
|
|
+.poi-item {
|
|
|
+ position: absolute;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ pointer-events: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.poi-icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ object-fit: contain;
|
|
|
+ animation: pulse 2s infinite;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.poi-label {
|
|
|
+ background: rgba(0, 60, 120, 0.9);
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 4px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ white-space: nowrap;
|
|
|
+ border: 1px solid rgba(0, 213, 255, 0.5);
|
|
|
+ box-shadow: 0 0 5px rgba(0, 213, 255, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes pulse {
|
|
|
+ 0% {
|
|
|
+ transform: scale(1);
|
|
|
+ filter: drop-shadow(0 0 5px rgba(0, 213, 255, 0.5));
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: scale(1.1);
|
|
|
+ filter: drop-shadow(0 0 10px rgba(0, 213, 255, 0.8));
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ filter: drop-shadow(0 0 5px rgba(0, 213, 255, 0.5));
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 详情弹窗 */
|
|
|
+.modal-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
+ backdrop-filter: blur(5px);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 1000;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-content {
|
|
|
+ background: rgba(0, 10, 20, 0.95);
|
|
|
+ border: 1px solid rgba(0, 212, 255, 0.5);
|
|
|
+ border-radius: 12px;
|
|
|
+ width: 800px;
|
|
|
+ max-height: 80vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.modal-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px;
|
|
|
+ border-bottom: 1px solid rgba(0, 212, 255, 0.3);
|
|
|
+ background: linear-gradient(to right, rgba(0, 212, 255, 0.1), rgba(0, 66, 122, 0.1));
|
|
|
+}
|
|
|
+
|
|
|
+.modal-header h2 {
|
|
|
+ color: #00d5ff;
|
|
|
+ margin: 0;
|
|
|
+ text-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
|
|
|
+}
|
|
|
+
|
|
|
+.close-btn {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.close-btn:hover {
|
|
|
+ color: #00d5ff;
|
|
|
+ transform: rotate(90deg);
|
|
|
+}
|
|
|
+
|
|
|
+.modal-body {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 详情弹窗内容 */
|
|
|
+.station-info-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ border-bottom: 1px solid rgba(0, 212, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.station-basic {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.station-name {
|
|
|
+ color: #00d5ff;
|
|
|
+ font-size: 24px;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ text-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
|
|
|
+}
|
|
|
+
|
|
|
+.station-code,
|
|
|
+.station-basin {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 5px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.station-qr img {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ border: 2px solid rgba(0, 212, 255, 0.3);
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-section {
|
|
|
+ margin-bottom: 30px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ border-bottom: 1px solid rgba(0, 212, 255, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.detail-section h4 {
|
|
|
+ color: #00d5ff;
|
|
|
+ font-size: 18px;
|
|
|
+ margin: 0 0 15px 0;
|
|
|
+ text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
|
|
|
+}
|
|
|
+
|
|
|
+.detail-section p {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.5;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.data-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 15px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.data-grid .data-item {
|
|
|
+ background: rgba(0, 20, 40, 0.5);
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 6px;
|
|
|
+ border-left: 3px solid #00d5ff;
|
|
|
+}
|
|
|
+
|
|
|
+.data-grid .data-label {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.data-grid .data-value {
|
|
|
+ color: #00ff88;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.extreme-data {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.data-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+ background: rgba(0, 20, 40, 0.5);
|
|
|
+ border-radius: 6px;
|
|
|
+ border-left: 3px solid #00d5ff;
|
|
|
+}
|
|
|
+
|
|
|
+.data-row .data-label {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.data-row .data-text {
|
|
|
+ color: #00ff88;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.supplement-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 响应式设计 */
|
|
|
+@media (max-width: 1600px) {
|
|
|
+ .left-sidebar {
|
|
|
+ width: 300px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-sidebar {
|
|
|
+ width: 350px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 1400px) {
|
|
|
+ .left-sidebar {
|
|
|
+ width: 250px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-sidebar {
|
|
|
+ width: 300px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-title.left-1 {
|
|
|
+ left: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-title.left-2 {
|
|
|
+ left: 300px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-title.right-2 {
|
|
|
+ right: 300px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-title.right-3 {
|
|
|
+ right: 100px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .main-content {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-sidebar,
|
|
|
+ .center-space,
|
|
|
+ .right-sidebar {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-space {
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .data-card {
|
|
|
+ max-height: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 滚动条样式 */
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-track {
|
|
|
+ background: rgba(0, 10, 20, 0.5);
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
+ background: rgba(0, 212, 255, 0.5);
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: rgba(0, 212, 255, 0.8);
|
|
|
+}
|
|
|
+
|
|
|
+.more-btn {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #62f6fb;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ padding: 4px 8px;
|
|
|
+ border: 1px solid rgba(0, 213, 255, 0.3);
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.more-btn:hover {
|
|
|
+ color: #00ffff;
|
|
|
+ border-color: rgba(0, 213, 255, 0.8);
|
|
|
+ box-shadow: 0 0 5px rgba(0, 213, 255, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.left-container {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.right-container {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.data-card-1 {
|
|
|
+ min-height: 380px;
|
|
|
+}
|
|
|
+
|
|
|
+.data-card-2 {
|
|
|
+ min-height: 290px;
|
|
|
+}
|
|
|
+</style>
|
BAI
