Bladeren bron

style(theme): 全站主题色统一为 Element Plus 默认主题

- LoginView 移除粉色品牌色,改用 --el-color-primary 系列变量
- UserLayout/AdminLayout 导航与头像改用主色变量,分割线补 --el-border-color
- 各页面中性色硬编码统一替换为 --el-text-color-*、--el-fill-color-light
- 奖杯图标改用 --el-color-warning
yangyi 2 weken geleden
bovenliggende
commit
569c1e8176

+ 4 - 4
src/layout/AdminLayout.vue

@@ -98,7 +98,7 @@ const isCollapse = ref(false)
   justify-content: space-between;
   padding: 0 20px;
   margin-bottom: 10px;
-  border-bottom: 1px solid
+  border-bottom: 1px solid var(--el-border-color);
 }
 .header-left {
   display: flex;
@@ -121,7 +121,7 @@ const isCollapse = ref(false)
 }
 .username {
   font-size: 14px;
-  color: #606266;
+  color: var(--el-text-color-regular);
 }
 
 .user-btn {
@@ -133,12 +133,12 @@ const isCollapse = ref(false)
 }
 
 .user-btn:hover {
-  color: #db2777;
+  color: var(--el-color-primary);
 }
 
 .user-avatar {
   font-size: 20px;
-  color: #be185d;
+  color: var(--el-color-primary);
 }
 
 .menu{

+ 8 - 8
src/layout/UserLayout.vue

@@ -105,7 +105,7 @@ el-main{
   align-items: center;
   justify-content: space-between;
   padding: 0 20px;
-  border-bottom: 1px solid;
+  border-bottom: 1px solid var(--el-border-color);
 }
 .header-left {
   display: flex;
@@ -134,17 +134,17 @@ el-main{
   height: auto;
   padding: 2px 4px;
   font-size: 14px;
-  color: #606266;
+  color: var(--el-text-color-regular);
   text-decoration: none;
   border-bottom: 2px solid transparent;
   transition: color 0.2s, border-color 0.2s;
 }
 .nav-link:hover {
-  color: #db2777;
+  color: var(--el-color-primary);
 }
 .nav-link.active {
-  color: #db2777;
-  border-bottom-color: #db2777;
+  color: var(--el-color-primary);
+  border-bottom-color: var(--el-color-primary);
 }
 .header-right {
   display: flex;
@@ -153,7 +153,7 @@ el-main{
 }
 .username {
   font-size: 14px;
-  color: #606266;
+  color: var(--el-text-color-regular);
 }
 
 .user-btn {
@@ -165,11 +165,11 @@ el-main{
 }
 
 .user-btn:hover {
-  color: #db2777;
+  color: var(--el-color-primary);
 }
 
 .user-avatar {
   font-size: 20px;
-  color: #be185d;
+  color: var(--el-color-primary);
 }
 </style>

+ 23 - 21
src/view/LoginView.vue

@@ -254,7 +254,12 @@ const handleRegister = async () => {
   justify-content: center;
   align-items: center;
   min-height: 100vh;
-  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #fbcfe8 100%);
+  background: linear-gradient(
+    135deg,
+    var(--el-color-primary-light-9) 0%,
+    var(--el-color-primary-light-8) 50%,
+    var(--el-color-primary-light-7) 100%
+  );
   position: relative;
   overflow: hidden;
 }
@@ -274,7 +279,7 @@ const handleRegister = async () => {
 .circle-1 {
   width: 400px;
   height: 400px;
-  background: #db2777;
+  background: var(--el-color-primary);
   top: -100px;
   right: -100px;
   animation: float 20s ease-in-out infinite;
@@ -283,7 +288,7 @@ const handleRegister = async () => {
 .circle-2 {
   width: 300px;
   height: 300px;
-  background: #f472b6;
+  background: var(--el-color-primary-light-3);
   bottom: -80px;
   left: -80px;
   animation: float 15s ease-in-out infinite reverse;
@@ -292,7 +297,7 @@ const handleRegister = async () => {
 .circle-3 {
   width: 200px;
   height: 200px;
-  background: #ca8a04;
+  background: var(--el-color-warning);
   top: 50%;
   left: 60%;
   animation: float 18s ease-in-out infinite;
@@ -324,7 +329,7 @@ const handleRegister = async () => {
 
 .auth-card {
   border-radius: 16px;
-  border: 1px solid rgba(219, 39, 119, 0.1);
+  border: 1px solid color-mix(in srgb, var(--el-color-primary) 10%, transparent);
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(10px);
   padding: 8px;
@@ -334,14 +339,14 @@ const handleRegister = async () => {
   position: absolute;
   top: 16px;
   left: 16px;
-  color: #be185d;
+  color: var(--el-color-primary);
   font-size: 14px;
   cursor: pointer;
   transition: color 0.2s;
 }
 
 .back-btn:hover {
-  color: #db2777;
+  color: var(--el-color-primary-dark-2);
 }
 
 .back-btn .el-icon {
@@ -357,14 +362,14 @@ const handleRegister = async () => {
   margin: 0 0 8px;
   font-size: 28px;
   font-weight: 600;
-  color: #831843;
+  color: var(--el-text-color-primary);
   letter-spacing: 2px;
 }
 
 .auth-subtitle {
   margin: 0;
   font-size: 14px;
-  color: #be185d;
+  color: var(--el-text-color-secondary);
 }
 
 .auth-tabs {
@@ -378,22 +383,22 @@ const handleRegister = async () => {
 :deep(.auth-tabs .el-tabs__item) {
   font-size: 16px;
   font-weight: 500;
-  color: #831843;
+  color: var(--el-text-color-regular);
   transition: color 0.2s;
 }
 
 :deep(.auth-tabs .el-tabs__item.is-active) {
-  color: #db2777;
+  color: var(--el-color-primary);
 }
 
 :deep(.auth-tabs .el-tabs__active-bar) {
-  background-color: #db2777;
+  background-color: var(--el-color-primary);
   height: 3px;
   border-radius: 3px;
 }
 
 :deep(.auth-tabs .el-tabs__nav-wrap::after) {
-  background-color: rgba(219, 39, 119, 0.15);
+  background-color: color-mix(in srgb, var(--el-color-primary) 15%, transparent);
   height: 1px;
 }
 
@@ -404,20 +409,20 @@ const handleRegister = async () => {
 :deep(.el-input__wrapper) {
   border-radius: 10px;
   padding: 8px 12px;
-  box-shadow: 0 0 0 1px rgba(219, 39, 119, 0.15) inset;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--el-color-primary) 15%, transparent) inset;
   transition: box-shadow 0.2s;
 }
 
 :deep(.el-input__wrapper:hover) {
-  box-shadow: 0 0 0 1px rgba(219, 39, 119, 0.3) inset;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--el-color-primary) 30%, transparent) inset;
 }
 
 :deep(.el-input__wrapper.is-focus) {
-  box-shadow: 0 0 0 1px #db2777 inset;
+  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
 }
 
 :deep(.el-input__prefix) {
-  color: #db2777;
+  color: var(--el-color-primary);
   margin-right: 8px;
 }
 
@@ -427,15 +432,12 @@ const handleRegister = async () => {
   font-size: 16px;
   font-weight: 500;
   letter-spacing: 4px;
-  background: linear-gradient(135deg, #db2777 0%, #be185d 100%);
-  border: none;
   transition: all 0.2s;
 }
 
 .auth-submit:hover {
-  background: linear-gradient(135deg, #be185d 0%, #9d174d 100%);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(219, 39, 119, 0.3);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--el-color-primary) 30%, transparent);
 }
 
 .auth-submit:active {

+ 1 - 1
src/view/admin/ContestManageView.vue

@@ -694,7 +694,7 @@ onMounted(fetchData)
 
 .tip {
   font-size: 12px;
-  color: #909399;
+  color: var(--el-text-color-secondary);
   line-height: 1.4;
 }
 </style>

+ 1 - 1
src/view/admin/UserManageView.vue

@@ -416,7 +416,7 @@ fetchData()
 
 .tip {
   font-size: 12px;
-  color: #909399;
+  color: var(--el-text-color-secondary);
   line-height: 1.4;
 }
 </style>

+ 1 - 1
src/view/contest/ContestDetailView.vue

@@ -283,7 +283,7 @@ onMounted(fetchDetail)
   display: flex;
   align-items: center;
   gap: 12px;
-  color: #606266;
+  color: var(--el-text-color-regular);
 }
 
 .locked-icon {

+ 1 - 1
src/view/contest/ContestRankingView.vue

@@ -107,7 +107,7 @@ onMounted(() => {
 
 .trophy-icon {
   font-size: 22px;
-  color: #e6a23c;
+  color: var(--el-color-warning);
 }
 
 .title {

+ 3 - 3
src/view/problem/ProblemDetailView.vue

@@ -308,7 +308,7 @@ onMounted(() => {
 }
 
 .case-desc {
-  color: #606266;
+  color: var(--el-text-color-regular);
   font-size: 13px;
   margin-bottom: 6px;
 }
@@ -324,14 +324,14 @@ onMounted(() => {
 
 .case-label {
   font-size: 13px;
-  color: #909399;
+  color: var(--el-text-color-secondary);
   margin-bottom: 4px;
 }
 
 .case-pre {
   margin: 0;
   padding: 12px;
-  background: #f5f7fa;
+  background: var(--el-fill-color-light);
   border-radius: 6px;
   white-space: pre-wrap;
   word-break: break-word;

+ 1 - 1
src/view/submission/SubmissionListView.vue

@@ -148,7 +148,7 @@ onMounted(() => {
 .judge-detail {
   margin: 0;
   padding: 12px;
-  background: #f5f7fa;
+  background: var(--el-fill-color-light);
   border-radius: 6px;
   white-space: pre-wrap;
   word-break: break-word;