diff --git a/deploy/landing/cabinet.png b/deploy/landing/cabinet.png new file mode 100644 index 0000000..875a45f Binary files /dev/null and b/deploy/landing/cabinet.png differ diff --git a/deploy/landing/index.html b/deploy/landing/index.html index d3789c0..8b0ce59 100644 --- a/deploy/landing/index.html +++ b/deploy/landing/index.html @@ -28,22 +28,8 @@ /* 充电柜展示区 */ .showcase { position: relative; width: 100%; max-width: 900px; margin: 0 auto 60px; } .cabinet-visual { width: 100%; aspect-ratio: 16/9; background: linear-gradient(145deg, #0d1520 0%, #1a2332 100%); border-radius: 24px; border: 1px solid rgba(0,212,255,0.2); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } - .cabinet-visual::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0,212,255,0.1) 0%, transparent 30%); } - - /* CSS充电柜 */ - .cabinet { position: relative; width: 280px; height: 380px; background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); border-radius: 12px; border: 2px solid #334155; box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1); } - .cabinet-header { height: 40px; background: linear-gradient(90deg, #0ea5e9, #06b6d4); border-radius: 10px 10px 0 0; display: flex; align-items: center; justify-content: center; gap: 8px; } - .cabinet-header span { font-size: 11px; font-weight: 600; color: #fff; letter-spacing: 2px; } - .cabinet-header .led { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 10px #22c55e; animation: pulse 2s infinite; } - @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } - - .cabinet-body { padding: 16px; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); gap: 6px; height: calc(100% - 40px); } - .compartment { background: linear-gradient(145deg, #1e293b, #0f172a); border: 1px solid #334155; border-radius: 6px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.3s; } - .compartment::after { content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; } - .compartment.free::after { background: #22c55e; box-shadow: 0 0 8px #22c55e; } - .compartment.charging::after { background: #3b82f6; box-shadow: 0 0 8px #3b82f6; animation: pulse 1.5s infinite; } - .compartment.error::after { background: #ef4444; box-shadow: 0 0 8px #ef4444; } - .compartment .icon { font-size: 14px; opacity: 0.6; } + .cabinet-visual::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0,212,255,0.1) 0%, transparent 30%); z-index: 1; } + .cabinet-img { max-width: 80%; max-height: 80%; object-fit: contain; position: relative; z-index: 2; filter: drop-shadow(0 0 30px rgba(0,212,255,0.3)); } /* 浮动光效 */ .float-light { position: absolute; width: 200px; height: 200px; border-radius: 50%; filter: blur(60px); opacity: 0.4; } @@ -106,51 +92,7 @@
-
-
-
- anzizhichong PMS -
-
-
-
-
🔋
-
-
🔋
-
-
⚠️
-
🔋
-
-
-
🔋
-
-
-
-
🔋
-
-
-
🔋
-
-
-
-
-
🔋
-
-
-
-
-
🔋
-
-
-
-
-
-
🔋
-
-
-
-
-
+ 安知充智能充电柜