refactor: convert legacy color classes to tailwind syntax

Replace all custom `bg-*` utility classes across Vue components with Tailwind's arbitrary hex color notation (e.g. `bg-[#f7f7f7]`). Remove redundant hardcoded background color definitions from src/static/scss/background.scss, clean up template formatting, and update gradient button styles to use direct hex values.
This commit is contained in:
duanshuwen
2026-07-24 15:56:35 +08:00
parent d3d15b1a19
commit aa0203819c
27 changed files with 225 additions and 527 deletions

View File

@@ -1,75 +1,4 @@
// 背景颜色
.bg-white {
background-color: #fff;
}
.bg-gray {
background-color: #f5f5f5;
}
.bg-F7F7F7 {
background-color: #f7f7f7;
}
.bg-17294E {
background-color: #17294e;
}
.bg-E5E8EE {
background-color: #e5e8ee;
}
.bg-F5F7FA {
background-color: #f5f7fa;
}
.bg-F2F5F8 {
background-color: #f2f5f8;
}
.bg-F8FAFC {
background-color: #f8fafc;
}
.bg-F1F5F9 {
background-color: #f1f5f9;
}
.bg-ECFDF5 {
background-color: #ecfdf5;
}
.bg-FFFBEB {
background-color: #fffbeb;
}
.bg-EFF6FF {
background-color: #eff6ff;
}
.bg-F5F3FF {
background-color: #f5f3ff;
}
.bg-FFF1F2 {
background-color: #fff1f2;
}
.bg-CCFBF1 {
background-color: #ccfbf1;
}
.bg-0F172A {
background-color: #0f172a;
}
.bg-0F766E {
background-color: #0f766e;
}
.bg-FF3D60 {
background-color: #ff3d60;
}
.bg-theme-color-500 {
background-color: $theme-color-500;
@@ -84,18 +13,14 @@
}
.bg-liner {
background: linear-gradient(205deg, $theme-color-100 0%, rgba(138, 227, 252, 0) 20%),
background:
linear-gradient(205deg, $theme-color-100 0%, rgba(138, 227, 252, 0) 20%),
linear-gradient(155deg, #fef7e1 0%, rgba(254, 247, 225, 0) 20%),
radial-gradient(48% 48% at 61% 118%,
radial-gradient(
48% 48% at 61% 118%,
#ffffff 0%,
rgba(255, 255, 255, 0) 100%),
linear-gradient(180deg, rgba(238, 248, 255, 0) 0%, $theme-color-50 50%), $theme-color-50;
}
.bg-button {
background: linear-gradient(90deg, $theme-color-500 0%, #4de4ff 100%);
}
.bg-transparent {
background-color: transparent;
rgba(255, 255, 255, 0) 100%
),
linear-gradient(180deg, rgba(238, 248, 255, 0) 0%, $theme-color-50 50%),
$theme-color-50;
}