DEMO: https://up.dsuk.top
原始代码来源：https://www.nodeseek.com/post-80275-1
由于版本老旧，不适配最新版本，同时源代码只有暗色模式，于是参考原布局重写
截图
第二版更新，扔给claude重写了注释
css 代码，每项都有注释，可根据自己喜好调整
/* ==============================
1. 基础元素样式
============================== */
/* 项目名称样式 */
.item-name[data-v-f71ca08e] {
font-weight: 700;
padding-left: 10px;
padding-right: 6px;
margin: 2px;
}
/* 链接样式及动画效果 */
a {
text-decoration: none;
position: relative;
padding-left: 12px;
z-index: 1;
display: inline-block;
transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
a::before {
content: '';
position: absolute;
left: 0;
top: 46%;
transform: translateY(-50%);
width: 5px;
height: 25px;
margin: 2px;
background-color: #55ba63;
transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
border-radius: 3px;
z-index: -1;
}
/* Hover效果 */
/* 白天模式 */
a:hover,
.p-2:hover {
color: #fff !important;
}
/* 夜间模式 */
.dark a:hover,
.dark .p-2:hover {
color: #000 !important;
}
/* 内边距样式 */
.p-2 {
padding-left: 0px;
padding-right: 10px;
font-weight: 700;
margin: 6px;
}
/* 链接悬停动画 */
a:hover::before {
width: 100%;
left: 0;
border-radius: 6px;
}
/* ==============================
2. 布局系统变量
============================== */
:root {
--bs-primary-rgb: 67, 179, 82;
--min-item-width: 28ch; /* 网格项目最小宽度 */
--max-item-width: 0.5fr; /* 网格项目最大宽度 */
--grid-spacing: 0.25rem; /* 网格间距 */
--item-padding: 0.2rem; /* 项目内边距 */
}
/* ==============================
3. 响应式设计
============================== */
/* 移动端适配 (600px以下) */
@media (max-width: 600px) {
:root {
--max-item-width: 1fr; /* 移动端全宽显示 */
}
}
/* 大屏幕适配 (2560px以上) */
@media (min-width: 2560px) {
:root {
--max-item-width: 300px; /* 大屏幕限制最大宽度 */
}
}
/* 4K屏幕优化 (3840px以上) */
@media (min-width: 3840px) {
.item-name {
font-size: 1.3em;
font-weight: 700;
letter-spacing: 0.8px;
}
.badge
, .tag-text[data-v-24636654] {
font-size: 0.9em;
}
.wrap > .d-flex {
font-size: 0.9em;
font-weight: 500;
letter-spacing: 0.8px;
}
}
/* ==============================
4. 布局组件
============================== */
/* 容器设置 */
.container {
max-width: 98%;
}
/* 监控列表网格布局 */
.monitor-list > .monitor-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--min-item-width), var(--max-item-width)));
grid-gap: var(--grid-spacing);
}
/* ==============================
5. 卡片组件
============================== */
/* 卡片基础样式 */
.item {
position: relative;
width: 100%;
padding: var(--item-padding) !important;
border: #ccc solid 1px;
}
.item > .row {
flex-direction: column;
}
.row > div {
width: 100%;
}
/* 状态条样式 */
.hp-bar-big .beat[data-v-636dc6a9] {
background-color: #55ba63;
}
/* ==============================
6. 徽章组件
============================== */
/* 桌面端徽章定位 */
body:not(.mobile) .badge{
position: absolute;
top: var(--item-padding);
right: var(--item-padding);
transform: none;
}
/* 移动端徽章定位 */
body.mobile .badge {
position: absolute;
top: var(--item-padding);
right: var(--item-padding);
}
/* ==============================
7. 标题与按钮
============================== */
/* 分组标题样式 */
.group-title span[data-v-f71ca08e] {
display: inline-block;
min-width: 70px;
margin: 0 auto;
text-align: center;
}
/* 标题和信息按钮样式 */
h2,
.h2,
.btn-info {
margin-bottom: 0rem;
font-weight: 600;
color: white;
border: 1px solid #ccc;
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
border-radius: 9px;
padding: 6px 10px;
display: inline-block;
text-align: center;
min-width: 8%;
}
/* ==============================
8. 主题设置
============================== */
/* 深色主题样式覆盖 */
.dark h2,
.dark .h2,
.dark .btn-info,
.dark .refresh-info[data-v-b8247e57] {
color: #000000;
}
/* 状态指示器 */
.overall-status {
border: 1px solid #ccc;
border-radius: 9px;
position: absolute;
top: 10px;
right: 10px;
padding: 0.5rem !important;
}
.overall-status[data-v-b8247e57] {
font-weight: 700;
font-size: 18px;
}
.bg-maintenance {
background-color: #4962bd !important;
}
/* 刷新组件样式 */
.refresh-info[data-v-b8247e57] {
font-family: math;
opacity: 0.9;
color: #ffffff;
border: 1px solid #ccc;
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
border-radius: 9px;
padding: 6px 6px;
display: inline-block;
text-align: center;
min-width: 4%;
}
/* UI元素样式 */
.rounded-pill {
border-radius: 0.5rem !important;
}
.shadow-box {
box-shadow: 0 15px 70px rgba(0, 0, 0, 0);
padding: 0px;
border-radius: 10px;
}
/* 间距调整 */
.p-2 {
padding: 0rem !important;
}
.mb-4,
.mb-5 {
margin-bottom: 0.5rem !important;
}
.mt-4 {
margin-top: 0.5rem !important;
}
.mt-5 {
margin-top: 0 !important;
}
/* 工具样式 */
::-webkit-scrollbar {
display: none;
}
