renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 项目列表、统一4种状态color色值

Browse Source
This commit is contained in:
rd
2025-07-23 11:32:37 +08:00
parent db00888ca9
commit 9ffe5be94e
8 changed files with 321 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/styles/components/button.scss
View File

@ -1,5 +1,3 @@
$disabled-ele: '.arco-btn-disabled';
.arco-btn {
border-radius: 2px;
border: 1px solid #d7d7d9 !important;
@ -22,32 +20,114 @@ $disabled-ele: '.arco-btn-disabled';
}
.arco-btn-primary {
background-color: #6d4cfe !important;
background-color: $color-primary !important;
border: none !important;
color: #fff !important;
&.arco-btn-disabled {
color: #fff !important;
background-color: #c5b7ff !important;
background-color: $color-primary-3 !important;
}
&:not(.arco-btn-disabled) {
&:hover {
color: #fff !important;
background-color: #8a70fe !important;
background-color: $color-primary-5 !important;
}
}
//success
&.arco-btn-status-success {
background-color: $color-success !important;
&.arco-btn-disabled {
background-color: $color-success-3 !important;
}
&:not(.arco-btn-disabled) {
&:hover {
background-color: $color-success-5 !important;
}
}
}
// danger
&.arco-btn-status-danger {
background-color: $color-error !important;
&.arco-btn-disabled {
background-color: $color-error-3 !important;
}
&:not(.arco-btn-disabled) {
&:hover {
background-color: $color-error-5 !important;
}
}
}
// warning
&.arco-btn-status-warning {
background-color: $color-warning !important;
&.arco-btn-disabled {
background-color: $color-warning-3 !important;
}
&:not(.arco-btn-disabled) {
&:hover {
background-color: $color-warning-5 !important;
}
}
}
}
.arco-btn-outline {
border: 1px solid #6d4cfe !important;
color: #6d4cfe !important;
border: 1px solid $color-primary !important;
color: $color-primary !important;
&.arco-btn-disabled {
border-color: #c5b7ff !important;
color: #c5b7ff !important;
border-color: $color-primary-3 !important;
color: $color-primary-3 !important;
}
&:not(.arco-btn-disabled) {
&:hover {
border-color: #8a70fe !important;
color: #8a70fe !important;
border-color: $color-primary-5 !important;
color: $color-primary-5 !important;
}
}
&.arco-btn-status-success {
border: 1px solid $color-success !important;
color: $color-success !important;
&.arco-btn-disabled {
border-color: $color-success-3 !important;
color: $color-success-3 !important;
}
&:not(.arco-btn-disabled) {
&:hover {
border-color: $color-success-5 !important;
color: $color-success-5 !important;
}
}
}
&.arco-btn-status-danger {
border: 1px solid $color-error !important;
color: $color-error !important;
&.arco-btn-disabled {
border-color: $color-error-3 !important;
color: $color-error-3 !important;
}
&:not(.arco-btn-disabled) {
&:hover {
border-color: $color-error-5 !important;
color: $color-error-5 !important;
}
}
}
&.arco-btn-status-warning {
border: 1px solid $color-warning !important;
color: $color-warning !important;
&.arco-btn-disabled {
border-color: $color-warning-3 !important;
color: $color-warning-3 !important;
}
&:not(.arco-btn-disabled) {
&:hover {
border-color: $color-warning-5 !important;
color: $color-warning-5 !important;
}
}
}
}
@ -55,13 +135,49 @@ $disabled-ele: '.arco-btn-disabled';
.arco-btn-text {
background-color: transparent !important;
border: none !important;
color: #6d4cfe !important;
color: $color-primary !important;
&.arco-btn-disabled {
color: #c5b7ff !important;
color: $color-primary-2 !important;
}
&:not(.arco-btn-disabled) {
&:hover {
color: #8a70fe !important;
color: $color-primary-5 !important;
}
}
&.arco-btn-status-success {
color: $color-success !important;
&.arco-btn-disabled {
color: $color-success-2 !important;
}
&:not(.arco-btn-disabled) {
&:hover {
color: $color-success-5 !important;
}
}
}
&.arco-btn-status-danger {
color: $color-error !important;
&.arco-btn-disabled {
color: $color-error-2 !important;
}
&:not(.arco-btn-disabled) {
&:hover {
color: $color-error-5 !important;
}
}
}
&.arco-btn-status-warning {
color: $color-warning !important;
&.arco-btn-disabled {
color: $color-warning-2 !important;
}
&:not(.arco-btn-disabled) {
&:hover {
color: $color-warning-5 !important;
}
}
}
}

2
src/styles/lib/reset.scss
View File

@ -11,7 +11,7 @@ html,
body {
background: $color-background;
font-family: $font-family-regular;
font-size: $font-size-14;
font-size: 14px;
-webkit-print-color-adjust: exact;
}

42
src/styles/lib/variable.scss
View File

@ -12,4 +12,44 @@ $font-family-manrope-semiBold: 'Manrope-SemiBold';
$color-background: #f9f9f9;
$font-size-14: 14px;
$color-primary: #6d4cfe; // 常规
$color-primary-5: #8A70FE; // hover
$color-primary-7: #573DCB; // click
$color-primary-3: #A794FE; // disabled
$color-primary-2: #C5B7FF; // text disabled
$color-primary-1: #F0EDFF; // 浅色
$color-success: #25C883;
$color-success-5: #57CF9C;
$color-success-7: #1BAE71;
$color-success-3: #81DBB5;
$color-success-2: #ABE7CE;
$color-success-1: #EBF7F2;
$color-warning: #FFAE00;
$color-warning-5: #FFBE33;
$color-warning-7: #CC8B00;
$color-warning-3: #FFCF66;
$color-warning-2: #FFDF99;
$color-warning-1: #FFF7E5;
$color-error: #F64B31;
$color-error-5: #F86F5A;
$color-error-7: #C53C27;
$color-error-3: #FA9383;
$color-error-2: #FBB7AD;
$color-error-1: #FFE9E7;
$color-blue: #2A59F3;
$color-blue-5: #557AF6;
$color-blue-7: #2247C2;
$color-blue-3: #7F9CF8;
$color-blue-2: #AABDFA;
$color-blue-1: #E5ECFF;
$color-teal: #39C6E9;
$color-teal-5: #60D2ED;
$color-teal-7: #2E9EBA;
$color-teal-3: #88DDF2;
$color-teal-2: #B0E8F6;
$color-teal-1: #E1F9FF;