Diuse/zhenxun_bot
1
0
Fork 0
mirror of https://github.com/zhenxun-org/zhenxun_bot.git synced 2026-10-07 04:40:00 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

✨ 重构自检ui

Browse Source
This commit is contained in:
HibiKier
2024-09-07 01:25:42 +08:00
parent 51371ba954
commit 3b4c206a24
12 changed files with 596 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/template/check/main.css
+179
View File
@@ -0,0 +1,179 @@
@font-face {
font-family: fzrzFont;
/* 导入的字体文件 */
src: url("./res/font/fzrzExtraBold.ttf");
}
body {
position: absolute;
left: -8px;
top: -8px;
}
.wrapper{
height: 750px;
width: 395px;
background-color: antiquewhite;
position: relative;
}
.top-image {
height: 215px;
width: 395px;
}
.abs-image {
height: 426px;
width: 93px;
position: absolute;
right: 39px;
top: 240px;
}
.bot-text {
height: 55px;
width: 335px;
position: relative;
padding: 0 30px;
margin-top: 10px;
}
.main {
height: 448px;
width: 335px;
padding: 0 30px;
position: relative;
}
.title {
background-color: #EB869D;
height: 32px;
font-family: 'fzrzFont';
color: white;
width: max-content;
border-radius: 20px;
padding: 0 10px;
float: left;
margin-top: 10px;
}
.title-n {
height: 23px;
width: 23px;
border-radius: 50%;
background-color: white;
position: absolute;
left: 36px;
top: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.title-a {
background-color: #ED859E;
height: 19px;
width: 19px;
border-radius: 50%;
}
.network {
display: flex;
margin-left: 10px;
}
.network-item {
font-family: 'fzrzFont';
color: #EC859F;
display: flex;
justify-items: center;
align-items: center;
margin-left: 20px;
}
.network-status {
height: 10px;
width: 10px;
border-radius: 50%;
margin-left: 5px;
}
.network-text {
margin-left: 5px;
}
.network-item {
margin-top: 10px;
}
.data-status-item {
margin-top: 10px;
}
.data-status {
width: 100%;
height: 240px;
/* background-color:blueviolet; */
margin-top: 22px;
}
.data-status-item {
display: flex;
font-family: 'fzrzFont';
font-size: 15px;
line-height: 18.5px;
height: 50px;
}
.process {
height: 28px;
width: 105px;
border: #ED859E 4px solid;
border-radius: 30px;
overflow: hidden;
}
.process-bar {
height: 28px;
width: 30px;
background-color: #EB869D;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
.data-status-item-text {
margin-left: 10px;
color: #EC839D;
}
.line {
background-color: #EC859F;
height: 2px;
width: 100%;
border-radius: 20px;
}
.status-text {
font-family: 'fzrzFont';
color: #EC859F;
height: 90px;
display: flex;
}
.status-text-title {
height: 25%;
}
.tip {
font-family: 'fzrzFont';
color: #ecbac7;
font-size: 10px;
position: absolute;
right: 5px;
bottom: 1px;
}
resources/template/check/main.html
+90
View File
@@ -0,0 +1,90 @@
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<!-- <link rel="stylesheet" href="./res/font-awesome/css/font-awesome.min.css"> -->
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<img class="top-image" src="res/img/top.jpg"></img>
<img class="abs-image" src="res/img/bk.png"></img>
<div class="bot-text">
<div class="title">
<div class="title-n">
<div class="title-a"></div>
</div>
<span style="margin-left: 22px;">{{data.nickname}}自检</span>
</div>
<div class="network">
<div class="network-item">BaiDu<span class="network-status" style="background-color: {{data.baidu}}; border: 1px solid {{data.baidu}}"></span></div>
<div class="network-item">Google<span class="network-status" style="background-color: {{data.google}}; border: 1px solid {{data.google}}"></span></div>
</div>
</div>
<div class="main">
<div class="data-status">
<div class="data-status-item">
<div class="process">
<div class="process-bar" style="width: {{data.cpu_process}}%;"></div>
</div>
<div class="data-status-item-text">
<div>CPU</div>
<!-- <div style="font-size: 13px;">0.8% - 3.5Ghz [14core]</div> -->
<div style="font-size: 13px;">{{data.cpu_info}}</div>
</div>
</div>
<div class="data-status-item">
<div class="process">
<div class="process-bar" style="width: {{data.ram_process}}%;"></div>
</div>
<div class="data-status-item-text">
<div>RAM</div>
<div>{{data.ram_info}}</div>
</div>
</div>
<div class="data-status-item">
<div class="process">
<div class="process-bar" style="width: {{data.swap_process}}%;"></div>
</div>
<div class="data-status-item-text">
<div>SWAP</div>
<div>{{data.swap_info}}</div>
</div>
</div>
<div class="data-status-item">
<div class="process">
<div class="process-bar" style="width: {{data.disk_process}}%;"></div>
</div>
<div class="data-status-item-text">
<div>DISK</div>
<div>{{data.disk_info}}</div>
</div>
</div>
</div>
<div class="line"></div>
<div class="status-text">
<div>
<p class="status-text-title">CPU</p>
<p class="status-text-title">SYSTEM</p>
<p class="status-text-title">VERSION</p>
<p class="status-text-title">PLUGINS</p>
</div>
<div style="margin-left: 37px;">
<p class="status-text-title" style="font-size: 14px;line-height: 18.5px;">{{data.brand_raw}}</p>
<p class="status-text-title">{{data.system}}</p>
<p class="status-text-title">{{data.version}}</p>
<p class="status-text-title">{{data.plugin_count}} loaded</p>
</div>
</div>
</div>
<div class="tip">Create By Zhenxun</div>
</div>
</body>
<script type="text/javascript" src="main.js">
</script>
</html>
resources/template/check/main.js
View File
resources/template/check/res/font/fzrzExtraBold.ttf
BIN
View File
Binary file not shown.
resources/template/check/res/img/bk.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

resources/template/check/res/img/top.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 209 KiB