@use "sass:color";
|
|
/*
|
* 全局主题颜色定义
|
* 直接使用css变量而非scss变量方便动态修改
|
*
|
* 示例:动态修改主题色为红色
|
* import { useCssVar } from '@vueuse/core'
|
* const el = ref(null)
|
* const color = useCssVar('--color-primary', el)
|
* color.value = 'red'
|
*
|
* 简便写法 useCssVar('--color-primary', ref(null)).value = '64px'
|
*/
|
$--color-white: #ffffff !default;
|
$--color-primary: #2f4589 !default;
|
$--color-primary-sub-1: color.mix($--color-white, $--color-primary, 10%) !default;
|
$--color-primary-sub-2: color.mix($--color-white, $--color-primary, 20%) !default;
|
$--color-primary-sub-3: color.mix($--color-white, $--color-primary, 30%) !default;
|
$--color-primary-sub-4: color.mix($--color-white, $--color-primary, 40%) !default;
|
$--color-primary-sub-5: color.mix($--color-white, $--color-primary, 50%) !default;
|
$--color-primary-sub-6: color.mix($--color-white, $--color-primary, 60%) !default;
|
$--color-primary-sub-7: color.mix($--color-white, $--color-primary, 70%) !default;
|
$--color-primary-sub-8: color.mix($--color-white, $--color-primary, 80%) !default;
|
$--color-primary-sub-9: color.mix($--color-white, $--color-primary, 90%) !default;
|
|
$--border-default-color: #ebeef5;
|
:root {
|
--el-color-primary: #2f4589 !important;
|
--color-primary: #{$--color-primary}; // 主色
|
--color-basic-white: #ffffff;
|
--el-color-primary-light-3: rgb(47, 69, 137, 0.8) !important;
|
|
--el-border-color-lighter: #ebeff4 !important; //查看的表格边框色
|
--el-fill-color-light: #fcfdfd !important; //查看的表格文字背景色
|
/* 辅助色 */
|
--color-success: #67c23a; // Success
|
--color-warning: #e6a23c; // Warning
|
--color-danger: #f56c6c; // Danger
|
--color-info: #909399; // Info
|
--el-color-primary-dark-2:rgb(47, 69, 137, 0.8) !important;//按钮点击时的颜色
|
/* 无彩色 */
|
--color-text-primary: #303133; // 主要文本
|
--color-regular: #606266; // 普通文本
|
--color-secondary: #909399; // 次要文本
|
--color-placeholder: #c0c4cc; // 占位文本
|
|
/* 主色辅助色 */
|
|
--color-primary-sub-0: #2f4589;
|
--color-primary-sub-1: #{$--color-primary-sub-1};
|
--color-primary-sub-2: #{$--color-primary-sub-2};
|
--color-primary-sub-3: #{$--color-primary-sub-3};
|
--color-primary-sub-4: #{$--color-primary-sub-4};
|
--color-primary-sub-5: #{$--color-primary-sub-5};
|
--color-primary-sub-6: #{$--color-primary-sub-6};
|
--color-primary-sub-7: #{$--color-primary-sub-7};
|
--color-primary-sub-8: #{$--color-primary-sub-8};
|
--color-primary-sub-9: #{$--color-primary-sub-9};
|
|
/* 辅助色的辅助色 */
|
// Success
|
--color-success-sub-1: #e1f3d8;
|
--color-success-sub-2: #f0f9eb;
|
// Warning
|
--color-warning-sub-1: #faecd8;
|
--color-warning-sub-2: #fdf6ec;
|
// Danger
|
--color-danger-sub-1: #fde2e2;
|
--color-danger-sub-2: #fef0f0;
|
// Info
|
--color-info-sub-1: #e9e9eb;
|
--color-info-sub-2: #f4f4f5;
|
/* 无彩色的辅助色 */
|
--color-sub-1: #dcdfe6; // 辅助颜色1
|
--color-sub-2: #e4e7ed; // 辅助颜色2
|
--color-sub-3: #ebeef5; // 辅助颜色3
|
--color-sub-4: #f2f6fc; // 辅助颜色4
|
--color-bg-1: #fff;
|
--color-bg-2: #fcfcfc;
|
--color-bg-3: #f5f5f5;
|
--el-color-info: #3b3b3b !important;
|
/* 杂项 */
|
// 后台主体左右间距
|
--main-space: 16px;
|
// 表格样式
|
--el-border-color-lighter: #dbe5ea !important;
|
// check不可编辑的选中对号颜色
|
// --el-text-color-placeholder: #53555d !important;
|
}
|
|
.el-checkbox {
|
--el-checkbox-disabled-checked-icon-color: #53555d !important;
|
}
|
|
