variables.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. /**
  2. * @description 全局主题变量配置
  3. */
  4. //颜色配置
  5. $base-color-black: #222;
  6. $base-color-blue: #1890ff;
  7. $base-color-green: #13ce66;
  8. $base-color-white: #fff;
  9. $base-color-black: #515a6e;
  10. $base-color-yellow: #ffba00;
  11. $base-color-orange: #ff6700;
  12. $base-color-red: #ff4d4f;
  13. $base-color-grey: rgba(0, 0, 0, 0.65);
  14. $base-color-background: #f6f8f9;
  15. $base-color-text-primary: #303133;
  16. $base-color-text-regular: #606266;
  17. $base-color-text-secondary: #909399;
  18. $base-color-text-placeholder: #c0c4cc;
  19. $base-border-color-base: #dcdfe6;
  20. $base-border-color-light: #e4e7ed;
  21. $base-border-color-lighter: #ebeef5;
  22. $base-border-color-extra-light: #f2f6fc;
  23. $base-background-color-base: #f5f7fa;
  24. //默认层级
  25. $base-z-index: 1999;
  26. //分栏最左侧菜单背景色
  27. $base-column-first-menu-background: linear-gradient(to right, #282c34, #000);
  28. //分栏菜单背景色
  29. $base-column-second-menu-background: #fff;
  30. //分栏菜单选中背景色
  31. $base-column-second-menu-background-active: rgba(#1890ff, 0.1);
  32. //横向、纵向菜单背景色
  33. $base-menu-background: #282c34;
  34. //菜单文字颜色
  35. $base-menu-color: hsla(0, 0%, 100%, 0.95);
  36. //菜单选中文字颜色
  37. $base-menu-color-active: hsla(0, 0%, 100%, 0.95);
  38. //菜单选中背景色
  39. $base-menu-background-active: $base-color-blue;
  40. //标题颜色
  41. $base-title-color: #fff;
  42. //字体大小配置
  43. $base-font-size-small: 12px;
  44. $base-font-size-default: 14px;
  45. $base-font-size-big: 16px;
  46. $base-font-size-bigger: 18px;
  47. $base-font-size-max: 22px;
  48. //最大宽度
  49. $base-main-width: 1279px;
  50. //圆角
  51. $base-border-radius: 2.5px;
  52. //边框颜色
  53. $base-border-color: #dcdfe6;
  54. //输入框高度
  55. $base-input-height: 32px;
  56. //默认margin
  57. $base-margin: 20px;
  58. //默认padding
  59. $base-padding: 12px;
  60. //默认阴影
  61. $base-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  62. //横向top-bar、logo、一级菜单的高度
  63. $base-top-bar-height: 60px;
  64. //纵向、综合、分栏logo的高度
  65. $base-logo-height: 60px;
  66. //顶部nav-bar的高度
  67. $base-nav-height: 60px;
  68. //顶部标签页tabs-bar的高度
  69. $base-tabs-height: 50px;
  70. //顶部标签页tabs-bar中每一个item的高度
  71. $base-tag-item-height: 34px;
  72. //菜单li标签的高度
  73. $base-menu-item-height: 50px;
  74. //app-main的高度
  75. $base-keep-alive-height: calc(
  76. 100vh - #{$base-nav-height} - #{$base-padding} * 2 - 40px
  77. );
  78. //纵向左侧导航未折叠的宽度
  79. $base-left-menu-width: 266px;
  80. //纵向左侧导航未折叠右侧内容的宽度
  81. $base-right-content-width: calc(100% - #{$base-left-menu-width});
  82. //纵向左侧导航已折叠的宽度
  83. $base-left-menu-width-min: 64px;
  84. //纵向左侧导航已折叠右侧内容的宽度
  85. $base-right-content-width-min: calc(100% - #{$base-left-menu-width-min});
  86. //默认动画
  87. $base-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s,
  88. color 0.1s, font-size 0s;
  89. //默认动画长
  90. $base-transition-time: 0.3s;
  91. :export {
  92. // 菜单文字颜色变量导出
  93. menu-color: $base-menu-color;
  94. // 菜单选中文字颜色变量导出
  95. menu-color-active: $base-menu-color-active;
  96. // 菜单背景色变量导出
  97. menu-background: $base-menu-background;
  98. // 分栏菜单背景色变量导出
  99. column-second-menu-background: $base-column-second-menu-background;
  100. }