| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  | <!DOCTYPE html> | 
					
						
							|  |  |  |  | <html lang="zh-CN"> | 
					
						
							|  |  |  |  | <head> | 
					
						
							|  |  |  |  |     <meta charset="UTF-8"> | 
					
						
							|  |  |  |  |     <meta name="viewport" content="width=device-width, initial-scale=1.0"> | 
					
						
							|  |  |  |  |     <title>管理后台</title> | 
					
						
							|  |  |  |  |     <style> | 
					
						
							|  |  |  |  |         * { | 
					
						
							|  |  |  |  |             margin: 0; | 
					
						
							|  |  |  |  |             padding: 0; | 
					
						
							|  |  |  |  |             box-sizing: border-box; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         body { | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; | 
					
						
							|  |  |  |  |             font-size: 14px; | 
					
						
							|  |  |  |  |             color: #333; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             height: 100vh; | 
					
						
							|  |  |  |  |             overflow: hidden; | 
					
						
							| 
									
										
										
										
											2025-10-20 17:40:00 +00:00
										 |  |  |  |             background: #f5f5f5; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .admin-layout { | 
					
						
							|  |  |  |  |             display: flex; | 
					
						
							|  |  |  |  |             height: 100vh; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         /* 左侧菜单栏 */ | 
					
						
							|  |  |  |  |         .sidebar { | 
					
						
							|  |  |  |  |             width: 210px; | 
					
						
							|  |  |  |  |             background-color: rgb(48, 65, 86); | 
					
						
							|  |  |  |  |             position: relative; | 
					
						
							|  |  |  |  |             overflow-y: auto; | 
					
						
							|  |  |  |  |             flex-shrink: 0; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .menu-list { | 
					
						
							|  |  |  |  |             list-style: none; | 
					
						
							|  |  |  |  |             padding: 0; | 
					
						
							|  |  |  |  |             margin: 0; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .menu-item { | 
					
						
							|  |  |  |  |             position: relative; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .menu-item-link { | 
					
						
							|  |  |  |  |             display: flex; | 
					
						
							|  |  |  |  |             align-items: center; | 
					
						
							|  |  |  |  |             padding: 15px 20px; | 
					
						
							|  |  |  |  |             color: rgba(255, 255, 255, 0.85); | 
					
						
							|  |  |  |  |             text-decoration: none; | 
					
						
							|  |  |  |  |             font-size: 14px; | 
					
						
							|  |  |  |  |             cursor: pointer; | 
					
						
							|  |  |  |  |             transition: all 0.2s; | 
					
						
							|  |  |  |  |             border: none; | 
					
						
							|  |  |  |  |             background: none; | 
					
						
							|  |  |  |  |             width: 100%; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .menu-item-link:hover { | 
					
						
							|  |  |  |  |             background-color: rgba(255, 255, 255, 0.1); | 
					
						
							|  |  |  |  |             color: #fff; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .menu-item-link.active { | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             background-color: #40a9ff; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             color: #fff; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .menu-icon { | 
					
						
							|  |  |  |  |             width: 16px; | 
					
						
							|  |  |  |  |             height: 16px; | 
					
						
							|  |  |  |  |             margin-right: 12px; | 
					
						
							|  |  |  |  |             flex-shrink: 0; | 
					
						
							|  |  |  |  |             display: inline-block; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .menu-icon svg { | 
					
						
							|  |  |  |  |             width: 100%; | 
					
						
							|  |  |  |  |             height: 100%; | 
					
						
							|  |  |  |  |             fill: rgba(255, 255, 255, 0.7); | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .menu-text { | 
					
						
							|  |  |  |  |             flex: 1; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .menu-arrow { | 
					
						
							|  |  |  |  |             width: 12px; | 
					
						
							|  |  |  |  |             height: 12px; | 
					
						
							|  |  |  |  |             transition: transform 0.2s; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .menu-arrow svg { | 
					
						
							|  |  |  |  |             width: 100%; | 
					
						
							|  |  |  |  |             height: 100%; | 
					
						
							|  |  |  |  |             fill: rgba(255, 255, 255, 0.6); | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .menu-item.expanded .menu-arrow { | 
					
						
							|  |  |  |  |             transform: rotate(180deg); | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         /* 子菜单 */ | 
					
						
							|  |  |  |  |         .submenu { | 
					
						
							|  |  |  |  |             background-color: rgba(0, 0, 0, 0.1); | 
					
						
							|  |  |  |  |             display: none; | 
					
						
							|  |  |  |  |             padding-left: 48px; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .menu-item.expanded .submenu { | 
					
						
							|  |  |  |  |             display: block; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .submenu-item { | 
					
						
							|  |  |  |  |             display: block; | 
					
						
							|  |  |  |  |             padding: 12px 20px; | 
					
						
							|  |  |  |  |             color: rgba(255, 255, 255, 0.7); | 
					
						
							|  |  |  |  |             text-decoration: none; | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             font-size: 14px; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             cursor: pointer; | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             transition: all 0.3s; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .submenu-item:hover { | 
					
						
							|  |  |  |  |             background-color: rgba(255, 255, 255, 0.1); | 
					
						
							|  |  |  |  |             color: #fff; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .submenu-item.active { | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             background-color: #40a9ff; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             color: #fff; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         /* 右侧主内容区 */ | 
					
						
							|  |  |  |  |         .main-content { | 
					
						
							|  |  |  |  |             flex: 1; | 
					
						
							|  |  |  |  |             display: flex; | 
					
						
							|  |  |  |  |             flex-direction: column; | 
					
						
							|  |  |  |  |             overflow: hidden; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         /* 顶部导航栏 */ | 
					
						
							|  |  |  |  |         .header { | 
					
						
							|  |  |  |  |             height: 64px; | 
					
						
							|  |  |  |  |             background: #fff; | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             border-bottom: 1px solid #f0f0f0; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             display: flex; | 
					
						
							|  |  |  |  |             align-items: center; | 
					
						
							|  |  |  |  |             justify-content: space-between; | 
					
						
							|  |  |  |  |             padding: 0 24px; | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .header-left { | 
					
						
							|  |  |  |  |             display: flex; | 
					
						
							|  |  |  |  |             align-items: center; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .menu-trigger { | 
					
						
							|  |  |  |  |             width: 20px; | 
					
						
							|  |  |  |  |             height: 20px; | 
					
						
							|  |  |  |  |             cursor: pointer; | 
					
						
							|  |  |  |  |             margin-right: 16px; | 
					
						
							|  |  |  |  |             display: flex; | 
					
						
							|  |  |  |  |             flex-direction: column; | 
					
						
							|  |  |  |  |             justify-content: space-between; | 
					
						
							|  |  |  |  |             align-items: center; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .menu-trigger::before, | 
					
						
							|  |  |  |  |         .menu-trigger::after, | 
					
						
							|  |  |  |  |         .menu-trigger { | 
					
						
							|  |  |  |  |             content: ''; | 
					
						
							|  |  |  |  |             height: 2px; | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             background: #333; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             border-radius: 1px; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .menu-trigger::before, | 
					
						
							|  |  |  |  |         .menu-trigger::after { | 
					
						
							|  |  |  |  |             display: block; | 
					
						
							|  |  |  |  |             width: 100%; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .breadcrumb { | 
					
						
							|  |  |  |  |             display: flex; | 
					
						
							|  |  |  |  |             align-items: center; | 
					
						
							|  |  |  |  |             font-size: 14px; | 
					
						
							|  |  |  |  |             color: #666; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .breadcrumb-item { | 
					
						
							|  |  |  |  |             color: #666; | 
					
						
							|  |  |  |  |             text-decoration: none; | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             transition: all 0.3s; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .breadcrumb-item:hover { | 
					
						
							|  |  |  |  |             color: #1890ff; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .breadcrumb-separator { | 
					
						
							|  |  |  |  |             margin: 0 8px; | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             color: #ddd; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .header-right { | 
					
						
							|  |  |  |  |             display: flex; | 
					
						
							|  |  |  |  |             align-items: center; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .user-info { | 
					
						
							|  |  |  |  |             display: flex; | 
					
						
							|  |  |  |  |             align-items: center; | 
					
						
							|  |  |  |  |             padding: 8px 12px; | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             border-radius: 6px; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             cursor: pointer; | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             transition: all 0.3s; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .user-info:hover { | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             background-color: #fafafa; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .user-avatar { | 
					
						
							|  |  |  |  |             width: 24px; | 
					
						
							|  |  |  |  |             height: 24px; | 
					
						
							|  |  |  |  |             background: #1890ff; | 
					
						
							|  |  |  |  |             border-radius: 50%; | 
					
						
							|  |  |  |  |             margin-right: 8px; | 
					
						
							|  |  |  |  |             display: flex; | 
					
						
							|  |  |  |  |             align-items: center; | 
					
						
							|  |  |  |  |             justify-content: center; | 
					
						
							|  |  |  |  |             color: #fff; | 
					
						
							|  |  |  |  |             font-size: 12px; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         /* 标签页区域 */ | 
					
						
							|  |  |  |  |         .tabs-container { | 
					
						
							|  |  |  |  |             height: 48px; | 
					
						
							|  |  |  |  |             background: #fff; | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             border-bottom: 1px solid #f0f0f0; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             display: flex; | 
					
						
							|  |  |  |  |             align-items: center; | 
					
						
							|  |  |  |  |             padding: 0 16px; | 
					
						
							|  |  |  |  |             overflow-x: auto; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .tab-item { | 
					
						
							|  |  |  |  |             display: flex; | 
					
						
							|  |  |  |  |             align-items: center; | 
					
						
							|  |  |  |  |             padding: 8px 16px; | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             background: #fafafa; | 
					
						
							|  |  |  |  |             border: 1px solid #ddd; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             border-radius: 4px 4px 0 0; | 
					
						
							|  |  |  |  |             margin-right: 2px; | 
					
						
							|  |  |  |  |             cursor: pointer; | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             font-size: 14px; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             white-space: nowrap; | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             transition: all 0.3s; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             position: relative; | 
					
						
							|  |  |  |  |             min-width: 120px; | 
					
						
							|  |  |  |  |             justify-content: space-between; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .tab-item.active { | 
					
						
							|  |  |  |  |             background: #fff; | 
					
						
							|  |  |  |  |             border-bottom-color: #fff; | 
					
						
							|  |  |  |  |             z-index: 1; | 
					
						
							|  |  |  |  |             margin-bottom: -1px; | 
					
						
							| 
									
										
										
										
											2025-10-20 17:40:00 +00:00
										 |  |  |  |             color: #1890ff; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .tab-item:hover { | 
					
						
							|  |  |  |  |             background: #e6f7ff; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .tab-title { | 
					
						
							|  |  |  |  |             flex: 1; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .tab-close { | 
					
						
							|  |  |  |  |             width: 16px; | 
					
						
							|  |  |  |  |             height: 16px; | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             background: #ddd; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             border-radius: 50%; | 
					
						
							|  |  |  |  |             margin-left: 8px; | 
					
						
							|  |  |  |  |             cursor: pointer; | 
					
						
							|  |  |  |  |             display: flex; | 
					
						
							|  |  |  |  |             align-items: center; | 
					
						
							|  |  |  |  |             justify-content: center; | 
					
						
							|  |  |  |  |             font-size: 12px; | 
					
						
							|  |  |  |  |             color: #fff; | 
					
						
							|  |  |  |  |             opacity: 0.7; | 
					
						
							| 
									
										
										
										
											2025-10-20 16:47:26 +00:00
										 |  |  |  |             transition: all 0.3s; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .tab-close:hover { | 
					
						
							|  |  |  |  |             background: #ff4d4f; | 
					
						
							|  |  |  |  |             opacity: 1; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .tab-item:first-child .tab-close { | 
					
						
							|  |  |  |  |             display: none; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         /* 内容区域 */ | 
					
						
							|  |  |  |  |         .content-area { | 
					
						
							|  |  |  |  |             flex: 1; | 
					
						
							| 
									
										
										
										
											2025-10-20 17:55:04 +00:00
										 |  |  |  |             overflow: hidden; | 
					
						
							|  |  |  |  |             display: flex; | 
					
						
							|  |  |  |  |             flex-direction: column; | 
					
						
							|  |  |  |  |             position: relative; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2025-10-20 17:55:04 +00:00
										 |  |  |  |         .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; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         /* 响应式设计 */ | 
					
						
							|  |  |  |  |         @media (max-width: 768px) { | 
					
						
							|  |  |  |  |             .sidebar { | 
					
						
							|  |  |  |  |                 position: fixed; | 
					
						
							|  |  |  |  |                 left: -210px; | 
					
						
							|  |  |  |  |                 top: 0; | 
					
						
							|  |  |  |  |                 height: 100vh; | 
					
						
							|  |  |  |  |                 z-index: 1000; | 
					
						
							|  |  |  |  |                 transition: left 0.3s; | 
					
						
							|  |  |  |  |             } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |             .sidebar.open { | 
					
						
							|  |  |  |  |                 left: 0; | 
					
						
							|  |  |  |  |             } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |             .main-content { | 
					
						
							|  |  |  |  |                 margin-left: 0; | 
					
						
							|  |  |  |  |             } | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         /* 滚动条样式 */ | 
					
						
							|  |  |  |  |         .sidebar::-webkit-scrollbar { | 
					
						
							|  |  |  |  |             width: 6px; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .sidebar::-webkit-scrollbar-track { | 
					
						
							|  |  |  |  |             background: rgba(255, 255, 255, 0.1); | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .sidebar::-webkit-scrollbar-thumb { | 
					
						
							|  |  |  |  |             background: rgba(255, 255, 255, 0.3); | 
					
						
							|  |  |  |  |             border-radius: 3px; | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         .sidebar::-webkit-scrollbar-thumb:hover { | 
					
						
							|  |  |  |  |             background: rgba(255, 255, 255, 0.5); | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  |     </style> | 
					
						
							|  |  |  |  | </head> | 
					
						
							|  |  |  |  | <body> | 
					
						
							|  |  |  |  |     <div class="admin-layout"> | 
					
						
							|  |  |  |  |         <!-- 左侧菜单 --> | 
					
						
							|  |  |  |  |         <aside class="sidebar"> | 
					
						
							|  |  |  |  |             <nav role="navigation"> | 
					
						
							|  |  |  |  |                 <ul class="menu-list"> | 
					
						
							| 
									
										
										
										
											2025-09-07 10:03:05 +00:00
										 |  |  |  |                     <li class="menu-item"> | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |                         <button class="menu-item-link" onclick="toggleSubmenu(this)"> | 
					
						
							|  |  |  |  |                             <span class="menu-icon"> | 
					
						
							|  |  |  |  |                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"> | 
					
						
							|  |  |  |  |                                     <path fill="currentColor" d="M160 448a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32zm448 0a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32zM160 896a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32zm448 0a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32z"></path> | 
					
						
							|  |  |  |  |                                 </svg> | 
					
						
							|  |  |  |  |                             </span> | 
					
						
							|  |  |  |  |                             <span class="menu-text">权限管理</span> | 
					
						
							|  |  |  |  |                             <span class="menu-arrow"> | 
					
						
							|  |  |  |  |                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"> | 
					
						
							|  |  |  |  |                                     <path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path> | 
					
						
							|  |  |  |  |                                 </svg> | 
					
						
							|  |  |  |  |                             </span> | 
					
						
							|  |  |  |  |                         </button> | 
					
						
							|  |  |  |  |                         <div class="submenu"> | 
					
						
							| 
									
										
										
										
											2025-09-07 16:53:22 +00:00
										 |  |  |  |                             <a href="./权限管理/权限编辑.html" class="submenu-item" onclick="openTabWithIframe(this, '权限编辑')">权限编辑</a> | 
					
						
							| 
									
										
										
										
											2025-09-07 17:13:05 +00:00
										 |  |  |  |                             <a href="./权限管理/市场经营者创建.html" class="submenu-item" onclick="openTabWithIframe(this, '市场经营者创建')">市场经营者创建</a> | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |                         </div> | 
					
						
							|  |  |  |  |                     </li> | 
					
						
							| 
									
										
										
										
											2025-10-20 17:40:00 +00:00
										 |  |  |  |                     <li class="menu-item"> | 
					
						
							|  |  |  |  |                         <button class="menu-item-link" onclick="toggleSubmenu(this)"> | 
					
						
							|  |  |  |  |                             <span class="menu-icon"> | 
					
						
							|  |  |  |  |                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"> | 
					
						
							|  |  |  |  |                                     <path fill="currentColor" d="M160 448a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32zm448 0a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32zM160 896a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32zm448 0a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32z"></path> | 
					
						
							|  |  |  |  |                                 </svg> | 
					
						
							|  |  |  |  |                             </span> | 
					
						
							|  |  |  |  |                             <span class="menu-text">菜市场管理</span> | 
					
						
							|  |  |  |  |                             <span class="menu-arrow"> | 
					
						
							|  |  |  |  |                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"> | 
					
						
							|  |  |  |  |                                     <path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path> | 
					
						
							|  |  |  |  |                                 </svg> | 
					
						
							|  |  |  |  |                             </span> | 
					
						
							|  |  |  |  |                         </button> | 
					
						
							|  |  |  |  |                         <div class="submenu"> | 
					
						
							|  |  |  |  |                             <a href="./菜市场管理/菜市场列表.html" class="submenu-item" onclick="openTabWithIframe(this, '菜市场列表')">菜市场列表</a> | 
					
						
							|  |  |  |  |                         </div> | 
					
						
							|  |  |  |  |                     </li> | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |                 </ul> | 
					
						
							|  |  |  |  |             </nav> | 
					
						
							|  |  |  |  |         </aside> | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         <!-- 右侧主内容区 --> | 
					
						
							|  |  |  |  |         <main class="main-content"> | 
					
						
							|  |  |  |  |             <!-- 标签页区域 --> | 
					
						
							|  |  |  |  |             <div class="tabs-container"> | 
					
						
							|  |  |  |  |                 <div class="tab-item active" data-tab="home"> | 
					
						
							|  |  |  |  |                     <span class="tab-title">首页</span> | 
					
						
							|  |  |  |  |                 </div> | 
					
						
							|  |  |  |  |             </div> | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |             <!-- 内容区域 --> | 
					
						
							|  |  |  |  |             <div class="content-area"> | 
					
						
							| 
									
										
										
										
											2025-10-20 17:55:04 +00:00
										 |  |  |  |                 <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> | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |                 </div> | 
					
						
							|  |  |  |  |             </div> | 
					
						
							|  |  |  |  |         </main> | 
					
						
							|  |  |  |  |     </div> | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |     <script> | 
					
						
							|  |  |  |  |         // 切换子菜单展开状态 | 
					
						
							|  |  |  |  |         function toggleSubmenu(button) { | 
					
						
							|  |  |  |  |             const menuItem = button.parentElement; | 
					
						
							|  |  |  |  |             menuItem.classList.toggle('expanded'); | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         // 切换侧边栏显示/隐藏(移动端) | 
					
						
							|  |  |  |  |         function toggleSidebar() { | 
					
						
							|  |  |  |  |             const sidebar = document.querySelector('.sidebar'); | 
					
						
							|  |  |  |  |             sidebar.classList.toggle('open'); | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         // 打开标签页 | 
					
						
							|  |  |  |  |         function openTab(link, title) { | 
					
						
							|  |  |  |  |             const tabId = title.toLowerCase().replace(/\s+/g, '-'); | 
					
						
							|  |  |  |  |              | 
					
						
							|  |  |  |  |             // 检查标签页是否已存在 | 
					
						
							|  |  |  |  |             const existingTab = document.querySelector(`[data-tab="${tabId}"]`); | 
					
						
							|  |  |  |  |             if (existingTab) { | 
					
						
							|  |  |  |  |                 // 激活已存在的标签页 | 
					
						
							| 
									
										
										
										
											2025-09-07 10:03:05 +00:00
										 |  |  |  |                 setActiveTab(tabId, title); | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |                 return; | 
					
						
							|  |  |  |  |             } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |             // 创建新标签页 | 
					
						
							|  |  |  |  |             const tabsContainer = document.querySelector('.tabs-container'); | 
					
						
							|  |  |  |  |             const newTab = document.createElement('div'); | 
					
						
							|  |  |  |  |             newTab.className = 'tab-item'; | 
					
						
							|  |  |  |  |             newTab.setAttribute('data-tab', tabId); | 
					
						
							|  |  |  |  |             newTab.innerHTML = ` | 
					
						
							|  |  |  |  |                 <span class="tab-title">${title}</span> | 
					
						
							|  |  |  |  |                 <span class="tab-close" onclick="closeTab(this)">×</span> | 
					
						
							|  |  |  |  |             `; | 
					
						
							| 
									
										
										
										
											2025-09-07 10:03:05 +00:00
										 |  |  |  |             newTab.onclick = () => setActiveTab(tabId, title); | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             tabsContainer.appendChild(newTab); | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |             // 创建新内容区域 | 
					
						
							| 
									
										
										
										
											2025-10-20 17:55:04 +00:00
										 |  |  |  |             const contentArea = document.querySelector('.content-area'); | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             const newContent = document.createElement('div'); | 
					
						
							|  |  |  |  |             newContent.id = `tab-content-${tabId}`; | 
					
						
							|  |  |  |  |             newContent.className = 'tab-content'; | 
					
						
							|  |  |  |  |             newContent.style.display = 'none'; | 
					
						
							|  |  |  |  |             newContent.innerHTML = ` | 
					
						
							|  |  |  |  |                 <p>这里是${title}页面的内容...</p> | 
					
						
							|  |  |  |  |             `; | 
					
						
							|  |  |  |  |             contentArea.appendChild(newContent); | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |             // 激活新标签页 | 
					
						
							| 
									
										
										
										
											2025-09-07 10:03:05 +00:00
										 |  |  |  |             setActiveTab(tabId, title); | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2025-09-07 16:53:22 +00:00
										 |  |  |  |         // 通过iframe打开标签页 | 
					
						
							|  |  |  |  |         function openTabWithIframe(link, title) { | 
					
						
							|  |  |  |  |             const tabId = title.toLowerCase().replace(/\s+/g, '-'); | 
					
						
							|  |  |  |  |              | 
					
						
							|  |  |  |  |             // 检查标签页是否已存在 | 
					
						
							|  |  |  |  |             const existingTab = document.querySelector(`[data-tab="${tabId}"]`); | 
					
						
							|  |  |  |  |             if (existingTab) { | 
					
						
							|  |  |  |  |                 // 激活已存在的标签页 | 
					
						
							|  |  |  |  |                 setActiveTab(tabId, title); | 
					
						
							|  |  |  |  |                 return; | 
					
						
							|  |  |  |  |             } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |             // 创建新标签页 | 
					
						
							|  |  |  |  |             const tabsContainer = document.querySelector('.tabs-container'); | 
					
						
							|  |  |  |  |             const newTab = document.createElement('div'); | 
					
						
							|  |  |  |  |             newTab.className = 'tab-item'; | 
					
						
							|  |  |  |  |             newTab.setAttribute('data-tab', tabId); | 
					
						
							|  |  |  |  |             newTab.innerHTML = ` | 
					
						
							|  |  |  |  |                 <span class="tab-title">${title}</span> | 
					
						
							|  |  |  |  |                 <span class="tab-close" onclick="closeTab(this)">×</span> | 
					
						
							|  |  |  |  |             `; | 
					
						
							|  |  |  |  |             newTab.onclick = () => setActiveTab(tabId, title); | 
					
						
							|  |  |  |  |             tabsContainer.appendChild(newTab); | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |             // 创建新内容区域,使用iframe嵌入页面 | 
					
						
							| 
									
										
										
										
											2025-10-20 17:55:04 +00:00
										 |  |  |  |             const contentArea = document.querySelector('.content-area'); | 
					
						
							| 
									
										
										
										
											2025-09-07 16:53:22 +00:00
										 |  |  |  |             const newContent = document.createElement('div'); | 
					
						
							|  |  |  |  |             newContent.id = `tab-content-${tabId}`; | 
					
						
							|  |  |  |  |             newContent.className = 'tab-content'; | 
					
						
							|  |  |  |  |             newContent.style.display = 'none'; | 
					
						
							|  |  |  |  |             newContent.innerHTML = ` | 
					
						
							| 
									
										
										
										
											2025-10-20 17:55:04 +00:00
										 |  |  |  |                 <iframe src="${link.href}"></iframe> | 
					
						
							| 
									
										
										
										
											2025-09-07 16:53:22 +00:00
										 |  |  |  |             `; | 
					
						
							|  |  |  |  |             contentArea.appendChild(newContent); | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |             // 激活新标签页 | 
					
						
							|  |  |  |  |             setActiveTab(tabId, title); | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |         // 设置活动标签页 | 
					
						
							| 
									
										
										
										
											2025-09-07 10:03:05 +00:00
										 |  |  |  |         function setActiveTab(tabId, title) { | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             // 移除所有标签页的活动状态 | 
					
						
							|  |  |  |  |             document.querySelectorAll('.tab-item').forEach(tab => { | 
					
						
							|  |  |  |  |                 tab.classList.remove('active'); | 
					
						
							|  |  |  |  |             }); | 
					
						
							|  |  |  |  |             document.querySelectorAll('.tab-content').forEach(content => { | 
					
						
							|  |  |  |  |                 content.style.display = 'none'; | 
					
						
							|  |  |  |  |             }); | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |             // 激活指定标签页 | 
					
						
							|  |  |  |  |             const activeTab = document.querySelector(`[data-tab="${tabId}"]`); | 
					
						
							|  |  |  |  |             const activeContent = document.querySelector(`#tab-content-${tabId}`); | 
					
						
							| 
									
										
										
										
											2025-10-20 17:55:04 +00:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             if (activeTab && activeContent) { | 
					
						
							|  |  |  |  |                 activeTab.classList.add('active'); | 
					
						
							|  |  |  |  |                 activeContent.style.display = 'block'; | 
					
						
							| 
									
										
										
										
											2025-10-20 17:55:04 +00:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2025-09-07 17:13:05 +00:00
										 |  |  |  |                 // 不更新面包屑导航中的标题 | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             } | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         // 关闭标签页 | 
					
						
							|  |  |  |  |         function closeTab(closeBtn) { | 
					
						
							|  |  |  |  |             const tab = closeBtn.parentElement; | 
					
						
							|  |  |  |  |             const tabId = tab.getAttribute('data-tab'); | 
					
						
							|  |  |  |  |              | 
					
						
							|  |  |  |  |             // 不能关闭首页标签 | 
					
						
							|  |  |  |  |             if (tabId === 'home') { | 
					
						
							|  |  |  |  |                 return; | 
					
						
							|  |  |  |  |             } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |             const isActive = tab.classList.contains('active'); | 
					
						
							|  |  |  |  |              | 
					
						
							|  |  |  |  |             // 移除标签页和内容 | 
					
						
							|  |  |  |  |             tab.remove(); | 
					
						
							|  |  |  |  |             const content = document.querySelector(`#tab-content-${tabId}`); | 
					
						
							|  |  |  |  |             if (content) { | 
					
						
							|  |  |  |  |                 content.remove(); | 
					
						
							|  |  |  |  |             } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |             // 如果关闭的是活动标签页,则激活首页 | 
					
						
							|  |  |  |  |             if (isActive) { | 
					
						
							| 
									
										
										
										
											2025-09-07 10:03:05 +00:00
										 |  |  |  |                 setActiveTab('home', '首页'); | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             } | 
					
						
							|  |  |  |  |         } | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         // 标签页点击事件 | 
					
						
							|  |  |  |  |         document.querySelectorAll('.tab-item').forEach(tab => { | 
					
						
							|  |  |  |  |             tab.onclick = () => { | 
					
						
							|  |  |  |  |                 const tabId = tab.getAttribute('data-tab'); | 
					
						
							| 
									
										
										
										
											2025-09-07 10:03:05 +00:00
										 |  |  |  |                 // 获取标签标题用于更新面包屑 | 
					
						
							|  |  |  |  |                 const title = tab.querySelector('.tab-title').textContent; | 
					
						
							|  |  |  |  |                 setActiveTab(tabId, title); | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             }; | 
					
						
							|  |  |  |  |         }); | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2025-09-07 10:03:05 +00:00
										 |  |  |  |         // 更新面包屑导航 | 
					
						
							|  |  |  |  |         function updateBreadcrumb(title) { | 
					
						
							| 
									
										
										
										
											2025-09-07 17:13:05 +00:00
										 |  |  |  |             // 不更新面包屑导航中的标题 | 
					
						
							|  |  |  |  |             return; | 
					
						
							| 
									
										
										
										
											2025-09-07 10:03:05 +00:00
										 |  |  |  |         } | 
					
						
							| 
									
										
										
										
											2025-09-07 17:13:05 +00:00
										 |  |  |  |          | 
					
						
							|  |  |  |  |         // 重写标签页点击事件处理函数,以支持iframe标签页的面包屑更新 | 
					
						
							|  |  |  |  |         document.querySelectorAll('.tab-item').forEach(tab => { | 
					
						
							|  |  |  |  |             tab.onclick = () => { | 
					
						
							|  |  |  |  |                 const tabId = tab.getAttribute('data-tab'); | 
					
						
							|  |  |  |  |                 // 获取标签标题用于更新面包屑 | 
					
						
							|  |  |  |  |                 const title = tab.querySelector('.tab-title').textContent; | 
					
						
							|  |  |  |  |                 setActiveTab(tabId, title); | 
					
						
							|  |  |  |  |             }; | 
					
						
							|  |  |  |  |         }); | 
					
						
							| 
									
										
										
										
											2025-09-07 10:03:05 +00:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |         // 菜单项点击事件处理 | 
					
						
							|  |  |  |  |         document.querySelectorAll('.submenu-item').forEach(item => { | 
					
						
							|  |  |  |  |             item.addEventListener('click', function(e) { | 
					
						
							| 
									
										
										
										
											2025-09-07 16:53:22 +00:00
										 |  |  |  |                 // 如果有onclick属性,阻止默认行为并执行onclick | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |                 if (this.onclick) { | 
					
						
							| 
									
										
										
										
											2025-09-07 16:53:22 +00:00
										 |  |  |  |                     e.preventDefault(); | 
					
						
							|  |  |  |  |                      | 
					
						
							|  |  |  |  |                     // 移除其他菜单项的激活状态 | 
					
						
							|  |  |  |  |                     document.querySelectorAll('.submenu-item.active').forEach(activeItem => { | 
					
						
							|  |  |  |  |                         activeItem.classList.remove('active'); | 
					
						
							|  |  |  |  |                     }); | 
					
						
							|  |  |  |  |                      | 
					
						
							|  |  |  |  |                     // 激活当前菜单项 | 
					
						
							|  |  |  |  |                     this.classList.add('active'); | 
					
						
							|  |  |  |  |                      | 
					
						
							| 
									
										
										
										
											2025-09-07 10:03:05 +00:00
										 |  |  |  |                     const title = this.textContent; | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |                     this.onclick.call(this); | 
					
						
							| 
									
										
										
										
											2025-09-07 17:13:05 +00:00
										 |  |  |  |                     // 不更新面包屑导航中的标题 | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |                 } | 
					
						
							| 
									
										
										
										
											2025-09-07 16:53:22 +00:00
										 |  |  |  |                 // 如果没有onclick属性,允许默认行为(链接跳转) | 
					
						
							| 
									
										
										
										
											2025-09-07 08:05:10 +00:00
										 |  |  |  |             }); | 
					
						
							|  |  |  |  |         }); | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         // 响应式处理 | 
					
						
							|  |  |  |  |         window.addEventListener('resize', function() { | 
					
						
							|  |  |  |  |             if (window.innerWidth > 768) { | 
					
						
							|  |  |  |  |                 document.querySelector('.sidebar').classList.remove('open'); | 
					
						
							|  |  |  |  |             } | 
					
						
							|  |  |  |  |         }); | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |         // 点击外部区域关闭侧边栏(移动端) | 
					
						
							|  |  |  |  |         document.addEventListener('click', function(e) { | 
					
						
							|  |  |  |  |             const sidebar = document.querySelector('.sidebar'); | 
					
						
							|  |  |  |  |             const menuTrigger = document.querySelector('.menu-trigger'); | 
					
						
							|  |  |  |  |              | 
					
						
							|  |  |  |  |             if (window.innerWidth <= 768 &&  | 
					
						
							|  |  |  |  |                 sidebar.classList.contains('open') &&  | 
					
						
							|  |  |  |  |                 !sidebar.contains(e.target) &&  | 
					
						
							|  |  |  |  |                 !menuTrigger.contains(e.target)) { | 
					
						
							|  |  |  |  |                 sidebar.classList.remove('open'); | 
					
						
							|  |  |  |  |             } | 
					
						
							|  |  |  |  |         }); | 
					
						
							|  |  |  |  |     </script> | 
					
						
							|  |  |  |  | </body> | 
					
						
							|  |  |  |  | </html> |