chengfei-test-system/src/styles/variables.scss

/** 全局SCSS变量 */

:root {
  --menu-background: #304156;
  --menu-text: #bfcbd9;
  --menu-active-text: var(--el-menu-active-color);
  --menu-hover: #263445;
  --sidebar-logo-background: #2d3748;

  --hj-red-3: #ff4d4d;
  --hj-orange-3: #fa8c16;
  --hj-yellow-3: #fadb14;
  --hj-green-3: #a0d911;
  --hj-cyan-3: #00b96b;
  --hj-blue-3: #096dd9;
  --hj-purple-3: #531dab;
  --hj-white-3: #d9d9d9;


  --hj-red-2: #ff7a7a;
  --hj-orange-2: #faa31a;
  --hj-yellow-2: #ffe518;
  --hj-green-2: #b2e440;
  --hj-cyan-2: #00d87a;
  --hj-blue-2: #0a85d8;
  --hj-purple-2: #622ebc;

  --hj-red-1: #ffb2b2;
  --hj-orange-1: #fbad58;
  --hj-yellow-1: #fff168;
  --hj-green-1: #c8e677;
  --hj-cyan-1: #00ec9a;
  --hj-blue-1: #1098d8;
  --hj-purple-1: #7339b8;

  --hj-white-1: #ffffff;
  --hj-white-2: #f0f0f0;
  --hj-white-4: #696969;

  --hj-black-1: #1a1a1a;
  --hj-black-2: #303030;
  --hj-black-3: #404040;
  --hj-black-4:#505050;


  --hj-bg: #fff;
  --hj-bg1: #3b7cff;
  --hj-bg2: #F83C64;

  //字体颜色
  --fc-color-default: #000000;
  --fc-color-1: #00000090;
  --fc-color-2: #00000060;
  --fc-color-3: #AFB9D0;
  --fc-color-4: #A6ABB1;
  --fc-color-5: #333333;
  --fc-color-6: #666666;
  --fc-color-7: #3b7cff;
  --fc-color-8: #EDEDED;
  --fc-color-9: #202020;

  --gray-bg-1: #F1F3F5;

  --hj-fs-12: 12px;
  --hj-fs-14: 14px;
  --hj-fs-16: 16px;
  --hj-fs-18: 18px;
  --hj-fs-20: 20px;
  --hj-fs-22: 22px;
  --hj-fs-24: 24px;
  --hj-fs-26: 26px;
  --hj-fs-28: 28px;
  --hj-fs-30: 30px;
  --hj-fs-32: 32px;
  --hj-fs-34: 34px;
  --hj-fs-36: 36px;
  --hj-fs-38: 38px;

}



$menu-background: var(--menu-background); // 菜单背景色
$menu-text: var(--menu-text); // 菜单文字颜色
$menu-active-text: var(--menu-active-text); // 菜单激活文字颜色
$menu-hover: var(--menu-hover); // 菜单悬停背景色
$sidebar-logo-background: var(--sidebar-logo-background); // 侧边栏 Logo 背景色

$sidebar-width: 210px; // 侧边栏宽度
$sidebar-width-collapsed: 54px; // 侧边栏收缩宽度
$navbar-height: 50px; // 导航栏高度
$tags-view-height: 34px; // TagsView 高度

$main-header-height: 48px; // 主页面上面的header的高度
//二级页面上面的header的高度
$child-header-height: 116px;

$hj-bg: var(--hj-bg);
$hj-red-1: var(--hj-red-1);
$hj-orange-1: var(--hj-orange-1);
$hj-yellow-1: var(--hj-yellow-1);
$hj-green-1: var(--hj-green-1);
$hj-cyan-1: var(--hj-cyan-1);
$hj-blue-1: var(--hj-blue-1);
$hj-purple-1: var(--hj-purple-1);
$hj-white-1: var(--hj-white-1);
$hj-black-1: var(--hj-black-1);

$hj-red-2: var(--hj-red-2);
$hj-orange-2: var(--hj-orange-2);
$hj-yellow-2: var(--hj-yellow-2);
$hj-green-2: var(--hj-green-2);
$hj-cyan-2: var(--hj-cyan-2);
$hj-blue-2: var(--hj-blue-2);
$hj-purple-2: var(--hj-purple-2);
$hj-white-2: var(--hj-white-2);
$hj-black-2: var(--hj-black-2);

$hj-red-3: var(--hj-red-3);
$hj-orange-3: var(--hj-orange-3);
$hj-yellow-3: var(--hj-yellow-3);
$hj-green-3: var(--hj-green-3);
$hj-cyan-3: var(--hj-cyan-3);
$hj-blue-3: var(--hj-blue-3);
$hj-purple-3: var(--hj-purple-3);
$hj-white-3: var(--hj-white-3);
$hj-black-3: var(--hj-black-3);
$hj-black-4: var(--hj-black-4);

$hj-white-4: var(--hj-white-4);

//T:标题 FT:副标题 A:注解 B:正文 S:缩略显示 N：数字 尾号：大号到小号 1=>1++
$font-T1: (
  "size": 30px,
  "weight": 900,
  "line-height": 36px,
  "color": var(--fc-color-1),
);

$font-T2: (
  "size": 24px,
  "weight": 900,
  "line-height": 29px,
  "color": var(--fc-color-1),
);
$font-FT: (
  "size": 16px,
  "line-height": 19px,
  "color": var(--fc-color-2),
);
$font-A: (
  "size": 16px,
  "line-height": 19px,
  "color": var(--fc-color-default),
);
$font-B1: (
  "size": 16px,
  "weight": 500,
  "line-height": 19px,
  "color": var(--fc-color-default),
);
$font-B2: (
  "size": 16px,
  "weight": "bolder",
  "line-height": 19px,
  "color": var(--fc-color-default),
);
$font-S: (
  "size": 12px,
  "line-height": 15px,
  "color": var(--fc-color-default),
);
$font-N1: (
  "size": 70px,
  "line-height": 85px,
  "color": var(--fc-color-default),
);
$font-N2: (
  "size": 48px,
  "line-height": 58px,
  "color": var(--fc-color-default),
);
$font-N3: (
  "size": 38px,
  "line-height": 46px,
  "color": var(--fc-color-default),
);