| 1 |
- #app{width:100%;height:100%}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body,html{width:100%;height:100%;overflow:auto;background:#030e1f;font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,sans-serif;color:#a8cce8}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(30,144,255,.22);border-radius:5px}.panel{position:relative;border-radius:15px;overflow:hidden;background:rgba(5,16,42,.95);border:1px solid rgba(30,144,255,.22)}.panel:before{content:"";inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(30,144,255,.05),transparent 50%,rgba(0,216,255,.03))}.panel:before,.pc{position:absolute;pointer-events:none}.pc{width:35px;height:35px;z-index:3}.pc.tl{top:0;left:0}.pc.tr{top:0;right:0;transform:scaleX(-1)}.pc.bl{bottom:0;left:0;transform:scaleY(-1)}.pc.br{bottom:0;right:0;transform:scale(-1)}.pc svg{width:100%;height:100%}.border-beam{position:absolute;inset:0;pointer-events:none;border-radius:inherit;overflow:hidden;z-index:2}.border-beam:before{top:0;left:-100%;background:linear-gradient(90deg,transparent,rgba(30,144,255,.9),rgba(0,216,255,.7),transparent);animation:beamTop 5s linear infinite}.border-beam:after,.border-beam:before{content:"";position:absolute;width:40%;height:3px}.border-beam:after{bottom:0;right:-100%;background:linear-gradient(90deg,transparent,rgba(0,216,255,.7),rgba(30,144,255,.9),transparent);animation:beamBottom 5s linear 2.5s infinite}@keyframes beamTop{0%{left:-40%}to{left:100%}}@keyframes beamBottom{0%{right:-40%}to{right:100%}}.panel-header{gap:25px;padding:20px 30px 18px;border-bottom:1px solid rgba(30,144,255,.22);background:linear-gradient(90deg,rgba(0,60,160,.18),transparent)}.panel-header,.panel-header-icon{display:flex;align-items:center;flex-shrink:0}.panel-header-icon{width:65px;height:65px;border-radius:12px;justify-content:center;font-size:32px;background:linear-gradient(135deg,rgba(30,144,255,.25),rgba(0,216,255,.15));border:1px solid rgba(30,144,255,.35);animation:iconGlow 3s ease-in-out infinite}@keyframes iconGlow{0%,to{box-shadow:0 0 15px rgba(30,144,255,.3)}50%{box-shadow:0 0 35px rgba(30,144,255,.7),0 0 12px rgba(0,216,255,.3)}}.panel-title{font-size:30px;font-weight:600;letter-spacing:2px;color:#00d8ff}.scan-effect{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}.scan-effect:after{content:"";position:absolute;left:0;right:0;height:200px;top:-200px;background:linear-gradient(180deg,transparent,rgba(30,144,255,.025),transparent);animation:scanFull 9s linear infinite}@keyframes scanFull{0%{top:-200px}to{top:100%}}.status-dot{width:20px;height:20px;border-radius:50%;display:inline-block;animation:dotPulse 2s ease-in-out infinite}.status-dot.green{background:#00e676;box-shadow:0 0 15px #00e676}.status-dot.red{background:#ff3b3b;box-shadow:0 0 15px #ff3b3b;animation:blinkRed .8s ease-in-out infinite}.status-dot.orange{background:#f59e0b;box-shadow:0 0 15px #f59e0b}@keyframes dotPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}@keyframes blinkRed{0%,to{opacity:1}50%{opacity:.35}}
|
