综述: 优化平台端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 { | ||||
|             flex: 1; | ||||
|             background: #f5f5f5; | ||||
|             padding: 20px; | ||||
|             overflow-y: auto; | ||||
|             overflow: hidden; | ||||
|             display: flex; | ||||
|             flex-direction: column; | ||||
|             position: relative; | ||||
|         } | ||||
| 
 | ||||
|         .content-container { | ||||
|             background: #fff; | ||||
|             border-radius: 8px; | ||||
|             padding: 24px; | ||||
|             min-height: 400px; | ||||
|             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | ||||
|         .tab-content { | ||||
|             flex: 1; | ||||
|             overflow: hidden; | ||||
|             display: none; | ||||
|             position: absolute; | ||||
|             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-container"> | ||||
|                     <div id="tab-content-home" class="tab-content active"> | ||||
|                         <h2 style="font-size: 24px; font-weight: 600; color: #262626; margin-bottom: 16px;">欢迎使用管理后台</h2> | ||||
|                         <p style="color: #666; font-size: 14px;">这是首页内容区域,点击左侧菜单可以在此区域显示对应的页面内容。</p> | ||||
|                     </div> | ||||
|                 <div id="tab-content-home" class="tab-content" style="display: block;"> | ||||
|                     <h2 style="font-size: 24px; font-weight: 600; color: #262626; margin-bottom: 16px; padding: 24px 24px 0;">欢迎使用管理后台</h2> | ||||
|                     <p style="color: #666; font-size: 14px; padding: 0 24px;">这是首页内容区域,点击左侧菜单可以在此区域显示对应的页面内容。</p> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </main> | ||||
|  | @ -467,7 +475,7 @@ | |||
|             tabsContainer.appendChild(newTab); | ||||
| 
 | ||||
|             // 创建新内容区域 | ||||
|             const contentArea = document.querySelector('.content-container'); | ||||
|             const contentArea = document.querySelector('.content-area'); | ||||
|             const newContent = document.createElement('div'); | ||||
|             newContent.id = `tab-content-${tabId}`; | ||||
|             newContent.className = 'tab-content'; | ||||
|  | @ -506,13 +514,13 @@ | |||
|             tabsContainer.appendChild(newTab); | ||||
| 
 | ||||
|             // 创建新内容区域,使用iframe嵌入页面 | ||||
|             const contentArea = document.querySelector('.content-container'); | ||||
|             const contentArea = document.querySelector('.content-area'); | ||||
|             const newContent = document.createElement('div'); | ||||
|             newContent.id = `tab-content-${tabId}`; | ||||
|             newContent.className = 'tab-content'; | ||||
|             newContent.style.display = 'none'; | ||||
|             newContent.innerHTML = ` | ||||
|                 <iframe src="${link.href}" style="width: 100%; height: 600px; border: none;"></iframe> | ||||
|                 <iframe src="${link.href}"></iframe> | ||||
|             `; | ||||
|             contentArea.appendChild(newContent); | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue