bot/app
3
6.9k
Fork 1
mirror of https://github.com/LiteyukiStudio/LiteyukiBot.git synced 2024-11-23 04:27:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

📝 [docs]: 新增在线展示

Browse Source
This commit is contained in:
远野千束 2024-09-01 17:57:21 +08:00
parent 83a2d36209
commit 499caca7e3
3 changed files with 87 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/.vitepress/theme/liteyuki.css
View File

@ -9,6 +9,9 @@
--vp-c-gray-1: #eee; --vp-c-gray-1: #eee;
--vp-c-gray-2: #aaa; --vp-c-gray-2: #aaa;
--border-radius-1: 10px;
--border-radius-2: 20px;
--border-radius-3: 40px;
} }

101
docs/components/StatsBar.vue
View File

@ -26,42 +26,62 @@ async function updateData() {
} }
updateData(); updateData();
setInterval(updateData, 10000); setInterval(updateData, 10000);
</script> </script>
<template> <template>
<div class="online-status-bar"> <div class="stats-bar">
<div id="total" class="section"> <div class="stats-info">
<div class="line"> <div id="total" class="section">
<span class=dot style="background-color: #00a6ff"></span> <div class="line">
<span class="text">{{ totalText }}</span> <span class=dot style="background-color: #00a6ff"></span>
<span class="text">{{ totalText }}</span>
</div>
<div class="number">{{ total }}</div>
</div>
<div id="online" class="section">
<div class="line">
<span class=dot style="background-color: #00ff00"></span>
<span class="text">{{ onlineText }}</span>
</div>
<div class="number">{{ online }}</div>
</div> </div>
<div class="number">{{ total }}</div>
</div> </div>
<div id="online" class="section"> <div class="starmap">
<div class="line"> <iframe src="https://starmap.liteyuki.icu/" width="100%" height="300px"></iframe>
<span class=dot style="background-color: #00ff00"></span>
<span class="text">{{ onlineText }}</span>
</div>
<div class="number">{{ online }}</div>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.online-status-bar {
.stats-bar {
display: flex; display: flex;
justify-content: center; justify-content: space-between;
padding: 20px; padding: 20px;
margin: 30px 10px 10px; margin: 30px 10px 10px 10px;
border-radius: 20px; border-radius: var(--border-radius-2);
background-color: var(--vp-c-gray-1); background-color: var(--vp-c-gray-1);
flex-direction: column; /* 默认纵向布局 */
}
.stats-info {
width: 100%;
padding: 10px;
display: flex;
justify-content: space-evenly;
margin-bottom: 20px;
}
.section {
display: flex;
flex-direction: column;
} }
.section:not(:last-child) { .section:not(:last-child) {
margin-right: 100px; margin-right: 50px;
} }
.line { .line {
@ -76,9 +96,54 @@ setInterval(updateData, 10000);
margin-right: 5px; margin-right: 5px;
} }
.text {
font-size: 14px;
}
.number { .number {
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
margin-top: 5px; margin-top: 5px;
} }
.starmap {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
border-radius: var(--border-radius-2);
}
.starmap iframe {
position: absolute;
top: -150px; /* 根据需要调整裁剪位置 */
left: -40px; /* 根据需要调整裁剪位置 */;
width: calc(100% + 80px); /* 根据需要调整裁剪宽度 */
height: calc(100% + 300px); /* 根据需要调整裁剪高度 */
}
@media (min-width: 768px) {
/* PC模式下的样式 */
.stats-bar {
flex-direction: row;
}
.stats-info {
width: 40%;
}
.starmap {
width: 60%;
height: 400px;
}
.starmap iframe {
position: absolute;
top: -130px; /* 根据需要调整裁剪位置 */
left: -60px; /* 根据需要调整裁剪位置 */;
width: calc(100% + 120px); /* 根据需要调整裁剪宽度 */
height: calc(100% + 280px); /* 根据需要调整裁剪高度 */
}
}
</style> </style>

2
docs/package.json
View File

@ -4,7 +4,7 @@
"vitepress-sidebar": "^1.25.0" "vitepress-sidebar": "^1.25.0"
}, },
"scripts": { "scripts": {
"docs:dev": "vitepress dev", "docs:dev": "vitepress dev --host",
"docs:build": "vitepress build", "docs:build": "vitepress build",
"docs:preview": "vitepress preview" "docs:preview": "vitepress preview"
}, },