可自定义的仪表盘美化 其中头像 loog 背景 均可改为自己的图片地址或者api 加入了玻璃碎片点击特效 字体设置为苹方字体 网页右底部加入一键返回顶部功能 复制全部代码 粘贴到自定义代码框即可 去除开头和结尾的符号
`<!DOCTYPE html> <html lang=“zh-CN”> <head> <meta charset=“UTF-8” /> <meta name=“viewport” content=“width=device-width, initial-scale=1.0” /> <title>哪吒探针 + 鼠标碎玻璃特效</title>
<style> /* 设置全局字体为苹方,增加文字白色阴影增强可读性 */ * { font-family: ‘PingFang SC’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif !important; font-size: 16px; text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.9); }
/* 设置页面背景为一张图片,全屏覆盖 */
html, body {
height: 100% !important;
background: url("改为你自己的图片地址") no-repeat center center fixed !important;
background-size: cover !important;
margin: 0;
color: white;
}
/* 顶部导航透明并带模糊效果 */
.el-header {
background-color: transparent !important;
backdrop-filter: blur(4px);
box-shadow: none !important;
}
/* 替换哪吒默认头像 */
img[src*="https://api.dicebear.com/7.x/notionists/svg"] {
content: url("改为你自己的头像图片地址") !important;
width: 100px !important;
height: auto !important;
}
/* 替换左上角 Logo 图标 */
img[src*="/dashboard/logo.svg"] {
content: url("改为你自己的loog图片") !important;
}
/* 去除页面底部页脚 */
footer {
display: none !important;
}
/* 主内容容器设置为半透明背景 */
.el-container {
background-color: rgba(255, 255, 255, 0.7) !important;
}
/* 卡片、弹窗等组件设置更高透明度的背景 */
.el-card, .el-message-box, .el-dialog {
background-color: rgba(255, 255, 255, 0.9) !important;
}
/* 深色文字设置白色阴影增强对比度 */
.el-text, .el-button, .el-table, .el-form-item__label, .el-form-item__content, .el-menu-item, .el-submenu__title {
color: #333 !important;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}
/* 浅色文字设置黑色阴影提升可视性 */
.el-text-light, .el-button--text, .el-link {
color: #fff !important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
/* 碎玻璃特效碎片样式 */
.fragment {
position: absolute;
width: 10px;
height: 10px;
background-color: rgba(255, 255, 255, 0.8);
clip-path: polygon(0 0, 100% 0, 100% 100%);
transform-origin: center;
animation: shatter 1.5s ease-out forwards;
pointer-events: none;
}
/* 碎玻璃动画关键帧 */
@keyframes shatter {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
100% {
transform: translate(var(--dx), var(--dy)) rotate(var(--angle)) scale(0.5);
opacity: 0;
}
}
/* 返回顶部按钮样式 */
#backToTop {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 1000;
background-color: transparent;
color: white;
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
font-size: 24px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s, transform 0.3s;
display: none;
}
#backToTop:hover {
transform: scale(1.1);
}
#backToTop::before {
content: "🚀";
font-size: 24px;
display: block;
line-height: 60px;
text-align: center;
}
</style> </head> <body>
<!-- 返回顶部按钮 --> <button id=“backToTop”></button>
<script> // 禁用哪吒默认动画小人 window.DisableAnimatedMan = true;
// 替换左上角“哪吒监控”为“哪吒云监控” const observerAdminTitle = new MutationObserver(mutations => { mutations.forEach(mutation => { mutation.addedNodes.forEach(node => { if (node.nodeType === 1) { const links = node.matches(‘.transition-opacity’) ? [node] : node.querySelectorAll(‘.transition-opacity’); links.forEach(link => { const textNode = Array.from(link.childNodes).find(n => n.nodeType === Node.TEXT_NODE && n.textContent.trim() === ‘哪吒监控’); if (textNode) { textNode.textContent = ‘哪吒云监控’; observerAdminTitle.disconnect(); } }); } }); }); }); observerAdminTitle.observe(document.body, { childList: true, subtree: true });
// 鼠标点击碎玻璃特效 document.addEventListener(‘click’, function (e) { createShatterEffect(e.pageX, e.pageY); });
function createShatterEffect(x, y) { const fragmentCount = 20; for (let i = 0; i < fragmentCount; i++) { const fragment = document.createElement(‘div’); fragment.className = ‘fragment’;
// 随机方向与位移
const angle = Math.random() * 360;
const distance = Math.random() * 200 + 50;
const dx = Math.cos((angle * Math.PI) / 180) * distance;
const dy = Math.sin((angle * Math.PI) / 180) * distance;
fragment.style.left = `${x}px`;
fragment.style.top = `${y}px`;
fragment.style.setProperty('--dx', `${dx}px`);
fragment.style.setProperty('--dy', `${dy}px`);
fragment.style.setProperty('--angle', `${Math.random() * 720}deg`);
document.body.appendChild(fragment);
setTimeout(() => fragment.remove(), 1500);
}
}
// 返回顶部功能 (() => { const backToTopButton = document.getElementById(‘backToTop’);
window.addEventListener('scroll', () => {
backToTopButton.style.display = window.scrollY > 300 ? 'block' : 'none';
});
backToTopButton.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
})(); </script> </body> </html> `