/* 基础布局样式 */ .app-container { display: flex; min-height: 100vh; background-color: #f5f7fa; } /* 导航栏样式 */ .app-nav { width: 240px; background-color: #2c3e50; color: white; padding: 20px 0; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); } .nav-header { padding: 0 20px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .nav-header h2 { margin: 0; font-size: 1.5rem; font-weight: 500; } /* 导航链接样式 */ .nav-links { list-style: none; padding: 0; margin: 0; } .nav-links li { margin: 5px 0; } .nav-links a { display: block; color: #ecf0f1; text-decoration: none; padding: 12px 20px; transition: all 0.3s ease; } .nav-links a:hover { background-color: rgba(255, 255, 255, 0.1); } .nav-links a.active { background-color: #3498db; color: white; } .nav-links a span { display: inline-block; } /* 主内容区样式 */ .app-content { flex: 1; padding: 20px; background-color: white; overflow-y: auto; }