| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>设备监控实时驾驶舱 - 爱智农</title>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
- <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
- <link rel="stylesheet" href="../assets/css/global.css">
- <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/dayjs@1.10.7/dayjs.min.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/dayjs@1.10.7/locale/zh-cn.js"></script>
- <style>
- :root {
- --primary: #0ea5e9;
- --primary-dark: #0369a1;
- --primary-light: #7dd3fc;
- --bg-dark: #0f172a;
- --bg-card: #1e293b;
- --text-primary: #f1f5f9;
- --text-secondary: #94a3b8;
- --success: #10b981;
- --warning: #f59e0b;
- --danger: #ef4444;
- --info: #3b82f6;
- --border: #334155;
- --radius: 8px;
- }
-
- body {
- font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
- background-color: var(--bg-dark);
- color: var(--text-primary);
- margin: 0;
- padding: 20px;
- min-height: 100vh;
- overflow-x: hidden;
- }
-
- /* 移除白色圆形按钮 */
- .circle-btn,
- .floating-button,
- .round-button,
- button[class*='circle'],
- div[class*='circle'],
- [class*='float-btn'],
- body > div:not(#app),
- body > button {
- display: none !important;
- visibility: hidden !important;
- opacity: 0 !important;
- position: absolute !important;
- top: -9999px !important;
- left: -9999px !important;
- z-index: -9999 !important;
- pointer-events: none !important;
- }
-
- /* 视频比例容器 */
- .aspect-w-16 {
- position: relative;
- padding-bottom: 56.25%;
- }
-
- .aspect-w-16 > * {
- position: absolute;
- height: 100%;
- width: 100%;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
-
- /* 加载动画 */
- @keyframes spin {
- to {
- transform: rotate(360deg);
- }
- }
-
- .animate-spin {
- animation: spin 1s linear infinite;
- }
-
- /* 数据闪烁动效 */
- @keyframes pulse-data {
- 0% {
- opacity: 1;
- }
- 50% {
- opacity: 0.6;
- }
- 100% {
- opacity: 1;
- }
- }
-
- .data-pulse {
- animation: pulse-data 2s infinite;
- }
- </style>
- </head>
- <body>
- <div class="page-container">
- <!-- 从device-monitor-content.html中复制主要内容 -->
- </div>
- <script>
- // 从device-monitor-content.html中复制JavaScript代码
- </script>
- </body>
- </html>
|