12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- <!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>
|