Uptime Kuma修改作为内嵌页面的自适应

伍亿伍千万2025-11-28 16:02
html 复制代码
/* ==================================
1. 基础样式重置（消除默认边距/溢出）
================================== */
/* 重置 html/body 默认边距，禁止页面自身滚动（由 iframe 控制滚动） */
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}


/* ==================================
2. iframe 适配核心样式（页面缩放逻辑）
================================== */
/* 页面最外层容器缩放配置（适配 iframe 大小）
   注：若实际外层容器不是 .app，需替换为真实类名（如 .container、.status-page 等） */
.app {
  /* 1. 基准尺寸（需根据页面实际设计稿调整，此处为示例值） */
  width: 1000px;  /* 页面理想宽度（基准） */
  height: 600px;  /* 页面理想高度（基准） */
  margin: 0 auto; /* 可选：让容器水平居中（若 iframe 宽度大于基准宽度时生效） */

  /* 2. 按 iframe 宽度自动缩放（核心适配逻辑） */
  transform-origin: top left; /* 缩放原点：左上角（避免缩放偏移） */
  transform: scale(calc(100vw / 1000)); /* 缩放比例 = iframe 宽度 ÷ 基准宽度 */

  /* 3. 同步缩放高度（保证页面比例不变形） */
  height: calc(600 * (100vw / 1000) * 1px);
}


/* ==================================
3. 元素隐藏（按需隐藏指定标签/容器）
================================== */
/* 隐藏所有 h1 标签（全局） */
h1 {
  display: none !important;
}

/* 隐藏含"服务"文本的目标 h2 标签（精准匹配 data-v 属性和类名） */
h2.group-title[data-v-f71ca08e] {
  display: none !important;
}

/* 隐藏指定 alert 容器（匹配 data-v 属性和类名） */
div.alert-heading.p-2[data-v-b8247e57] {
  display: none !important;
}

/* 隐藏页面底部 footer 区域（全局） */
footer {
  display: none !important;
}


/* ==================================
4. 间距调整（覆盖默认 padding/margin）
================================== */
/* 清除 .p-4 类的所有内边距（上下左右均为 0） */
.p-4 {
  padding: 0 !important;
}

/* 清除 .mb-4 类的底部外边距（设为 0） */
.mb-4 {
  margin-bottom: 0 !important;
}

/* 调整 .mt-4 类的顶部外边距（从 1.5rem 改为 0.5rem） */
.mt-4 {
  margin-top: 0.5rem !important;
}