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嵌入页面
|