var.css 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. html {
  2. --rgb: 7, 193, 96; /* 主题色rgb #07c160*/
  3. --color: rgb(var(--rgb)); /* 主题色 #07c160*/
  4. --color-lighter: rgb(var(--rgb), 0.12); /* 浅主题色 #e9f7ee */
  5. --color-sub: #90de45; /* 主题辅色 */
  6. --color-success: #07c160;
  7. --color-warning: #faad14;
  8. --color-danger: #eb5e12;
  9. --border-radius: 8px; /* 常规圆角 */
  10. --border-radius-small: 4px; /* 小圆角 */
  11. --border-radius-big: 16px; /* 大圆角 */
  12. --card-margin: 16px; /* 卡片间距 */
  13. --top-nav-heght: 64px; /* 顶部导航条高度 */
  14. --font-black: #1d2129; /* 通用字体黑色 */
  15. }
  16. /* 项目定制原子类 */
  17. .g-radius {
  18. border-radius: 8px;
  19. }
  20. .g-radius-small {
  21. border-radius: 16px;
  22. }
  23. .g-radius-big {
  24. border-radius: 16px;
  25. }
  26. .g-margin {
  27. margin: var(--card-margin);
  28. }
  29. .g-margin-t {
  30. margin-top: var(--card-margin);
  31. }
  32. .g-margin-r {
  33. margin-right: var(--card-margin);
  34. }
  35. .g-margin-b {
  36. margin-bottom: var(--card-margin);
  37. }
  38. .g-margin-l {
  39. margin-left: var(--card-margin);
  40. }
  41. .g-color {
  42. color: var(--color);
  43. }
  44. /* 渐变背景 */
  45. .g-bg-lg {
  46. background: linear-gradient(to left, var(--color) 0%, var(--color-sub) 100%);
  47. box-shadow: 0px 13px 16px 0px rgba(7, 168, 85, 0.2);
  48. }