Refactor LED control UI to Vue3
This commit is contained in:
sealks
@@ -1,10 +1,12 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
|
||||
background: #030712;
|
||||
background: #020617;
|
||||
color: #f8fbff;
|
||||
--wall-width: 14880px;
|
||||
--wall-height: 3510px;
|
||||
--tile-render-width: 100vw;
|
||||
--tile-render-height: 100vh;
|
||||
--scale: 1;
|
||||
--offset-x: 0px;
|
||||
--offset-y: 0px;
|
||||
@@ -14,9 +16,12 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
.viewport {
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
@@ -24,54 +29,70 @@ body,
|
||||
}
|
||||
|
||||
body {
|
||||
background: #030712;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #020617;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #030712;
|
||||
position: relative;
|
||||
width: var(--tile-render-width);
|
||||
height: var(--tile-render-height);
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #020617;
|
||||
}
|
||||
|
||||
.wall {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
left: var(--offset-x);
|
||||
top: var(--offset-y);
|
||||
width: var(--wall-width);
|
||||
height: var(--wall-height);
|
||||
overflow: hidden;
|
||||
transform-origin: 0 0;
|
||||
transform: translate(var(--offset-x), var(--offset-y)) scale(var(--scale));
|
||||
transform: scale(var(--scale));
|
||||
background:
|
||||
radial-gradient(circle at 50% 40%, rgba(20, 184, 166, 0.28), transparent 36%),
|
||||
radial-gradient(circle at 82% 22%, rgba(249, 115, 22, 0.18), transparent 24%),
|
||||
linear-gradient(135deg, #061528 0%, #0b1220 48%, #071018 100%);
|
||||
radial-gradient(circle at 14% 16%, rgba(14, 165, 233, 0.22), transparent 23%),
|
||||
radial-gradient(circle at 78% 28%, rgba(20, 184, 166, 0.18), transparent 26%),
|
||||
linear-gradient(135deg, #020b1f 0%, #06172d 46%, #020617 100%);
|
||||
}
|
||||
|
||||
.motion-canvas,
|
||||
.grid-layer {
|
||||
.grid-layer,
|
||||
.scan-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.grid-layer {
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.045) 2px, transparent 2px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.045) 2px, transparent 2px);
|
||||
linear-gradient(rgba(125, 211, 252, 0.045) 2px, transparent 2px),
|
||||
linear-gradient(90deg, rgba(125, 211, 252, 0.045) 2px, transparent 2px);
|
||||
background-size: 240px 240px;
|
||||
opacity: 0.74;
|
||||
opacity: 0.86;
|
||||
}
|
||||
|
||||
.scan-layer {
|
||||
opacity: 0.34;
|
||||
background:
|
||||
linear-gradient(90deg, transparent 0 47%, rgba(56, 189, 248, 0.16) 50%, transparent 53%),
|
||||
repeating-linear-gradient(0deg, transparent 0 120px, rgba(125, 211, 252, 0.035) 124px 128px);
|
||||
background-size: 2400px 100%, 100% 100%;
|
||||
animation: scan 10s linear infinite;
|
||||
}
|
||||
|
||||
.screen-header {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
left: 360px;
|
||||
right: 360px;
|
||||
top: 180px;
|
||||
z-index: 5;
|
||||
left: 340px;
|
||||
right: 340px;
|
||||
top: 160px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 120px;
|
||||
gap: 160px;
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -82,44 +103,47 @@ p {
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin-bottom: 38px;
|
||||
color: #5eead4;
|
||||
font-size: 58px;
|
||||
margin-bottom: 34px;
|
||||
color: #67e8f9;
|
||||
font-size: 54px;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 178px;
|
||||
color: #f8fbff;
|
||||
font-size: 172px;
|
||||
line-height: 1;
|
||||
font-weight: 820;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 36px rgba(20, 184, 166, 0.46);
|
||||
font-weight: 860;
|
||||
text-shadow: 0 0 44px rgba(56, 189, 248, 0.5);
|
||||
}
|
||||
|
||||
.header-metrics {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: 26px;
|
||||
gap: 24px;
|
||||
color: #dbeafe;
|
||||
}
|
||||
|
||||
.header-metrics strong {
|
||||
font-size: 112px;
|
||||
font-size: 108px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.header-metrics span {
|
||||
color: #cbd5e1;
|
||||
font-size: 52px;
|
||||
.header-metrics span,
|
||||
.header-metrics em {
|
||||
font-size: 48px;
|
||||
font-style: normal;
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.scene {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
inset: 620px 360px 250px;
|
||||
z-index: 4;
|
||||
inset: 580px 340px 230px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(54px);
|
||||
transform: translateY(70px);
|
||||
transition: opacity 260ms linear, transform 260ms linear;
|
||||
}
|
||||
|
||||
@@ -130,209 +154,227 @@ h1 {
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
max-width: 6200px;
|
||||
max-width: 6400px;
|
||||
}
|
||||
|
||||
.hero-copy span {
|
||||
display: inline-block;
|
||||
margin-bottom: 34px;
|
||||
color: #38bdf8;
|
||||
font-size: 56px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.hero-copy h2 {
|
||||
font-size: 158px;
|
||||
font-size: 156px;
|
||||
line-height: 1.05;
|
||||
font-weight: 820;
|
||||
font-weight: 860;
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
margin-top: 44px;
|
||||
margin-top: 42px;
|
||||
max-width: 5800px;
|
||||
color: #dbeafe;
|
||||
font-size: 66px;
|
||||
line-height: 1.34;
|
||||
font-size: 64px;
|
||||
line-height: 1.32;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
margin-top: 150px;
|
||||
.metric-grid {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 760px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 72px;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 58px;
|
||||
}
|
||||
|
||||
.metric-card,
|
||||
.side-stats article,
|
||||
.camera-card {
|
||||
border: 4px solid rgba(94, 234, 212, 0.32);
|
||||
.stage-node,
|
||||
.event-card {
|
||||
border: 4px solid rgba(125, 211, 252, 0.28);
|
||||
border-radius: 8px;
|
||||
background: rgba(15, 23, 42, 0.76);
|
||||
box-shadow: inset 0 0 60px rgba(20, 184, 166, 0.10), 0 0 42px rgba(20, 184, 166, 0.12);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(8, 47, 73, 0.62)),
|
||||
rgba(15, 23, 42, 0.8);
|
||||
box-shadow:
|
||||
inset 0 0 76px rgba(14, 165, 233, 0.13),
|
||||
0 0 54px rgba(14, 165, 233, 0.16);
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
min-height: 520px;
|
||||
padding: 74px;
|
||||
min-height: 430px;
|
||||
padding: 62px;
|
||||
}
|
||||
|
||||
.metric-card span,
|
||||
.side-stats span {
|
||||
.event-card span {
|
||||
display: block;
|
||||
color: #a7f3d0;
|
||||
font-size: 58px;
|
||||
color: #7dd3fc;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.metric-card strong,
|
||||
.side-stats strong {
|
||||
.metric-card strong {
|
||||
display: block;
|
||||
margin-top: 48px;
|
||||
margin-top: 36px;
|
||||
color: #ffffff;
|
||||
font-size: 136px;
|
||||
font-size: 122px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.timeline-bars {
|
||||
.metric-card small {
|
||||
display: block;
|
||||
margin-top: 28px;
|
||||
color: #a7f3d0;
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
.visual-stage {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 960px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(32, 1fr);
|
||||
align-items: end;
|
||||
gap: 24px;
|
||||
top: 1360px;
|
||||
width: 11200px;
|
||||
height: 1320px;
|
||||
}
|
||||
|
||||
.timeline-bars i {
|
||||
min-height: 120px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
background: linear-gradient(180deg, #14b8a6, #f97316);
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
.flow-map {
|
||||
.route-field {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 790px;
|
||||
width: 8600px;
|
||||
height: 1760px;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.flow-line {
|
||||
.route-line {
|
||||
position: absolute;
|
||||
height: 30px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(90deg, #14b8a6, #facc15, #f97316);
|
||||
box-shadow: 0 0 90px rgba(20, 184, 166, 0.46);
|
||||
background: linear-gradient(90deg, transparent, #38bdf8, #2dd4bf, transparent);
|
||||
box-shadow: 0 0 80px rgba(56, 189, 248, 0.46);
|
||||
transform-origin: left center;
|
||||
animation: routePulse 3.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.line-a {
|
||||
left: 1100px;
|
||||
top: 690px;
|
||||
width: 5200px;
|
||||
transform: rotate(7deg);
|
||||
}
|
||||
.line-a { left: 620px; top: 210px; width: 6000px; transform: rotate(8deg); }
|
||||
.line-b { left: 980px; top: 680px; width: 7600px; transform: rotate(-7deg); }
|
||||
.line-c { left: 2600px; top: 1020px; width: 6400px; transform: rotate(5deg); }
|
||||
.line-d { left: 1400px; top: 420px; width: 8800px; transform: rotate(0deg); }
|
||||
.line-e { left: 2200px; top: 840px; width: 6600px; transform: rotate(-12deg); }
|
||||
.line-f { left: 540px; top: 1060px; width: 9200px; transform: rotate(10deg); }
|
||||
|
||||
.line-b {
|
||||
left: 2300px;
|
||||
top: 1050px;
|
||||
width: 4200px;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.flow-node {
|
||||
.stage-node {
|
||||
position: absolute;
|
||||
width: 980px;
|
||||
height: 420px;
|
||||
width: 1120px;
|
||||
min-height: 390px;
|
||||
padding: 60px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 5px solid rgba(94, 234, 212, 0.62);
|
||||
border-radius: 8px;
|
||||
background: rgba(8, 20, 28, 0.92);
|
||||
font-size: 80px;
|
||||
font-weight: 780;
|
||||
align-content: center;
|
||||
gap: 26px;
|
||||
}
|
||||
|
||||
.node-a { left: 220px; top: 520px; }
|
||||
.node-b { left: 3600px; top: 220px; }
|
||||
.node-c { left: 7020px; top: 900px; }
|
||||
.stage-node span {
|
||||
color: #bfdbfe;
|
||||
font-size: 58px;
|
||||
}
|
||||
|
||||
.side-stats {
|
||||
.stage-node strong {
|
||||
color: #ffffff;
|
||||
font-size: 84px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stage-node.cyan {
|
||||
border-color: rgba(34, 211, 238, 0.48);
|
||||
}
|
||||
|
||||
.stage-node.blue {
|
||||
border-color: rgba(96, 165, 250, 0.48);
|
||||
}
|
||||
|
||||
.stage-node.orange {
|
||||
border-color: rgba(251, 146, 60, 0.56);
|
||||
}
|
||||
|
||||
.event-rail {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 690px;
|
||||
width: 4700px;
|
||||
top: 1340px;
|
||||
width: 3600px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 64px;
|
||||
gap: 34px;
|
||||
}
|
||||
|
||||
.side-stats article {
|
||||
min-height: 620px;
|
||||
padding: 78px;
|
||||
.event-card {
|
||||
padding: 46px 56px;
|
||||
border-left: 18px solid #38bdf8;
|
||||
}
|
||||
|
||||
.camera-grid {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 760px;
|
||||
width: 9200px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 52px;
|
||||
.event-card strong {
|
||||
display: block;
|
||||
margin-top: 18px;
|
||||
color: #ffffff;
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.camera-card {
|
||||
height: 700px;
|
||||
padding: 58px;
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(20,184,166,0.22), rgba(249,115,22,0.14)),
|
||||
rgba(15,23,42,0.78);
|
||||
.event-card small {
|
||||
display: block;
|
||||
margin-top: 18px;
|
||||
color: #cbd5e1;
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.camera-card strong {
|
||||
font-size: 78px;
|
||||
.motion-pulse .route-line {
|
||||
animation-duration: 1.8s;
|
||||
}
|
||||
|
||||
.camera-card span {
|
||||
color: #dbeafe;
|
||||
font-size: 52px;
|
||||
.motion-orbit .stage-node {
|
||||
animation: nodeFloat 4.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.alert-rail {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 740px;
|
||||
width: 4300px;
|
||||
display: grid;
|
||||
gap: 44px;
|
||||
.focus-edge .stage-node.orange,
|
||||
.focus-core .stage-node.cyan {
|
||||
box-shadow:
|
||||
inset 0 0 96px rgba(125, 211, 252, 0.22),
|
||||
0 0 120px rgba(56, 189, 248, 0.38);
|
||||
}
|
||||
|
||||
.alert-card {
|
||||
padding: 58px 68px;
|
||||
border-left: 20px solid #f97316;
|
||||
border-radius: 8px;
|
||||
background: rgba(15, 23, 42, 0.78);
|
||||
font-size: 64px;
|
||||
}
|
||||
.theme-energy .event-card { border-left-color: #2dd4bf; }
|
||||
.theme-security .event-card { border-left-color: #fb923c; }
|
||||
.theme-command .event-card { border-left-color: #60a5fa; }
|
||||
.theme-transport .event-card { border-left-color: #38bdf8; }
|
||||
.theme-dataflow .event-card { border-left-color: #22d3ee; }
|
||||
|
||||
.hud {
|
||||
position: fixed;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
z-index: 10;
|
||||
max-width: min(980px, calc(100vw - 24px));
|
||||
max-width: min(1120px, calc(100vw - 24px));
|
||||
padding: 9px 11px;
|
||||
border-radius: 6px;
|
||||
background: rgba(0,0,0,0.72);
|
||||
color: rgba(255,255,255,0.82);
|
||||
background: rgba(0, 0, 0, 0.72);
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
font-size: 12px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.preview-note {
|
||||
color: #facc15;
|
||||
.pulse {
|
||||
animation: flash 560ms ease;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: flash 520ms ease;
|
||||
@keyframes scan {
|
||||
from { background-position: -2400px 0, 0 0; }
|
||||
to { background-position: 2400px 0, 0 0; }
|
||||
}
|
||||
|
||||
@keyframes routePulse {
|
||||
0%, 100% { opacity: 0.36; filter: brightness(0.9); }
|
||||
50% { opacity: 1; filter: brightness(1.35); }
|
||||
}
|
||||
|
||||
@keyframes nodeFloat {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-26px); }
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
0% { outline: 18px solid rgba(94, 234, 212, 0.55); }
|
||||
100% { outline: 0 solid rgba(94, 234, 212, 0); }
|
||||
0% { outline: 18px solid rgba(56, 189, 248, 0.55); }
|
||||
100% { outline: 0 solid rgba(56, 189, 248, 0); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user