<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { margin: 0; font-family: PingFang SC, sans-serif; color: #fff; } .container { width: 100vw; height: 100vh; font-size: 9vw; box-sizing: border-box; background: url("data:image/png;base64,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") no-repeat; overflow: hidden; position: relative; background-size: cover; user-select: none; } .box { box-sizing: border-box; width: 89vw; height: 82vh; position: absolute; top: 4vw; left: 5vw; } .header { width: 100%; height: 24vh; text-align: center; line-height: 24vh; font-weight: bold; background: #1499ff; } .content { width: 100%; height: calc(100% - 24vh); box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; font-family: PingFang SC; font-size: 8vw; } .active { color: #20ffd2; margin-left: 3vw; } .standby { color: #fff953; margin-left: 3vw; } .offline { color: #ff4949; margin-left: 3vw; } </style> </head> <body></body> <script> document.addEventListener("contextmenu", (e) => { e.preventDefault(); // 阻止默认右键菜单 }); </script> </html>