哪吒探针美化透明代码【20250803修改】

博主： wszx01
发布时间：2024 年 06 月 27 日
5 次浏览
暂无评论
8213字数
分类：技术

一、哪吒探针 v1美化透明代码【个别参数自定义修改填入，不修改留空】
1.前端自定义代码
```
<script>
const selectorButton = '#root > div > main > div.mx-auto.w-full.max-w-5xl.px-0.flex.flex-col.gap-4.server-info > section > div.flex.justify-center.w-full.max-w-\\[200px\\] > div > div > div.relative.cursor-pointer.rounded-3xl.px-2\\.5.py-\\[8px\\].text-\\[13px\\].font-\\[600\\].transition-all.duration-500.text-stone-400.dark\\:text-stone-500';
const selectorSection = '#root > div > main > div.mx-auto.w-full.max-w-5xl.px-0.flex.flex-col.gap-4.server-info > section';
const selector3 = '#root > div > main > div.mx-auto.w-full.max-w-5xl.px-0.flex.flex-col.gap-4.server-info > div:nth-child(3)';
const selector4 = '#root > div > main > div.mx-auto.w-full.max-w-5xl.px-0.flex.flex-col.gap-4.server-info > div:nth-child(4)';

let hasClicked = false;
let divVisible = false;
let swapping = false;

function forceBothVisible() {
  const div3 = document.querySelector(selector3);
  const div4 = document.querySelector(selector4);
  if (div3 && div4) {
    div3.style.display = 'block';
    div4.style.display = 'block';
  }
}

function hideSection() {
  const section = document.querySelector(selectorSection);
  if (section) {
    section.style.display = 'none';
  }
}

function tryClickButton() {
  const btn = document.querySelector(selectorButton);
  if (btn && !hasClicked) {
    btn.click();
    hasClicked = true;
    setTimeout(forceBothVisible, 500);
  }
}

function swapDiv3AndDiv4() {
  if (swapping) return;
  swapping = true;

const div3 = document.querySelector(selector3);
  const div4 = document.querySelector(selector4);
  if (!div3 || !div4) {
    swapping = false;
    return;
  }
  const parent = div3.parentNode;
  if (parent !== div4.parentNode) {
    swapping = false;
    return;
  }

// 交换 div3 和 div4 的位置
  parent.insertBefore(div4, div3);
  parent.insertBefore(div3, div4.nextSibling);

swapping = false;
}

const observer = new MutationObserver(() => {
  const div3 = document.querySelector(selector3);
  const div4 = document.querySelector(selector4);

const isDiv3Visible = div3 && getComputedStyle(div3).display !== 'none';
  const isDiv4Visible = div4 && getComputedStyle(div4).display !== 'none';

const isAnyDivVisible = isDiv3Visible || isDiv4Visible;

if (isAnyDivVisible && !divVisible) {
    hideSection();
    tryClickButton();
    setTimeout(swapDiv3AndDiv4, 100); 
  } else if (!isAnyDivVisible && divVisible) {
    hasClicked = false;
  }

divVisible = isAnyDivVisible;

if (div3 && div4) {
    if (!isDiv3Visible || !isDiv4Visible) {
      forceBothVisible();
    }
  }
});

const root = document.querySelector('#root');
if (root) {
  observer.observe(root, {
    childList: true,
    attributes: true,
    subtree: true,
    attributeFilter: ['style', 'class']
  });
}
</script>

if (container) {
        observer.disconnect();
        var existingImg = container.querySelector("img");
        if (existingImg) {
            container.removeChild(existingImg);
        }
        var imgElement = document.createElement("img");
        imgElement.src = "https://img.mypi.co/9527abc/70aa2fa541c62baa7434a35d60cb7eb3.webp";
        imgElement.style.position = "absolute";
        imgElement.style.right = "-20px";
        imgElement.style.top = "-85px";
        imgElement.style.zIndex = "10";
        imgElement.style.width = "90px";
        container.appendChild(imgElement);
    }
});
var config = { childList: true, subtree: true };
observer.observe(document.body, config);

</script>

```
2.仪表板自定义代码：
```
<script>
  // 禁用默认小人图（哪吒官方保留变量）
  window.DisableAnimatedMan = true;

// 引入自定义字体（MiSans 字体，可替换为你喜欢的字体）
  const fontLink = document.createElement('link');
  fontLink.rel = 'stylesheet';
  fontLink.href = 'https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans';
  document.head.appendChild(fontLink);

// 修改左上角标题文本 “哪吒监控” -> “哪吒探针”
  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 });
</script>

/* 仪表板背景图全覆盖 */
  html, body {
    height: 100% !important;
    background: url("") no-repeat center center fixed !important;
    background-size: cover !important;
  }

/* 顶部导航背景透明 + 模糊 */
  .el-header {
    background-color: transparent !important;
    backdrop-filter: blur(4px);
    box-shadow: none !important;
  }

/* 替换默认头像图（avatar） */
  img[src*="https://api.dicebear.com/7.x/notionists/svg"] {
    content: url("") !important;
    width: 100px !important;
    height: auto !important;
    margin-top: -0px;
  }

/* 替换左上角 logo 图标 */
  img[src*="/dashboard/logo.svg"] {
    content: url("") !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); /* 黑色阴影 */
  }
</style>

```
二、哪吒探针 v0美化透明代码
```
<style>
/* 背景图片 */
body {
    content: " " !important;
    background: fixed !important;
    z-index: -1 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background-position: top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-image: url(https://vip.199881.xyz/my/api2/) !important;
    font-family: Arial,Helvetica,sans-serif !important;
}

/* 大卡片https://image.dooo.ng/c/2024/05/13/66423846ca837.webp */
#app .ui.fluid.accordion {
    background-color: #fbfbfb26 !important;
    border-radius: 0.4rem !important;
}

/* 小卡片 */
.ui.four.cards>.card {
    border-radius: 0.6rem !important;
    background-color: #fafafaa3 !important;
}

/* 有点累状态进度条颜色 */
.ui.progress.warning .bar {
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%); !important;
}

/* 高负载状态进度条颜色 */
.ui.progress.error .bar {
    background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);important;
}

</style>

<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yinghua.js"></script>
```

最后修改：2025 年 08 月 03 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

哪吒探针美化透明代码【20250803修改】

wszx01 • 2024 年 06 月 27 日

let hasClicked = false;
let divVisible = false;
let swapping = false;

function hideSection() {
  const section = document.querySelector(selectorSection);
  if (section) {
    section.style.display = 'none';
  }
}

function tryClickButton() {
  const btn = document.querySelector(selectorButton);
  if (btn && !hasClicked) {
    btn.click();
    hasClicked = true;
    setTimeout(forceBothVisible, 500);
  }
}

function swapDiv3AndDiv4() {
  if (swapping) return;
  swapping = true;

// 交换 div3 和 div4 的位置
  parent.insertBefore(div4, div3);
  parent.insertBefore(div3, div4.nextSibling);

swapping = false;
}

const observer = new MutationObserver(() => {
  const div3 = document.querySelector(selector3);
  const div4 = document.querySelector(selector4);

const isDiv3Visible = div3 && getComputedStyle(div3).display !== 'none';
  const isDiv4Visible = div4 && getComputedStyle(div4).display !== 'none';

const isAnyDivVisible = isDiv3Visible || isDiv4Visible;

if (isAnyDivVisible && !divVisible) {
    hideSection();
    tryClickButton();
    setTimeout(swapDiv3AndDiv4, 100); 
  } else if (!isAnyDivVisible && divVisible) {
    hasClicked = false;
  }

divVisible = isAnyDivVisible;

if (div3 && div4) {
    if (!isDiv3Visible || !isDiv4Visible) {
      forceBothVisible();
    }
  }
});

</script>

```
2.仪表板自定义代码：
```
<script>
  // 禁用默认小人图（哪吒官方保留变量）
  window.DisableAnimatedMan = true;

/* 仪表板背景图全覆盖 */
  html, body {
    height: 100% !important;
    background: url("") no-repeat center center fixed !important;
    background-size: cover !important;
  }

/* 顶部导航背景透明 + 模糊 */
  .el-header {
    background-color: transparent !important;
    backdrop-filter: blur(4px);
    box-shadow: none !important;
  }

/* 替换左上角 logo 图标 */
  img[src*="/dashboard/logo.svg"] {
    content: url("") !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;
  }

/* 大卡片https://image.dooo.ng/c/2024/05/13/66423846ca837.webp */
#app .ui.fluid.accordion {
    background-color: #fbfbfb26 !important;
    border-radius: 0.4rem !important;
}

/* 小卡片 */
.ui.four.cards>.card {
    border-radius: 0.6rem !important;
    background-color: #fafafaa3 !important;
}

/* 有点累状态进度条颜色 */
.ui.progress.warning .bar {
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%); !important;
}

/* 高负载状态进度条颜色 */
.ui.progress.error .bar {
    background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);important;
}

</style>

<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yinghua.js"></script>
```

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

哪吒探针 美化透明代码【20250803修改】

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

哪吒探针美化透明代码【20250803修改】