main-layout.css 999 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. /* 基础布局样式 */
  2. .app-container {
  3. display: flex;
  4. min-height: 100vh;
  5. background-color: #f5f7fa;
  6. }
  7. /* 导航栏样式 */
  8. .app-nav {
  9. width: 240px;
  10. background-color: #2c3e50;
  11. color: white;
  12. padding: 20px 0;
  13. box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  14. }
  15. .nav-header {
  16. padding: 0 20px 20px;
  17. border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  18. }
  19. .nav-header h2 {
  20. margin: 0;
  21. font-size: 1.5rem;
  22. font-weight: 500;
  23. }
  24. /* 导航链接样式 */
  25. .nav-links {
  26. list-style: none;
  27. padding: 0;
  28. margin: 0;
  29. }
  30. .nav-links li {
  31. margin: 5px 0;
  32. }
  33. .nav-links a {
  34. display: block;
  35. color: #ecf0f1;
  36. text-decoration: none;
  37. padding: 12px 20px;
  38. transition: all 0.3s ease;
  39. }
  40. .nav-links a:hover {
  41. background-color: rgba(255, 255, 255, 0.1);
  42. }
  43. .nav-links a.active {
  44. background-color: #3498db;
  45. color: white;
  46. }
  47. .nav-links a span {
  48. display: inline-block;
  49. }
  50. /* 主内容区样式 */
  51. .app-content {
  52. flex: 1;
  53. padding: 20px;
  54. background-color: white;
  55. overflow-y: auto;
  56. }