用户界面头部栏布局优化

src/router/index.js

@@ -48,28 +48,31 @@ const routes = [
     path: '/customer',
     name: 'CustomerDashboard',
     component: CustomerDashboard,
-    meta: { requiresAuth: true, role: 'customer', title: '养老系统' },
+    meta: { requiresAuth: true, role: 'customer', title: '中医药与心理健康' },
     children: [
       {
         path: '/customer/home',
         name: 'CustomerHome',
         component: CustomerHome,
-        meta: { title: '养老系统' }
+        meta: { title: '中医药与心理健康' }
       },
       {
         path: '/customer/services',
         name: 'ServiceAppointment',
-        component: ServiceAppointment
+        component: ServiceAppointment,
+        meta: { title: '中医药与心理健康' }
       },
       {
         path: '/customer/schedule',
         name: 'MySchedule',
-        component: MySchedule
+        component: MySchedule,
+        meta: { title: '中医药与心理健康' }
       },
       {
         path: '/customer/profile',
         name: 'UserProfile',
-        component: UserProfile
+        component: UserProfile,
+        meta: { title: '中医药与心理健康' }
       }
     ]
   }

src/views/customer/CustomerDashboard.vue

@@ -1,26 +1,47 @@
 <template>
-  <div class="customer-dashboard">
-    <header class="dashboard-header">
-      <h1>顾客服务中心</h1>
-      <nav class="main-nav">
-        <router-link to="/customer/home" class="nav-link">首页</router-link>
-        <router-link to="/customer/services" class="nav-link">服务预约</router-link>
-        <router-link to="/customer/schedule" class="nav-link">我的日程</router-link>
-        <router-link to="/customer/profile" class="nav-link">个人信息</router-link>
-      </nav>
-      <button @click="logout">退出登录</button>
-    </header>
-
-    <div class="dashboard-content">
+  <el-container class="customer-dashboard">
+    <el-header>
+      <h1>中医药与心理健康</h1>
+      <el-menu>
+        <el-menu-item index="1" @click="$router.push('/customer/home')">首页</el-menu-item>
+        <el-dropdown placement="bottom-start">
+          <el-menu-item index="2"> 教育与预防 </el-menu-item>
+          <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item @click="$router.push('/customer/knowledge-base')">知识库</el-dropdown-item>
+            <el-dropdown-item @click="$router.push('/customer/wellness-guide')">养生指南</el-dropdown-item>
+          </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-dropdown placement="bottom-start">
+          <el-menu-item index="3"> 心理健康评估 </el-menu-item>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="$router.push('/customer/psychological-test')">心理测试</el-dropdown-item>
+              <el-dropdown-item @click="$router.push('/customer/questionnaire')">问卷调查</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-menu-item index="4" @click="$router.push('/customer/social-circle')">匿名分享圈</el-menu-item>
+      </el-menu>
+      <el-button @click="logout" type="danger">退出登录</el-button>
+    </el-header>
+    <el-main>
       <router-view></router-view>
-    </div>
-  </div>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
+
 export default {
   name: 'CustomerDashboard',
   methods: {
+    data () {
+      return {
+
+      }
+    },
     logout () {
       this.$router.push('/login')
     }
@@ -35,8 +56,8 @@ export default {
   flex-direction: column;
 }
 
-.dashboard-header {
-  background: #2c3e50;
+.el-header {
+  background: #4CAF50;
   color: white;
   padding: 1rem;
   display: flex;
@@ -44,37 +65,19 @@ export default {
   align-items: center;
 }
 
-.main-nav {
+.el-menu {
   display: flex;
   gap: 20px;
-}
-
-.nav-link {
-  color: white;
-  text-decoration: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-}
-
-.nav-link:hover,
-.nav-link.router-link-active {
-  background: rgba(255,255,255,0.1);
-}
-
-.dashboard-content {
-  flex: 1;
-}
-
-button {
-  background: #4CAF50;
-  color: white;
+  background-color: transparent;
   border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
 }
 
-button:hover {
-  background: #45a049;
+/*.el-menu-item {
+  color: greet;
+}*/
+
+.el-menu-item:hover {
+  background: rgba(255, 255, 255, 0.2);
 }
+
 </style>