device-monitor-frame.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>设备监控实时驾驶舱 - 爱智农</title>
  7. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
  8. <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
  9. <link rel="stylesheet" href="../assets/css/global.css">
  10. <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
  11. <script src="https://cdn.jsdelivr.net/npm/dayjs@1.10.7/dayjs.min.js"></script>
  12. <script src="https://cdn.jsdelivr.net/npm/dayjs@1.10.7/locale/zh-cn.js"></script>
  13. <style>
  14. :root {
  15. --primary: #0ea5e9;
  16. --primary-dark: #0369a1;
  17. --primary-light: #7dd3fc;
  18. --bg-dark: #0f172a;
  19. --bg-card: #1e293b;
  20. --text-primary: #f1f5f9;
  21. --text-secondary: #94a3b8;
  22. --success: #10b981;
  23. --warning: #f59e0b;
  24. --danger: #ef4444;
  25. --info: #3b82f6;
  26. --border: #334155;
  27. --radius: 8px;
  28. }
  29. body {
  30. font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  31. background-color: var(--bg-dark);
  32. color: var(--text-primary);
  33. margin: 0;
  34. padding: 20px;
  35. min-height: 100vh;
  36. overflow-x: hidden;
  37. }
  38. /* 移除白色圆形按钮 */
  39. .circle-btn,
  40. .floating-button,
  41. .round-button,
  42. button[class*='circle'],
  43. div[class*='circle'],
  44. [class*='float-btn'],
  45. body > div:not(#app),
  46. body > button {
  47. display: none !important;
  48. visibility: hidden !important;
  49. opacity: 0 !important;
  50. position: absolute !important;
  51. top: -9999px !important;
  52. left: -9999px !important;
  53. z-index: -9999 !important;
  54. pointer-events: none !important;
  55. }
  56. /* 视频比例容器 */
  57. .aspect-w-16 {
  58. position: relative;
  59. padding-bottom: 56.25%;
  60. }
  61. .aspect-w-16 > * {
  62. position: absolute;
  63. height: 100%;
  64. width: 100%;
  65. top: 0;
  66. right: 0;
  67. bottom: 0;
  68. left: 0;
  69. }
  70. /* 加载动画 */
  71. @keyframes spin {
  72. to {
  73. transform: rotate(360deg);
  74. }
  75. }
  76. .animate-spin {
  77. animation: spin 1s linear infinite;
  78. }
  79. /* 数据闪烁动效 */
  80. @keyframes pulse-data {
  81. 0% {
  82. opacity: 1;
  83. }
  84. 50% {
  85. opacity: 0.6;
  86. }
  87. 100% {
  88. opacity: 1;
  89. }
  90. }
  91. .data-pulse {
  92. animation: pulse-data 2s infinite;
  93. }
  94. </style>
  95. </head>
  96. <body>
  97. <div class="page-container">
  98. <!-- 从device-monitor-content.html中复制主要内容 -->
  99. </div>
  100. <script>
  101. // 从device-monitor-content.html中复制JavaScript代码
  102. </script>
  103. </body>
  104. </html>