feat:新增个人中心部分样式 (#79)

CloudStriver · Feb 22, 2024 · 41b6c3e · 41b6c3e
1 parent 11530d8
commit 41b6c3e
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 4 deletions.
diff --git a/src/components/header.vue b/src/components/header.vue
@@ -38,7 +38,7 @@ import { getAllNotificationCount } from '@/utils/public'
 import Search from '@/components/search.vue'
 import Avatar from '@/components/avatar.vue'
 import Nav from '@/components/navigation.vue'
-import popup from '@/views/home/popup.vue'
+import popup from './popup.vue'
 
 const isLogin = ref(false)
 const isPopup = ref(false)

diff --git a/src/views/home/popup.vue → src/components/popup.vue b/src/views/home/popup.vue → src/components/popup.vue
@@ -1,5 +1,10 @@
 <template>
     <div class="main-box">
+        <router-link 
+            to="user/center"
+            class="center"
+            v-if="isLogin"
+        >个人中心</router-link>
         <router-link 
             to="/user"
             class="user"
@@ -27,7 +32,7 @@
 import { useStore } from '@/store/index'
 import { onMounted, ref } from 'vue'
 import { successMsg } from '@/utils/message';
-import { getUserDetail } from '../information/utils';
+import { getUserDetail } from '@/views/information/utils';
 import { judgeHasLogin } from '@/utils/judge';
 
 const store = useStore()
@@ -55,7 +60,8 @@ const logout = () => {
     flex-direction: column;
 
     .user,
-    .login {
+    .login,
+    .center {
         height: 20px;
         text-decoration: none;
         font-size: 14px;
@@ -80,9 +86,19 @@ const logout = () => {
 
     .user:hover,
     .login:hover,
-    .logout:hover {
+    .logout:hover,
+    .center:hover{
         color: rgb(59, 93, 155);
         font-weight: 600;
     }
+
+    .user:active,
+    .login:active,
+    .center:active {
+        div {
+            color: rgb(59, 93, 155);
+        font-weight: 600;
+        }
+    }
 }
 </style>
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -34,6 +34,10 @@ const routes: RouteRecordRaw[] = [
     path: '/user',
     component: () => import('../views/information/user.vue'),
   },
+  {
+    path: '/user/center',
+    component: () => import('../views/information/center.vue'),
+  },
   {
     path: '/notification',
     component: () => import('../views/notification/notification.vue'),

diff --git a/src/views/information/center.vue b/src/views/information/center.vue
@@ -0,0 +1,12 @@
+<template>
+    <div>
+        <CHeader></CHeader>
+    </div>
+</template>
+
+<script setup lang="ts">
+import CHeader from '@/components/header.vue'
+</script>
+
+<style scoped lang="css">
+</style>