<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=1080, initial-scale=1.0"> <title>Liteyuki Stats</title> <link rel="stylesheet" href="css/fonts.css"> <link rel="stylesheet" href="css/style.css"> <style> .pie-chart { height: 240px; width: 240px; margin-bottom: 20px; } .pie-info { margin: 0 40px; align-items: center; } .bot-info { align-items: center; display: flex; } #hardware-info { justify-content: center; text-align: center; display: flex; } #disks-info { flex-wrap: wrap; justify-content: center; } #motto-info { margin-bottom: 0; text-align: center; white-space: pre-wrap; } .bot-icon { border-radius: 50%; height: 200px; background-color: white; } .bot-name, .bot-tag { margin-left: 20px; } .bot-name { font-size: 42px; font-weight: bold; } .bot-tag { margin-top: 10px; } .chart-label { font-size: 24px; max-width: 240px; } .tag { font-size: 32px; font-weight: 700; font-style: italic; } .tag[suffix="1"]::after { content: " | "; display: inline-block; margin: 0 5px; height: 50%; line-height: 50%; color: #ccc; } .motto-text { font-size: 36px; color: #fff; } .motto-author { font-size: 30px; font-style: italic; color: #ccc; } </style> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.3.0/dist/echarts.min.js"></script> </head> <body> <div class="info-box" id="hardware-info"> <div class="pie-info" id="cpu-info"> <div class="pie-chart" id="cpu-chart"></div> </div> <div class="pie-info" id="mem-info"> <div class="pie-chart" id="mem-chart"></div> </div> <div class="pie-info" id="swap-info"> <div class="pie-chart" id="swap-chart"></div> </div> </div> <div class="info-box" id="disks-info"> </div> <div class="info-box" id="motto-info"> </div> <!--储存数据div,不显示--> <div id="data" style="display: none">{{ data | tojson }}</div> <script src="js/motto.js"></script> <script src="js/style.js"></script> </body> </html>