综述: 优化平台端web布局结构,移除多余嵌套层级
- 移除`.content-container`中间层,简化HTML结构,减少不必要的嵌套 - 优化`.content-area`样式,移除固定padding和背景色,使用flex布局和相对定位 - 将`.tab-content`改为绝对定位,直接填充父容器,最大化可用区域 - 移除iframe的固定高度限制(600px),改为自适应父容器高度(100%) - 移除`.content-container`的最小高度限制(400px)和装饰性样式 - 修改JavaScript中的DOM查询,将`.content-container`选择器改为`.content-area` - 优化首页内容区域,直接作为`.content-area`的子元素,减少嵌套层级 - 通过以上优化,iframe内容区域可以充分利用从标签页到窗口底部的所有垂直空间
This commit is contained in:
parent
e2f5333831
commit
5cef624e75
|
|
@ -309,17 +309,27 @@
|
||||||
/* 内容区域 */
|
/* 内容区域 */
|
||||||
.content-area {
|
.content-area {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background: #f5f5f5;
|
overflow: hidden;
|
||||||
padding: 20px;
|
display: flex;
|
||||||
overflow-y: auto;
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-container {
|
.tab-content {
|
||||||
background: #fff;
|
flex: 1;
|
||||||
border-radius: 8px;
|
overflow: hidden;
|
||||||
padding: 24px;
|
display: none;
|
||||||
min-height: 400px;
|
position: absolute;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 响应式设计 */
|
/* 响应式设计 */
|
||||||
|
|
@ -419,11 +429,9 @@
|
||||||
|
|
||||||
<!-- 内容区域 -->
|
<!-- 内容区域 -->
|
||||||
<div class="content-area">
|
<div class="content-area">
|
||||||
<div class="content-container">
|
<div id="tab-content-home" class="tab-content" style="display: block;">
|
||||||
<div id="tab-content-home" class="tab-content active">
|
<h2 style="font-size: 24px; font-weight: 600; color: #262626; margin-bottom: 16px; padding: 24px 24px 0;">欢迎使用管理后台</h2>
|
||||||
<h2 style="font-size: 24px; font-weight: 600; color: #262626; margin-bottom: 16px;">欢迎使用管理后台</h2>
|
<p style="color: #666; font-size: 14px; padding: 0 24px;">这是首页内容区域,点击左侧菜单可以在此区域显示对应的页面内容。</p>
|
||||||
<p style="color: #666; font-size: 14px;">这是首页内容区域,点击左侧菜单可以在此区域显示对应的页面内容。</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
@ -467,7 +475,7 @@
|
||||||
tabsContainer.appendChild(newTab);
|
tabsContainer.appendChild(newTab);
|
||||||
|
|
||||||
// 创建新内容区域
|
// 创建新内容区域
|
||||||
const contentArea = document.querySelector('.content-container');
|
const contentArea = document.querySelector('.content-area');
|
||||||
const newContent = document.createElement('div');
|
const newContent = document.createElement('div');
|
||||||
newContent.id = `tab-content-${tabId}`;
|
newContent.id = `tab-content-${tabId}`;
|
||||||
newContent.className = 'tab-content';
|
newContent.className = 'tab-content';
|
||||||
|
|
@ -506,13 +514,13 @@
|
||||||
tabsContainer.appendChild(newTab);
|
tabsContainer.appendChild(newTab);
|
||||||
|
|
||||||
// 创建新内容区域,使用iframe嵌入页面
|
// 创建新内容区域,使用iframe嵌入页面
|
||||||
const contentArea = document.querySelector('.content-container');
|
const contentArea = document.querySelector('.content-area');
|
||||||
const newContent = document.createElement('div');
|
const newContent = document.createElement('div');
|
||||||
newContent.id = `tab-content-${tabId}`;
|
newContent.id = `tab-content-${tabId}`;
|
||||||
newContent.className = 'tab-content';
|
newContent.className = 'tab-content';
|
||||||
newContent.style.display = 'none';
|
newContent.style.display = 'none';
|
||||||
newContent.innerHTML = `
|
newContent.innerHTML = `
|
||||||
<iframe src="${link.href}" style="width: 100%; height: 600px; border: none;"></iframe>
|
<iframe src="${link.href}"></iframe>
|
||||||
`;
|
`;
|
||||||
contentArea.appendChild(newContent);
|
contentArea.appendChild(newContent);
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue