52 lines
1.3 KiB
Markdown
52 lines
1.3 KiB
Markdown
## 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嵌入页面 |