feat: 状态卡片模糊半径更改
This commit is contained in:
@ -11,7 +11,92 @@ body {
|
||||
.info-box {
|
||||
border-radius: 30px;
|
||||
padding: 30px;
|
||||
backdrop-filter: blur(60px);
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
@ -123,16 +123,30 @@
|
||||
mottoAuthor.style.textAlign = 'right';
|
||||
mottoDiv.appendChild(mottoAuthor);
|
||||
|
||||
function getPieUsage(data){
|
||||
let total = 0
|
||||
let used = 0
|
||||
data.forEach(item => {
|
||||
total += item.value
|
||||
if(item.name === 'FREE'){
|
||||
used += item.value
|
||||
}
|
||||
})
|
||||
console.log(used, total)
|
||||
return used / total * 100
|
||||
}
|
||||
|
||||
|
||||
function getPieOption(title, data) {
|
||||
return {
|
||||
animation: false,
|
||||
title: {
|
||||
text: title,
|
||||
text: title + '\n' + getPieUsage(data).toFixed(1) + '%',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
//文字颜色
|
||||
lineHeight: 36,
|
||||
color: '#fff',
|
||||
fontSize: 30
|
||||
}
|
||||
|
@ -7,93 +7,6 @@
|
||||
<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://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
|
||||
|
||||
</head>
|
||||
|
Reference in New Issue
Block a user