可自定义的仪表盘美化 其中头像 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> `