哪吒美化之自定义仪表盘美化

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

/* 设置页面背景为一张图片，全屏覆盖 */
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>

// 替换左上角“哪吒监控”为“哪吒云监控” 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> `