variables.scss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. // ==========================================
  2. // SCSS Variables - 变量系统
  3. // ==========================================
  4. /* ===== 主题色 ===== */
  5. $primary-color: #1e73be !default;
  6. $primary-dark: #155a8a !default;
  7. $primary-light: #3b82f6 !default;
  8. $primary-lighter: #60a5fa !default;
  9. /* ===== 渐变色 ===== */
  10. $primary-gradient: linear-gradient(135deg, #1e73be 0%, #3b82f6 100%) !default;
  11. $tech-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !default;
  12. $orange-gradient: linear-gradient(135deg, rgba(255, 140, 50, 0.08), rgba(255, 160, 80, 0.12), rgba(255, 140, 50, 0.08)) !default;
  13. $header-gradient: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !default;
  14. $footer-gradient: linear-gradient(135deg, #0f172a 0%, #1e3c72 50%, #2a5298 100%) !default;
  15. /* ===== 中性色 ===== */
  16. $text-primary: #1a1a1a !default;
  17. $text-regular: #555555 !default;
  18. $text-secondary: #4a4a4a !default;
  19. $text-tertiary: #666666 !default;
  20. $text-muted: #999999 !default;
  21. $text-light: #f5f5f5 !default;
  22. $border-color: #e0e0e0 !default;
  23. $bg-light: #fafbfc !default;
  24. $bg-lighter: #f0f2f5 !default;
  25. $bg-dark: #0f172a !default;
  26. /* ===== 功能色 ===== */
  27. $success-color: #67c23a !default;
  28. $warning-color: #e6a23c !default;
  29. $danger-color: #f56c6c !default;
  30. $info-color: #909399 !default;
  31. /* ===== 阴影 ===== */
  32. $shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08) !default;
  33. $shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12) !default;
  34. $shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15) !default;
  35. $glow-blue: 0 0 20px rgba(30, 115, 190, 0.3) !default;
  36. $glow-blue-lg: 0 0 40px rgba(30, 115, 190, 0.4) !default;
  37. $glow-orange: 0 0 20px rgba(255, 140, 50, 0.3) !default;
  38. /* ===== 圆角 ===== */
  39. $radius-sm: 8px !default;
  40. $radius-md: 12px !default;
  41. $radius-lg: 16px !default;
  42. $radius-xl: 20px !default;
  43. $radius-2xl: 24px !default;
  44. $radius-full: 9999px !default;
  45. /* ===== 过渡动画 ===== */
  46. $transition-fast: all 0.2s ease !default;
  47. $transition-base: all 0.3s ease !default;
  48. $transition-slow: all 0.4s ease !default;
  49. $transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !default;
  50. /* ===== 字体 ===== */
  51. $font-family-base: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif !default;
  52. $font-weight-light: 300 !default;
  53. $font-weight-regular: 400 !default;
  54. $font-weight-medium: 500 !default;
  55. $font-weight-semibold: 600 !default;
  56. $font-weight-bold: 700 !default;
  57. $font-size-xs: 12px !default;
  58. $font-size-sm: 14px !default;
  59. $font-size-base: 16px !default;
  60. $font-size-lg: 18px !default;
  61. $font-size-xl: 20px !default;
  62. $font-size-2xl: 24px !default;
  63. $font-size-3xl: 28px !default;
  64. $font-size-4xl: 32px !default;
  65. $font-size-5xl: 36px !default;
  66. $font-size-6xl: 42px !default;
  67. /* ===== 间距 ===== */
  68. $spacer-1: 10px !default;
  69. $spacer-2: 20px !default;
  70. $spacer-3: 30px !default;
  71. $spacer-4: 40px !default;
  72. $spacer-5: 50px !default;
  73. $spacer-6: 60px !default;
  74. $spacer-7: 70px !default;
  75. $spacer-8: 80px !default;
  76. $spacer-9: 90px !default;
  77. $spacer-10: 100px !default;
  78. /* ===== 布局 ===== */
  79. $header-height: 80px !default;
  80. $header-height-mobile: 70px !default;
  81. $container-max-width: 1200px !default;
  82. $container-padding: 20px !default;
  83. /* ===== 断点 ===== */
  84. $breakpoint-xs: 0 !default;
  85. $breakpoint-sm: 576px !default;
  86. $breakpoint-md: 768px !default;
  87. $breakpoint-lg: 992px !default;
  88. $breakpoint-xl: 1200px !default;
  89. $breakpoint-2xl: 1400px !default;
  90. /* ===== 断点映射 ===== */
  91. $breakpoints: (
  92. 'xs': $breakpoint-xs,
  93. 'sm': $breakpoint-sm,
  94. 'md': $breakpoint-md,
  95. 'lg': $breakpoint-lg,
  96. 'xl': $breakpoint-xl,
  97. '2xl': $breakpoint-2xl
  98. ) !default;
  99. /* ===== Z-index 层级 ===== */
  100. $z-index-base: 1 !default;
  101. $z-index-dropdown: 100 !default;
  102. $z-index-sticky: 1000 !default;
  103. $z-index-fixed: 1010 !default;
  104. $z-index-modal-backdrop: 1040 !default;
  105. $z-index-modal: 1050 !default;
  106. $z-index-popover: 1060 !default;
  107. $z-index-tooltip: 1070 !default;
  108. $z-index-toast: 3000 !default;