admin/charging-cabinet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 使用AI生成的充电柜真实图片替换CSS动画

Browse Source
This commit is contained in:
12451 2026-07-02 17:41:00 +08:00
parent 23c91c075d
commit 2ff83033f5
2 changed files with 3 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
deploy/landing/cabinet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

64
deploy/landing/index.html
View File

@ -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 @@
<div class="cabinet-visual">
<div class="float-light light1"></div>
<div class="float-light light2"></div>
<div class="cabinet">
<div class="cabinet-header">
<div class="led"></div>
<span> anzizhichong PMS </span>
<div class="led"></div>
</div>
<div class="cabinet-body">
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment charging"><div class="icon">🔋</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment charging"><div class="icon">🔋</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment error"><div class="icon">⚠️</div></div>
<div class="compartment charging"><div class="icon">🔋</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment charging"><div class="icon">🔋</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment charging"><div class="icon">🔋</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment charging"><div class="icon">🔋</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment charging"><div class="icon">🔋</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment charging"><div class="icon">🔋</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment charging"><div class="icon">🔋</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
<div class="compartment free"><div class="icon">⚡</div></div>
</div>
</div>
<img src="cabinet.png" alt="安知充智能充电柜" class="cabinet-img">
</div>
</div>