最近BF疯狂买鸡，就想着有没有一个工具可以批量查看服务器状态，网上一搜，搜到了哪吒面板。安装完毕以后，顺手美化了一下前台样式，代码在此记录、分享一下。
图片预览
在线预览
代码
直接将下面的代码，复制粘贴，放到后台-系统设置-自定义代码(样式和脚本)里面即可。
<script>
/* --- 基础配置 --- */
window.CustomDesc = '墨染流年 · 遇见';
window.ShowNetTransfer = true;
window.FixedTopServerName = true;
window.CustomIllustration = 'https://s2.loli.net/2024/12/24/fj3EXY7umsyR9NW.webp';
window.CustomLinks = '[{\"link\":\"https://www.qun.gs/\",\"name\":\"归处\"},{\"link\":\"https://www.yjln.com/\",\"name\":\"书斋\"}]';
/* --- 字体引入：霞鹜文楷 --- */
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://npm.elemecdn.com/lxgw-wenkai-screen-webfont@1.7.0/style.css';
document.head.appendChild(link);
/* --- 页脚修改 --- */
const observerFooter = new MutationObserver(() => {
const footerLeft = document.querySelector('.server-footer-name > div:first-child');
const footerRight = document.querySelector('.server-footer-theme');
if (footerLeft) footerLeft.style.display = 'none';
if (footerRight) {
footerRight.innerHTML = '<span style="color:var(--ink-gray); opacity:0.7; font-size:13px;">山水一程 · 三生有幸</span>';
observerFooter.disconnect();
}
});
observerFooter.observe(document.body, { childList: true, subtree: true });
</script>
<style>
/* --- 核心配色定义 --- */
:root {
/* --- 浅色模式 (宣纸/水墨) --- */
--ink-black: #2c2c2c; /* 浓墨 - 标题 */
--ink-gray: #555555; /* 次墨 - 正文 */
--ink-light: #888888; /* 淡墨 - 辅助 */
--ink-border: #dcdcdc; /* 边框 */
--paper-bg: #fcfcf7; /* 宣纸白 */
--card-bg: rgba(255, 255, 255, 0.85);
--card-hover-bg: #ffffff; /* 悬停背景 */
--input-bg: rgba(255, 255, 255, 0.6); /* 输入框背景 */
/* 胭脂色系 */
--rouge: #d48a8a; /* 胭脂红 */
--rouge-deep: #b05f5f;
--rouge-bg: rgba(212, 138, 138, 0.12);
/* 标签印章色 (保持原样) */
--tag-blue-bg: #e3f2fd; --tag-blue-text: #4a7a9f;
--tag-green-bg: #e8f5e9; --tag-green-text: #5c8a66;
--tag-purple-bg: #f3e5f5; --tag-purple-text: #7b5e86;
--tag-gray-bg: #f5f5f5; --tag-gray-text: #666666;
/* 覆盖默认变量 */
--background: transparent;
--foreground: var(--ink-gray);
--card: var(--card-bg);
--card-foreground: var(--ink-gray);
--primary: var(--rouge);
--muted: #eaeaea;
--border: var(--ink-border);
}
/* --- 暗色模式 (黑金/砚台/漆器风格) --- */
html.dark {
--paper-bg: #121212; /* 深邃黑底 */
--ink-black: #e0e0e0; /* 亮银 - 标题 */
--ink-gray: #a0a0a0; /* 银灰 - 正文 */
--ink-light: #666666; /* 深����� - 辅助 */
--ink-border: #333333; /* 隐形边框 */
--card-bg: rgba(30, 30, 30, 0.6); /* 卡片更通透 */
--card-hover-bg: #2a2a2a; /* 悬停不再闪瞎眼 */
--input-bg: rgba(0, 0, 0, 0.3);
/* 胭脂色系调整为更亮的朱砂红，适应黑底 */
--rouge: #e67e7e;
--rouge-deep: #ff9999;
--rouge-bg: rgba(230, 126, 126, 0.15);
/* 标签印章色 (暗色适配) */
--tag-blue-bg: rgba(30, 40, 50, 0.8); --tag-blue-text: #8abce6;
--tag-green-bg: rgba(30, 45, 35, 0.8); --tag-green-text: #96dcb2;
--tag-purple-bg: rgba(45, 35, 50, 0.8); --tag-purple-text: #dcb2ec;
--tag-gray-bg: rgba(45, 45, 45, 0.8); --tag-gray-text: #b0b0b0;
}
/* --- 全局字体与重置 --- */
* {
font-family: 'LXGW WenKai Screen', sans-serif !important;
}
html, #root {
background-color: transparent !important;
background: transparent !important;
}
/* --- 核心背景纹理 --- */
body {
color: var(--ink-gray) !important;
min-height: 100vh;
background-color: var(--paper-bg) !important;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
/* 浅色背景层 */
background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E"),
radial-gradient(circle at 0% 0%, rgba(0, 0, 0, 0.05) 0%, transparent 50%),
radial-gradient(circle at 100% 100%, rgba(212, 138, 138, 0.15) 0%, transparent 40%),
linear-gradient(120deg, #fcfcf7 0%, #f7f5f0 100%) !important;
}
/* 暗色背景重绘 - 模拟黑砚台质感 */
html.dark body {
background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"),
radial-gradient(circle at 80% 20%, rgba(230, 126, 126, 0.08) 0%, transparent 40%), /* 右上角朱砂红晕 */
linear-gradient(to bottom, #1a1a1a 0%, #121212 100%) !important;
}
/* --- 顶部导航优化 --- */
.header-top {
border-bottom: 1px dashed var(--ink-border);
padding-bottom: 15px;
}
.header-handles a, button {
color: var(--ink-gray) !important;
transition: color 0.3s;
}
.header-handles a:hover {
color: var(--rouge-deep) !important;
text-shadow: 0 0 4px var(--rouge-bg);
}
/* 搜索框/按钮优化 */
button.border-input {
background: var(--input-bg) !important;
border: 1px solid var(--ink-border) !important;
color: var(--ink-gray) !important;
backdrop-filter: blur(4px); /* 毛玻璃感 */
}
html.dark button.border-input:hover {
border-color: var(--rouge) !important;
color: var(--ink-black) !important;
}
/* --- 概览卡片 --- */
.server-overview .rounded-lg {
background: var(--card-bg);
border: 1px solid var(--ink-border);
backdrop-filter: blur(5px);
}
/* 概览标题高亮 */
.server-overview .text-lg {
color: var(--ink-black) !important;
font-weight: bold;
}
/* 暗色下概览文字颜色修正 */
html.dark .server-overview p {
color: var(--ink-gray) !important;
}
/* 概览圆点修正 */
.bg-blue-500 { background-color: var(--ink-light) !important; }
.bg-green-500 { background-color: var(--rouge) !important; box-shadow: 0 0 8px var(--rouge); }
.bg-red-500 { background-color: #d32f2f !important; }
/* --- 服务器列表卡片 --- */
.server-card-list .rounded-lg {
background: var(--card-bg) !important;
border: 1px solid var(--ink-border) !important;
margin-bottom: 12px;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* 悬停效果优化 - 修复暗色闪白问题 */
.server-card-list .rounded-lg:hover {
border-color: var(--rouge) !important;
background: var(--card-hover-bg) !important; /* 使用变量控制 */
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
html.dark .server-card-list .rounded-lg:hover {
box-shadow: 0 4px 20px rgba(230, 126, 126, 0.1); /* 暗色下红色微光 */
}
/* 服务器名称 */
.server-card-list p.font-bold {
color: var(--ink-black) !important;
font-size: 1.05rem;
}
/* 旗帜微调 */
.server-card-list span[class*="flag-icon"] {
filter: sepia(0.2) opacity(0.9);
}
/* 进度条 */
.server-card-list div[role="progressbar"] {
background: rgba(128, 128, 128, 0.1) !important;
height: 6px !important;
border-radius: 3px;
}
.server-card-list div[role="progressbar"] > div {
background: var(--rouge) !important;
opacity: 0.9;
}
/* CPU/内存 数值颜色 */
.server-card-list .flex.items-center.text-xs.font-semibold {
color: var(--ink-gray) !important;
font-weight: normal !important;
}
/* 暗色下让数值稍微亮一点 */
html.dark .server-card-list .flex.items-center.text-xs.font-semibold {
color: #bbb !important;
}
/* 上传下载方块 */
.server-card-list .shadow-md {
box-shadow: none !important;
background: transparent !important;
border: 1px solid var(--ink-border) !important;
color: var(--ink-light) !important;
font-size: 0.75rem !important;
}
/* --- 标签 (Tags) --- */
.server-card-list .bg-blue-600,
.server-card-list .bg-purple-600,
.server-card-list .bg-green-600,
.server-card-list .bg-stone-600,
.server-card-list .bg-pink-600 {
border-radius: 4px;
padding: 2px 6px;
font-size: 0.75rem;
border: 1px solid transparent;
transition: all 0.3s;
}
.server-card-list .bg-blue-600 { background-color: var(--tag-blue-bg) !important; color: var(--tag-blue-text) !important; }
.server-card-list .bg-purple-600, .server-card-list .bg-pink-600 { background-color: var(--tag-purple-bg) !important; color: var(--tag-purple-text) !important; }
.server-card-list .bg-green-600 { background-color: var(--tag-green-bg) !important; color: var(--tag-green-text) !important; }
.server-card-list .bg-stone-600 { background-color: var(--tag-gray-bg) !important; color: var(--tag-gray-text) !important; }
/* 在线状态点 - 呼吸灯效果 */
span.h-2.w-2.rounded-full.bg-green-500 {
background-color: var(--rouge) !important;
box-shadow: 0 0 6px var(--rouge);
animation: breathing 2s infinite ease-in-out;
}
@keyframes breathing {
0% { opacity: 0.7; box-shadow: 0 0 2px var(--rouge); }
50% { opacity: 1; box-shadow: 0 0 8px var(--rouge); }
100% { opacity: 0.7; box-shadow: 0 0 2px var(--rouge); }
}
/* --- 插画优化 --- */
.server-overview img[alt="animated-man"] {
top: -80px !important;
opacity: 0.85;
transition: opacity 0.5s;
/* 浅色模式下混合 */
mix-blend-mode: multiply;
}
/* 暗色模式下插画处理 */
html.dark .server-overview img[alt="animated-man"] {
mix-blend-mode: normal; /* 取消正片叠底，否则黑底看不见 */
opacity: 0.6; /* 降低透明度融入背景 */
filter: brightness(0.8) contrast(1.2); /* 稍微压暗并增加对比 */
}
/* --- 滚动条美化 --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(136, 136, 136, 0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--rouge); }
</style>
请问一下 你的面板上的像 价格 到期倒计时 ipv4 ipv6等标签是怎么实现的？
在哪吒面板后台：“服务器 - 编辑服务器 - 套餐配置” 这里设置。