110 lines
3.6 KiB
HTML
110 lines
3.6 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<title>液压马达后盖 CNC 产线监控中心</title>
|
|||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|||
|
|
<link
|
|||
|
|
href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
|
|||
|
|
rel="stylesheet"
|
|||
|
|
/>
|
|||
|
|
<style>
|
|||
|
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|||
|
|
|
|||
|
|
html, body, #root { width: 100%; height: 100%; overflow: hidden; }
|
|||
|
|
|
|||
|
|
/* ===== 4K 适配:看板按 1920×1080 设计,#root 放大 2 倍铺满 3840×2160。
|
|||
|
|
所有 px 值/字号/间距/SVG/动画等比放大,大屏远距离观看清晰。 ===== */
|
|||
|
|
/*#root { zoom: 2; }*/
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
background: #04060d;
|
|||
|
|
color: #e6f1ff;
|
|||
|
|
font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|||
|
|
font-feature-settings: 'cv02','cv03','cv04','cv11';
|
|||
|
|
-webkit-font-smoothing: antialiased;
|
|||
|
|
text-rendering: optimizeLegibility;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== Scrollbar ===== */
|
|||
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|||
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|||
|
|
::-webkit-scrollbar-thumb {
|
|||
|
|
background: rgba(56,189,248,0.15);
|
|||
|
|
border-radius: 3px;
|
|||
|
|
}
|
|||
|
|
::-webkit-scrollbar-thumb:hover { background: rgba(56,189,248,0.30); }
|
|||
|
|
|
|||
|
|
/* ===== Animations ===== */
|
|||
|
|
@keyframes pulse-dot {
|
|||
|
|
0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
|
|||
|
|
50% { box-shadow: 0 0 0 6px transparent; opacity: 0.5; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes scan-line {
|
|||
|
|
0% { transform: translateY(-100%); opacity: 0; }
|
|||
|
|
50% { opacity: 0.6; }
|
|||
|
|
100% { transform: translateY(2000%); opacity: 0; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes glow-breath {
|
|||
|
|
0%, 100% { opacity: 0.5; }
|
|||
|
|
50% { opacity: 1; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes border-flow {
|
|||
|
|
0% { background-position: 0% 50%; }
|
|||
|
|
100% { background-position: 200% 50%; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes fade-in-up {
|
|||
|
|
from { opacity: 0; transform: translateY(8px); }
|
|||
|
|
to { opacity: 1; transform: translateY(0); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (prefers-reduced-motion: reduce) {
|
|||
|
|
*, *::before, *::after {
|
|||
|
|
animation-duration: 0.01ms !important;
|
|||
|
|
animation-iteration-count: 1 !important;
|
|||
|
|
transition-duration: 0.01ms !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== Background grid overlay (global ambient) ===== */
|
|||
|
|
body::before {
|
|||
|
|
content: '';
|
|||
|
|
position: fixed;
|
|||
|
|
inset: 0;
|
|||
|
|
background-image:
|
|||
|
|
linear-gradient(rgba(56,189,248,0.04) 1px, transparent 1px),
|
|||
|
|
linear-gradient(90deg, rgba(56,189,248,0.04) 1px, transparent 1px);
|
|||
|
|
background-size: 48px 48px;
|
|||
|
|
pointer-events: none;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body::after {
|
|||
|
|
content: '';
|
|||
|
|
position: fixed;
|
|||
|
|
inset: 0;
|
|||
|
|
background:
|
|||
|
|
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(8,145,178,0.18) 0%, transparent 60%),
|
|||
|
|
radial-gradient(ellipse 60% 50% at 100% 100%, rgba(167,139,250,0.10) 0%, transparent 70%);
|
|||
|
|
pointer-events: none;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#root { position: relative; z-index: 1; }
|
|||
|
|
|
|||
|
|
/* ===== Tabular nums for data ===== */
|
|||
|
|
.tnum { font-variant-numeric: tabular-nums; }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="root"></div>
|
|||
|
|
<script type="module" src="/src/main.tsx"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|