<!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; } .box { box-sizing: border-box; width: 88vw; height: 83vh; position: absolute; top: 1vw; left: 5vw; padding: 3vw 7vw; } .header { width: 100%; line-height: normal; font-weight: 400; margin-bottom: 3vw; } .content { width: 100%; height: calc(100% - 15vw); box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-evenly; align-items: flex-start; font-family: PingFang SC; font-size: 7.5vw; } .standby { color: #ffae00; } .offline { color: #ff4949; } span { margin-left: 3vw; } </style> </head> <body> </body> </html>