vars.scss 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. :root {
  2. --hj-font-sans: 'PingFang SC', 微软雅黑, helvetica, arial, sans-serif;
  3. --hj-primary: #0f67f8;
  4. --hj-primary-600: #1d6bff;
  5. --hj-primary-700: #0a52e6;
  6. --hj-primary-200: rgba(11, 92, 255, 18%);
  7. --hj-primary-soft: rgba(11, 92, 255, 10%);
  8. --hj-primary-gradient: linear-gradient(135deg, #0b5cff 0%, #67b2ff 100%);
  9. --hj-primary-gradient-soft: linear-gradient(
  10. 135deg,
  11. rgba(11, 92, 255, 14%),
  12. rgba(103, 178, 255, 26%)
  13. );
  14. --hj-bg: #fff;
  15. --hj-bg-soft: #f8fbff;
  16. --hj-bg-footer: #0b1220;
  17. --hj-text: #091221;
  18. --hj-text-2: #28292e;
  19. --hj-text-3: #475569;
  20. --hj-text-muted: #64748b;
  21. --hj-border: rgba(15, 23, 42, 8%);
  22. --hj-border-soft: rgba(15, 23, 42, 6%);
  23. --hj-radius-8: 8px;
  24. --hj-radius-12: 12px;
  25. --hj-radius-14: 14px;
  26. --hj-radius-16: 16px;
  27. --hj-radius-20: 20px;
  28. --hj-radius-22: 22px;
  29. --hj-shadow-1: 0 12px 30px rgba(11, 92, 255, 25%);
  30. --hj-shadow-2: 0 18px 45px rgba(2, 8, 23, 12%);
  31. --hj-shadow-3: 0 18px 35px rgba(2, 8, 23, 10%);
  32. --el-color-primary: var(--hj-primary);
  33. --el-color-primary-light-3: rgba(11, 92, 255, 65%);
  34. --el-color-primary-light-5: rgba(11, 92, 255, 48%);
  35. --el-color-primary-light-7: rgba(11, 92, 255, 32%);
  36. --el-color-primary-light-8: rgba(11, 92, 255, 20%);
  37. --el-color-primary-light-9: rgba(11, 92, 255, 12%);
  38. --el-color-primary-dark-2: var(--hj-primary-700);
  39. --el-border-radius-base: var(--hj-radius-8);
  40. --el-text-color-primary: var(--hj-text);
  41. --el-text-color-regular: var(--hj-text-2);
  42. --el-text-color-secondary: var(--hj-text-muted);
  43. --el-border-color: var(--hj-border);
  44. }
  45. // 响应式容器占位符
  46. %landing-container {
  47. width: 100%;
  48. margin: 0 auto;
  49. padding-left: 40px;
  50. padding-right: 40px;
  51. @media screen and (min-width: 768px) {
  52. padding-left: 240px;
  53. padding-right: 240px;
  54. }
  55. @media screen and (min-width: 1440px) {
  56. padding-left: calc((100vw - 1440px) / 2);
  57. padding-right: calc((100vw - 1440px) / 2);
  58. }
  59. @media screen and (min-width: 1920px) {
  60. padding-left: 240px;
  61. padding-right: 240px;
  62. }
  63. }