feat:修改网站标题，页面头部使用主题色

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>前端项目模板 Vite + Vue + TS</title>
+    <title>校园闲置物品共享平台</title>
   </head>
   <body>
     <div id="app"></div>

src/layout/UserLayout.vue

@@ -35,8 +35,8 @@
             </el-dropdown>
           </template>
           <template v-else>
-            <el-button type="primary" size="small" @click="router.push('/login')">登录</el-button>
-            <el-button size="small" @click="router.push('/register')">注册</el-button>
+            <el-button plain size="small" @click="router.push('/login')" class="header-btn">登录</el-button>
+            <el-button plain size="small" @click="router.push('/register')" class="header-btn">注册</el-button>
           </template>
         </div>
       </el-header>
@@ -107,6 +107,8 @@ const logoutHandler = () => {
   align-items: center;
   justify-content: space-between;
   padding: 0 20px;
+  background-color: var(--el-color-primary);
+  color: #fff;
 }
 .header-left {
   display: flex;
@@ -121,12 +123,18 @@ const logoutHandler = () => {
 .title {
   margin: 0;
   font-size: 20px;
+  color: #fff;
 }
 .nav-menu {
   flex: 1;
   display: flex;
   justify-content: center;
   border-bottom: none;
+  --el-menu-bg-color: transparent;
+  --el-menu-text-color: rgba(255, 255, 255, 0.85);
+  --el-menu-hover-bg-color: var(--el-color-primary-dark-2);
+  --el-menu-active-color: #fff;
+  --el-menu-border-color: transparent;
 }
 .header-right {
   display: flex;
@@ -135,7 +143,7 @@ const logoutHandler = () => {
 }
 .username {
   font-size: 14px;
-  color: #606266;
+  color: #fff;
 }
 .user-btn {
   display: flex;
@@ -145,11 +153,21 @@ const logoutHandler = () => {
   transition: color 0.2s;
 }
 .user-btn:hover {
-  color: #143694;
+  color: rgba(255, 255, 255, 0.8);
 }
 .user-avatar {
   font-size: 20px;
-  color: #143694;
+  color: #fff;
+}
+.header-btn {
+  --el-button-text-color: #fff;
+  --el-button-border-color: rgba(255, 255, 255, 0.7);
+  --el-button-bg-color: transparent;
+}
+.header-btn:hover {
+  --el-button-text-color: var(--el-color-primary);
+  --el-button-bg-color: #fff;
+  --el-button-border-color: #fff;
 }
 .mobile-footer {
   display: none;

src/store/meta.ts

@@ -3,7 +3,7 @@ import {ref} from "vue";
 // 网站配置元数据
 export const useMetaStore = defineStore("meta",()=>{
     //网站标题
-    const title = ref('标题');
+    const title = ref('校园闲置物品共享平台');
     //网站logo
     const logo = ref('/logo.svg');
     //后端地址