Przeglądaj źródła

feat:修改网站主题色为#143694

yangyi 4 miesięcy temu
rodzic
commit
4f5c491359
6 zmienionych plików z 31 dodań i 25 usunięć
  1. 2 2
      src/layout/UserLayout.vue
  2. 1 0
      src/main.ts
  3. 5 0
      src/style.css
  4. 1 1
      src/view/Chat.vue
  5. 20 20
      src/view/Login.vue
  6. 2 2
      src/view/Register.vue

+ 2 - 2
src/layout/UserLayout.vue

@@ -145,11 +145,11 @@ const logoutHandler = () => {
   transition: color 0.2s;
 }
 .user-btn:hover {
-  color: #db2777;
+  color: #143694;
 }
 .user-avatar {
   font-size: 20px;
-  color: #be185d;
+  color: #143694;
 }
 .mobile-footer {
   display: none;

+ 1 - 0
src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import './style.css'
 import App from './App.vue'
 import router from "./router";
 import { createPinia } from 'pinia'

+ 5 - 0
src/style.css

@@ -1,3 +1,8 @@
+:root {
+  --el-color-primary: #143694;
+  --el-color-primary-dark-2: #0f2a73;
+}
+
 * {
   margin: 0;
   padding: 0;

+ 1 - 1
src/view/Chat.vue

@@ -154,7 +154,7 @@ onMounted(loadMessages)
   border-bottom-left-radius: 4px;
 }
 .message-row.own .message-bubble {
-  background: #409eff;
+  background: #143694;
   color: #fff;
   border-bottom-right-radius: 4px;
 }

+ 20 - 20
src/view/Login.vue

@@ -259,7 +259,7 @@ 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, #e8edf9 0%, #d4def5 50%, #c1cef0 100%);
   position: relative;
   overflow: hidden;
 }
@@ -279,7 +279,7 @@ const handleRegister = async () => {
 .circle-1 {
   width: 400px;
   height: 400px;
-  background: #db2777;
+  background: #143694;
   top: -100px;
   right: -100px;
   animation: float 20s ease-in-out infinite;
@@ -288,7 +288,7 @@ const handleRegister = async () => {
 .circle-2 {
   width: 300px;
   height: 300px;
-  background: #f472b6;
+  background: #5b7fd4;
   bottom: -80px;
   left: -80px;
   animation: float 15s ease-in-out infinite reverse;
@@ -297,7 +297,7 @@ const handleRegister = async () => {
 .circle-3 {
   width: 200px;
   height: 200px;
-  background: #ca8a04;
+  background: #2a4fa6;
   top: 50%;
   left: 60%;
   animation: float 18s ease-in-out infinite;
@@ -329,7 +329,7 @@ const handleRegister = async () => {
 
 .auth-card {
   border-radius: 16px;
-  border: 1px solid rgba(219, 39, 119, 0.1);
+  border: 1px solid rgba(20, 54, 148, 0.1);
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(10px);
   padding: 8px;
@@ -339,14 +339,14 @@ const handleRegister = async () => {
   position: absolute;
   top: 16px;
   left: 16px;
-  color: #be185d;
+  color: #143694;
   font-size: 14px;
   cursor: pointer;
   transition: color 0.2s;
 }
 
 .back-btn:hover {
-  color: #db2777;
+  color: #1a44b8;
 }
 
 .back-btn .el-icon {
@@ -362,14 +362,14 @@ const handleRegister = async () => {
   margin: 0 0 8px;
   font-size: 28px;
   font-weight: 600;
-  color: #831843;
+  color: #0f2a73;
   letter-spacing: 2px;
 }
 
 .auth-subtitle {
   margin: 0;
   font-size: 14px;
-  color: #be185d;
+  color: #143694;
 }
 
 .auth-tabs {
@@ -383,22 +383,22 @@ const handleRegister = async () => {
 :deep(.auth-tabs .el-tabs__item) {
   font-size: 16px;
   font-weight: 500;
-  color: #831843;
+  color: #0f2a73;
   transition: color 0.2s;
 }
 
 :deep(.auth-tabs .el-tabs__item.is-active) {
-  color: #db2777;
+  color: #143694;
 }
 
 :deep(.auth-tabs .el-tabs__active-bar) {
-  background-color: #db2777;
+  background-color: #143694;
   height: 3px;
   border-radius: 3px;
 }
 
 :deep(.auth-tabs .el-tabs__nav-wrap::after) {
-  background-color: rgba(219, 39, 119, 0.15);
+  background-color: rgba(20, 54, 148, 0.15);
   height: 1px;
 }
 
@@ -409,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 rgba(20, 54, 148, 0.15) 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 rgba(20, 54, 148, 0.3) inset;
 }
 
 :deep(.el-input__wrapper.is-focus) {
-  box-shadow: 0 0 0 1px #db2777 inset;
+  box-shadow: 0 0 0 1px #143694 inset;
 }
 
 :deep(.el-input__prefix) {
-  color: #db2777;
+  color: #143694;
   margin-right: 8px;
 }
 
@@ -432,15 +432,15 @@ const handleRegister = async () => {
   font-size: 16px;
   font-weight: 500;
   letter-spacing: 4px;
-  background: linear-gradient(135deg, #db2777 0%, #be185d 100%);
+  background: linear-gradient(135deg, #143694 0%, #1a44b8 100%);
   border: none;
   transition: all 0.2s;
 }
 
 .auth-submit:hover {
-  background: linear-gradient(135deg, #be185d 0%, #9d174d 100%);
+  background: linear-gradient(135deg, #0f2a73 0%, #143694 100%);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(219, 39, 119, 0.3);
+  box-shadow: 0 4px 12px rgba(20, 54, 148, 0.3);
 }
 
 .auth-submit:active {

+ 2 - 2
src/view/Register.vue

@@ -108,7 +108,7 @@ 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, #e8edf9 0%, #d4def5 50%, #c1cef0 100%);
 }
 .register-card {
   width: 480px;
@@ -118,6 +118,6 @@ const handleRegister = async () => {
   text-align: center;
   margin-bottom: 24px;
   font-size: 24px;
-  color: #831843;
+  color: #0f2a73;
 }
 </style>