mirror of
https://github.com/TriM-Organization/LiteyukiBot-TriM.git
synced 2025-09-08 21:26:22 +00:00
🤡小丑！浪费生命啊
This commit is contained in:
@ -1,7 +1,7 @@
|
||||
:root {
|
||||
--main-text-color: #fff;
|
||||
--sub-text-color: #ccc;
|
||||
--tip-text-color: #999;
|
||||
--main-text-color: #000;
|
||||
--sub-text-color: #333;
|
||||
--tip-text-color: #777;
|
||||
--device-info-width: 240px;
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@ body {
|
||||
background-repeat: repeat-y;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
text-shadow: 1px 1px 2px black;
|
||||
text-shadow: 1px 1px 2px white;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ body {
|
||||
/* border-radius: 60px; */
|
||||
padding: 40px;
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
}
|
||||
|
||||
/*MapleMono*/
|
||||
@font-face {
|
||||
/* @font-face {
|
||||
font-family: 'MapleMono';
|
||||
src: url('../fonts/MapleMono/MapleMono-Light.woff2') format('woff2');
|
||||
font-weight: 200;
|
||||
@ -69,8 +69,8 @@
|
||||
src: url('../fonts/MapleMono/MapleMono-BoldItalic.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
} */
|
||||
|
||||
* {
|
||||
font-family: 'MapleMono', 'MiSans', sans-serif;
|
||||
font-family: 'MiSans', sans-serif;
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
:root {
|
||||
--main-text-color: #fff;
|
||||
--sub-text-color: #ccc;
|
||||
--tip-text-color: #999;
|
||||
--main-text-color: #000;
|
||||
--sub-text-color: #333;
|
||||
--tip-text-color: #777;
|
||||
--device-info-width: 240px;
|
||||
}
|
||||
|
||||
@ -9,17 +9,26 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bot-icon-tags {
|
||||
display: flex;
|
||||
flex-direction:row;
|
||||
justify-content: space-between;
|
||||
/* margin-left: auto; */
|
||||
}
|
||||
|
||||
.bot-icon {
|
||||
display: flex;
|
||||
width: 220px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
margin-right: 15px;
|
||||
/* margin-left: 20px; */
|
||||
}
|
||||
|
||||
.bot-icon-img {
|
||||
height: 220px;
|
||||
width: 220px;
|
||||
display: flex;
|
||||
height: 210px;
|
||||
width: 210px;
|
||||
/* border-radius: 50%; */
|
||||
}
|
||||
|
||||
@ -36,16 +45,19 @@
|
||||
color: var(--sub-text-color);
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
line-height: 1.6;
|
||||
line-height: 1.4;
|
||||
text-align: end;
|
||||
/* width: 700px; */
|
||||
}
|
||||
|
||||
.bot-tag[suffix="1"]::after {
|
||||
content: "|";
|
||||
.bot-tag[suffix="1"]::before {
|
||||
content: " | ";
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
height: 30%;
|
||||
line-height: 50%;
|
||||
/* margin: 0 5px; */
|
||||
height: 20%;
|
||||
line-height: 30%;
|
||||
color: var(--tip-text-color);
|
||||
/* text-align: end; */
|
||||
}
|
||||
|
||||
/*修改bot-info 下hr样式*/
|
||||
@ -55,6 +67,7 @@
|
||||
background: var(--tip-text-color);
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
/* text-align: end; */
|
||||
}
|
||||
|
||||
#hardware-info {
|
||||
@ -87,13 +100,13 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: #ffffff44;
|
||||
background-color: #00000044;
|
||||
/* border-radius: 30px; */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.disk-usage {
|
||||
background-color: #a2d8f4;
|
||||
background-color: #007ebd;
|
||||
height: 100%;
|
||||
/* border-radius: 30px; */
|
||||
position: absolute;
|
||||
@ -103,15 +116,15 @@
|
||||
.disk-title {
|
||||
position: absolute;
|
||||
color: var(--main-text-color);
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 25px;
|
||||
margin-bottom: 7px;
|
||||
margin-left: 20px;
|
||||
text-align: left;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#motto-text {
|
||||
font-size: 36px;
|
||||
font-size: 42px;
|
||||
word-wrap: break-word;
|
||||
color: var(--main-text-color);
|
||||
text-align: center;
|
||||
@ -119,16 +132,16 @@
|
||||
}
|
||||
|
||||
#motto-from {
|
||||
font-size: 30px;
|
||||
font-size: 32px;
|
||||
font-style: italic;
|
||||
color: var(--sub-text-color);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#addition-info {
|
||||
font-size: 36px;
|
||||
font-size: 32px;
|
||||
word-wrap: break-word;
|
||||
color: var(--main-text-color);
|
||||
text-align: center;
|
||||
margin: 30px 0 10px 0;
|
||||
/* margin: 30px 0 10px 0; */
|
||||
}
|
||||
@ -2,7 +2,7 @@ body {
|
||||
background-repeat: repeat-y;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: white;
|
||||
color: black;
|
||||
/* // 上10px，左右10px，下0px // margin: 24 px; */
|
||||
margin: 20px;
|
||||
}
|
||||
@ -11,7 +11,7 @@ body {
|
||||
border-radius: 30px;
|
||||
padding: 30px;
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@ -52,7 +52,7 @@ body {
|
||||
.bot-icon {
|
||||
/* border-radius: 50%; */
|
||||
height: 200px;
|
||||
background-color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.bot-name,
|
||||
@ -87,21 +87,21 @@ body {
|
||||
margin: 0 5px;
|
||||
height: 50%;
|
||||
line-height: 50%;
|
||||
color: #ccc;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.motto-text {
|
||||
font-size: 36px;
|
||||
color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.motto-author {
|
||||
font-size: 30px;
|
||||
font-style: italic;
|
||||
color: #ccc;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.addition-info {
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
@ -19,7 +19,7 @@ function createPieChartOption(title, data) {
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
color: '#000',
|
||||
fontSize: 30,
|
||||
lineHeight: 36
|
||||
}
|
||||
@ -27,9 +27,9 @@ function createPieChartOption(title, data) {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item',
|
||||
backgroundColor: '#fff',
|
||||
backgroundColor: '#000',
|
||||
},
|
||||
color: data.length === 3 ? ['#00a6ff', '#a2d8f4', "#ffffff44"] : ['#a2d8f4', '#ffffff44'],
|
||||
color: data.length === 3 ? ['#053349', '#007ebd', "#00000044"] : ['#007ebd', '#00000044'],
|
||||
series: [
|
||||
{
|
||||
name: 'info',
|
||||
@ -128,11 +128,11 @@ function main() {
|
||||
botInfoDiv.querySelector('.bot-name').innerText = bot['name']
|
||||
let tagArray = [
|
||||
bot['protocol_name'],
|
||||
bot['app_name'],
|
||||
`${localData['groups']} ${bot['groups']}`,
|
||||
`${localData['friends']} ${bot['friends']}`,
|
||||
`${localData['message_sent']} ${bot['message_sent']}`,
|
||||
`${localData['message_received']} ${bot['message_received']}`,
|
||||
`${bot['app_name']}`,
|
||||
`${localData['groups']}${bot['groups']}`,
|
||||
`${localData['friends']}${bot['friends']}`,
|
||||
`${localData['message_sent']}${bot['message_sent']}`,
|
||||
`${localData['message_received']}${bot['message_received']}`,
|
||||
]
|
||||
// 添加一些标签
|
||||
tagArray.forEach(
|
||||
@ -141,7 +141,7 @@ function main() {
|
||||
tagSpan.className = 'bot-tag'
|
||||
tagSpan.innerText = tag
|
||||
// 给最后一个标签不添加后缀
|
||||
tagSpan.setAttribute('suffix', index === tagArray.length - 1 ? '0' : '1')
|
||||
tagSpan.setAttribute('suffix', (index === 0)||(tag[0] == '\n') ? '0' : '1')
|
||||
botInfoDiv.querySelector('.bot-tags').appendChild(tagSpan)
|
||||
}
|
||||
)
|
||||
@ -154,16 +154,16 @@ function main() {
|
||||
let liteyukiInfoDiv = document.importNode(document.getElementById('bot-template').content, true) // 复制模板
|
||||
liteyukiInfoDiv.className = 'info-box bot-info'
|
||||
liteyukiInfoDiv.querySelector('.bot-icon-img').setAttribute('src', './img/liteyuki.png')
|
||||
liteyukiInfoDiv.querySelector('.bot-name').innerText = liteyukiData['name']
|
||||
liteyukiInfoDiv.querySelector('.bot-name').innerText = `${liteyukiData['name']} - 睿乐`
|
||||
|
||||
let tagArray = [
|
||||
`Liteyuki ${liteyukiData['version']}`,
|
||||
`灵温 ${liteyukiData['version']}`,
|
||||
`Nonebot ${liteyukiData['nonebot']}`,
|
||||
liteyukiData['python'],
|
||||
`${liteyukiData['python']}`,
|
||||
liteyukiData['system'],
|
||||
`${localData['plugins']} ${liteyukiData['plugins']}`,
|
||||
`${localData['resources']} ${liteyukiData['resources']}`,
|
||||
`${localData['bots']} ${liteyukiData['bots']}`,
|
||||
`${localData['plugins']}${liteyukiData['plugins']}`,
|
||||
`${localData['resources']}${liteyukiData['resources']}`,
|
||||
`${localData['bots']}${liteyukiData['bots']}`,
|
||||
`${localData['runtime']} ${secondsToTextTime(liteyukiData['runtime'])}`,
|
||||
]
|
||||
tagArray.forEach(
|
||||
@ -172,7 +172,7 @@ function main() {
|
||||
tagSpan.className = 'bot-tag'
|
||||
tagSpan.innerText = tag
|
||||
// 给最后一个标签不添加后缀
|
||||
tagSpan.setAttribute('suffix', index === tagArray.length - 1 ? '0' : '1')
|
||||
tagSpan.setAttribute('suffix', (index === 0)||(tag[0] == '\n') ? '0' : '1')
|
||||
liteyukiInfoDiv.querySelector('.bot-tags').appendChild(tagSpan)
|
||||
}
|
||||
)
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
botName.innerText = bot.name;
|
||||
if (bot.self) {
|
||||
// 添加颜色
|
||||
botName.style.color = '#d0e9ff';
|
||||
botName.style.color = '#32383D';
|
||||
}
|
||||
botDetail.appendChild(botName);
|
||||
|
||||
@ -88,7 +88,7 @@
|
||||
tagSpan.className = 'tag';
|
||||
if (bot.self) {
|
||||
// 添加颜色
|
||||
tagSpan.style.color = '#a2d8f4';
|
||||
tagSpan.style.color = '#007ebd';
|
||||
}
|
||||
botTags.appendChild(tagSpan);
|
||||
if (index === bot.tags.length - 1) {
|
||||
@ -147,17 +147,17 @@
|
||||
//文字颜色
|
||||
|
||||
lineHeight: 36,
|
||||
color: '#fff',
|
||||
color: '#000',
|
||||
fontSize: 30
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: "item",
|
||||
backgroundColor: "#ffffff00",
|
||||
backgroundColor: "#00000000",
|
||||
// {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
|
||||
},
|
||||
color: ['#a2d8f4', "#ffffff44", '#00a6ff'],
|
||||
color: ['#007ebd', "#00000044", '#053349'],
|
||||
series: [
|
||||
{
|
||||
name: 'info',
|
||||
@ -196,20 +196,20 @@
|
||||
}
|
||||
// data为百分比，最大值为100
|
||||
return {
|
||||
background: '#d0e9ff',
|
||||
background: '#32383D',
|
||||
title: {
|
||||
text: title,
|
||||
left: '5%',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
color: '#000',
|
||||
fontSize: 30
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: "item",
|
||||
backgroundColor: "#ffffff",
|
||||
backgroundColor: "#000000",
|
||||
},
|
||||
grid: {
|
||||
left: '0',
|
||||
@ -234,7 +234,7 @@
|
||||
data: [percent],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#a2d8f4',
|
||||
color: '#007ebd',
|
||||
barBorderRadius: [50, 0, 0, 50]
|
||||
}
|
||||
},
|
||||
@ -246,7 +246,7 @@
|
||||
data: [100 - percent],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#d0e9ff',
|
||||
color: '#32383D',
|
||||
barBorderRadius: [fillet, 50, 50, fillet]
|
||||
}
|
||||
},
|
||||
|
||||
@ -12,17 +12,20 @@
|
||||
|
||||
<body>
|
||||
<template id="bot-template">
|
||||
<div class="info-box bot-info">
|
||||
<div class="bot-icon">
|
||||
<div class="info-box bot-info" style="justify-content: space-between;">
|
||||
<div class="bot-icon" style="text-align:start;">
|
||||
<img class="bot-icon-img" src="" alt="bot-icon">
|
||||
</div>
|
||||
<div class="bot-detail">
|
||||
<div class="bot-name">
|
||||
<div class="bot-name" style="text-align:start">
|
||||
TriM-Liteyuki
|
||||
</div>
|
||||
<hr>
|
||||
<div class="bot-tags">
|
||||
<!-- tag span-->
|
||||
<div class="bot-icon-tags">
|
||||
<!-- <div style="text-align:start; width: 10px;"> <img src="./img/empty.png"></div> -->
|
||||
<div class="bot-tags">
|
||||
<!-- tag span-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user