From 710c42635fba57f1f9827b36e36a7176f392c255 Mon Sep 17 00:00:00 2001
From: linbin <495561397@qq.com>
Date: Sat, 6 Sep 2025 10:33:10 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=BC=E8=BF=B0:=20=E4=BC=98=E5=8C=96Iframe?=
=?UTF-8?q?=E5=86=85=E5=AE=B9=E6=98=BE=E7=A4=BA=EF=BC=8C=E5=AE=9E=E7=8E=B0?=
=?UTF-8?q?=E6=97=A0=E7=BC=9D=E5=85=A8=E5=B1=8F=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 在`index.html`中，通过动态注入CSS的方式，强制使iframe内的页面顶格全屏显示，移除了不必要的边距和滚动条。
- 调整`权限分配`和`权限编辑`页面的样式，移除容器的外边距、圆角和阴影，以适应新的全屏嵌入模式。
---
平台端web/CLAUDE.md | 52 ++++++++++++++++++++
平台端web/index.html | 82 +++++++++++++++++++++++++++++---
平台端web/权限管理/权限分配.html | 14 +++---
平台端web/权限管理/权限编辑.html | 14 +++---
4 files changed, 144 insertions(+), 18 deletions(-)
create mode 100644 平台端web/CLAUDE.md
diff --git a/平台端web/CLAUDE.md b/平台端web/CLAUDE.md
new file mode 100644
index 0000000..7bc978c
--- /dev/null
+++ b/平台端web/CLAUDE.md
@@ -0,0 +1,52 @@
+## IFRAME嵌入页面样式规范
+═══════════════════════
+
+为确保所有通过iframe嵌入的页面都能顶格显示（无边距、无空白），所有嵌入页面必须遵循以下CSS样式规范：
+
+### 必须修改的样式：
+
+1. **body标签样式**：
+ ```css
+ body {
+ margin: 0 !important;
+ padding: 0 !important;
+ }
+ ```
+
+2. **容器样式（.container或主容器）**：
+ ```css
+ .container {
+ width: 100% !important;
+ height: 100vh !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ max-width: none !important;
+ border-radius: 0 !important;
+ box-shadow: none !important;
+ }
+ ```
+
+3. **响应式设计**：
+ ```css
+ @media (max-width: 768px) {
+ .container {
+ margin: 0 !important;
+ border-radius: 0 !important;
+ }
+ }
+ ```
+
+### 修改清单：
+- [ ] 移除body的padding
+- [ ] 将max-width改为width: 100%
+- [ ] 将margin: 0 auto改为margin: 0
+- [ ] 移除border-radius和box-shadow
+- [ ] 确保高度为100vh
+- [ ] 检查响应式样式
+
+### 适用范围：
+- 权限管理模块所有页面
+- 产品管理模块所有页面
+- 用户管理模块所有页面
+- 系统设置模块所有页面
+- 所有未来新增的iframe嵌入页面
\ No newline at end of file
diff --git a/平台端web/index.html b/平台端web/index.html
index fffa572..cf5a9b8 100644
--- a/平台端web/index.html
+++ b/平台端web/index.html
@@ -109,6 +109,8 @@
padding: 0;
overflow-y: hidden;
background-color: #fff;
+ display: flex;
+ flex-direction: column;
}
.content-header {
@@ -124,7 +126,10 @@
}
.content-body {
+ flex: 1;
line-height: 1.6;
+ padding: 0;
+ margin: 0;
}
.content-section {
@@ -148,11 +153,23 @@
/* iframe样式 */
.content-iframe {
width: 100%;
- height: 100vh;
+ height: 100%;
border: none;
- border-radius: 5px;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ margin: 0;
+ padding: 0;
}
+
+ /* 为iframe内的页面提供通用的顶格显示样式 */
+ .content-iframe::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ /* 通过JavaScript动态注入CSS到iframe中，确保所有嵌入页面都顶格显示 */
/* 响应式设计 */
@media (max-width: 768px) {
@@ -370,11 +387,11 @@
// 如果是权限编辑或市场经营者创建，显示iframe
if (title === '权限编辑') {
contentBody.innerHTML = `
-
+
`;
} else if (title === '市场经营者创建') {
contentBody.innerHTML = `
-
+
`;
} else {
// 其他菜单项直接在内容区域显示iframe
@@ -435,10 +452,63 @@
// 如果有对应的URL，则在iframe中显示该页面
if (url) {
- contentBody.innerHTML = ``;
+ contentBody.innerHTML = ``;
}
}
}
+
+ // 为iframe注入通用的全屏样式
+ function injectFullScreenStyles(iframe) {
+ try {
+ // 等待iframe加载完成
+ iframe.onload = function() {
+ try {
+ const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+
+ // 创建样式标签
+ const style = iframeDoc.createElement('style');
+ style.textContent = `
+ * {
+ margin: 0 !important;
+ padding: 0 !important;
+ box-sizing: border-box !important;
+ }
+
+ html, body {
+ width: 100% !important;
+ height: 100% !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ overflow-x: hidden !important;
+ }
+
+ .container {
+ width: 100% !important;
+ height: 100vh !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ max-width: none !important;
+ border-radius: 0 !important;
+ box-shadow: none !important;
+ }
+
+ body {
+ padding: 0 !important;
+ margin: 0 !important;
+ }
+ `;
+
+ // 将样式添加到iframe的head中
+ iframeDoc.head.appendChild(style);
+ } catch (e) {
+ // 如果跨域无法访问iframe内容，忽略错误
+ console.log('无法访问iframe内容（可能是跨域限制）:', e);
+ }
+ };
+ } catch (e) {
+ console.log('注入样式失败:', e);
+ }
+ }
});
diff --git a/平台端web/权限管理/权限分配.html b/平台端web/权限管理/权限分配.html
index 45413a2..2c64fba 100644
--- a/平台端web/权限管理/权限分配.html
+++ b/平台端web/权限管理/权限分配.html
@@ -16,15 +16,17 @@
background-color: #f5f7fa;
color: #333;
height: 100vh;
- padding: 20px;
+ margin: 0;
+ padding: 0;
}
.container {
- max-width: 1200px;
- margin: 0 auto;
+ width: 100%;
+ height: 100vh;
+ margin: 0;
background-color: #fff;
- border-radius: 8px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ border-radius: 0;
+ box-shadow: none;
overflow: hidden;
}
@@ -331,7 +333,7 @@
/* 响应式设计 */
@media (max-width: 768px) {
.container {
- margin: 10px;
+ margin: 0;
border-radius: 0;
}
diff --git a/平台端web/权限管理/权限编辑.html b/平台端web/权限管理/权限编辑.html
index 3e93a1c..d85d6cb 100644
--- a/平台端web/权限管理/权限编辑.html
+++ b/平台端web/权限管理/权限编辑.html
@@ -16,15 +16,17 @@
background-color: #f5f7fa;
color: #333;
height: 100vh;
- padding: 20px;
+ margin: 0;
+ padding: 0;
}
.container {
- max-width: 1200px;
- margin: 0 auto;
+ width: 100%;
+ height: 100vh;
+ margin: 0;
background-color: #fff;
- border-radius: 8px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ border-radius: 0;
+ box-shadow: none;
overflow: hidden;
}
@@ -414,7 +416,7 @@
/* 响应式设计 */
@media (max-width: 768px) {
.container {
- margin: 10px;
+ margin: 0;
border-radius: 0;
}