优化菜单栏、知识库背景图片显示

src/views/customer/CustomerDashboard.vue

@@ -3,20 +3,53 @@
     <el-header>
       <h1>中医药与心理健康</h1>
       <div class="menu-wrapper">
-        <el-menu :default-active="activeIndex" mode="horizontal" background-color="#4CAF50" text-color="#fff" active-text-color="#ffd04b">
+        <div class="custom-menu">
-          <el-menu-item index="/customer/home" @click="$router.push('/customer/home')">首页</el-menu-item>
+          <div class="menu-item"
-          <el-sub-menu index="/customer/education">
+               :class="{'active': activeIndex === '/customer/home'}"
-            <template #title>教育与预防</template>
+               @click="$router.push('/customer/home')">
-            <el-menu-item index="/customer/knowledge-base" @click="$router.push('/customer/knowledge-base')">知识库</el-menu-item>
+            首页
-            <el-menu-item index="/customer/wellness-guide" @click="$router.push('/customer/wellness-guide')">养生指南</el-menu-item>
+          </div>
-          </el-sub-menu>
+
-          <el-sub-menu index="/customer/assessment">
+          <div class="menu-item dropdown"
-            <template #title>心理健康评估</template>
+               :class="{'active': activeIndex === '/customer/education' ||
-            <el-menu-item index="/customer/psychological-test" @click="$router.push('/customer/psychological-test')">心理测试</el-menu-item>
+                                 activeIndex.includes('/customer/knowledge-base') ||
-            <el-menu-item index="/customer/questionnaire" @click="$router.push('/customer/questionnaire')">问卷调查</el-menu-item>
+                                 activeIndex.includes('/customer/wellness-guide')}"
-          </el-sub-menu>
+               @mouseover="showDropdown = 'education'"
-          <el-menu-item index="/customer/social-circle" @click="$router.push('/customer/social-circle')">匿名分享圈</el-menu-item>
+               @mouseleave="showDropdown = ''">
-        </el-menu>
+            <div class="dropdown-title">教育与预防</div>
+            <div class="dropdown-menu" v-show="showDropdown === 'education'">
+              <div class="dropdown-item"
+                   :class="{'active': activeIndex === '/customer/knowledge-base'}"
+                   @click="handleNavigation('/customer/knowledge-base')">知识库</div>
+              <div class="dropdown-item"
+                   :class="{'active': activeIndex === '/customer/wellness-guide'}"
+                   @click="handleNavigation('/customer/wellness-guide')">养生指南</div>
+            </div>
+          </div>
+
+          <div class="menu-item dropdown"
+               :class="{'active': activeIndex === '/customer/assessment' ||
+                                 activeIndex.includes('/customer/psychological-test') ||
+                                 activeIndex.includes('/customer/questionnaire')}"
+               @mouseover="showDropdown = 'assessment'"
+               @mouseleave="showDropdown = ''">
+            <div class="dropdown-title">心理健康评估</div>
+            <div class="dropdown-menu" v-show="showDropdown === 'assessment'">
+              <div class="dropdown-item"
+                   :class="{'active': activeIndex === '/customer/psychological-test'}"
+                   @click="handleNavigation('/customer/psychological-test')">心理测试</div>
+              <div class="dropdown-item"
+                   :class="{'active': activeIndex === '/customer/questionnaire'}"
+                   @click="handleNavigation('/customer/questionnaire')">问卷调查</div>
+            </div>
+          </div>
+
+          <div class="menu-item"
+               :class="{'active': activeIndex === '/customer/social-circle'}"
+               @click="$router.push('/customer/social-circle')">
+            匿名分享圈
+          </div>
+        </div>
       </div>
       <div class="user-avatar-container">
         <el-dropdown>
@@ -41,23 +74,31 @@ export default {
   name: 'CustomerDashboard',
   data () {
     return {
-      userAvatar: require('@/assets/user/1.jpg')
+      userAvatar: require('@/assets/user/1.jpg'),
+      showDropdown: '',
+      currentActive: ''
     }
   },
   computed: {
     activeIndex () {
-      const path = this.$route.path
+      // 如果当前有手动设置的活动项，优先使用
-      // 设置主菜单路径映射
+      if (this.currentActive) {
-      if (path.includes('/customer/knowledge-base') || path.includes('/customer/wellness-guide')) {
+        return this.currentActive
-        return '/customer/education'
-      } else if (path.includes('/customer/psychological-test') || path.includes('/customer/questionnaire')) {
-        return '/customer/assessment'
-      } else {
-        return path
       }
+
+      return this.$route.path
     }
   },
   methods: {
+    handleNavigation (path) {
+      this.currentActive = path
+      this.$router.push(path)
+      // 不要立即隐藏下拉菜单，以便用户可以看到高亮效果
+      // 采用延迟关闭方式
+      setTimeout(() => {
+        this.showDropdown = ''
+      }, 300)
+    },
     logout () {
       this.$router.push('/login')
     }
@@ -89,33 +130,137 @@ export default {
   margin: 0 15px;
 }
 
-.el-menu {
+.custom-menu {
   display: flex;
-  background-color: transparent !important;
-  border: none;
   width: 100%;
   justify-content: center;
+  position: relative;
 }
 
-.el-menu-item {
+.menu-item {
   font-size: 15px;
   height: 56px;
   line-height: 56px;
   margin: 0 15px;
   padding: 0 10px;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.3s;
+  border-bottom: 2px solid transparent;
 }
 
-.el-sub-menu {
+.menu-item.active, .dropdown-item.active {
-  margin: 0 15px;
+  color: #ffd04b;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-bottom: 2px solid #ffd04b;
 }
 
-.el-menu-item.is-active {
+.menu-item:hover {
-  color: #ffd04b !important;
+  color: #ffd04b;
-  background-color: rgba(255, 255, 255, 0.2) !important;
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
-.el-menu-item:hover {
+.dropdown {
-  background: rgba(255, 255, 255, 0.2) !important;
+  position: relative;
+}
+
+.dropdown-title {
+  display: flex;
+  align-items: center;
+}
+
+.dropdown-title:after {
+  content: '';
+  display: inline-block;
+  margin-left: 5px;
+  border-top: 5px solid #fff;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  transition: all 0.3s;
+}
+
+.active .dropdown-title:after,
+.dropdown:hover .dropdown-title:after {
+  border-top-color: #ffd04b;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  min-width: 180px;
+  background: #ffffff;
+  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08),
+              0 9px 28px 0 rgba(0, 0, 0, 0.05),
+              0 12px 48px 16px rgba(0, 0, 0, 0.03);
+  border-radius: 4px;
+  z-index: 10;
+  padding: 4px 0;
+  margin-top: 8px;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.dropdown-menu:before, .dropdown-menu:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.dropdown-menu:before {
+  top: -8px;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 8px solid rgba(0, 0, 0, 0.06);
+}
+
+.dropdown-menu:after {
+  top: -7px;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid white;
+}
+
+.dropdown-item {
+  color: #606266;
+  padding: 8px 16px;
+  line-height: 1.5;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-size: 14px;
+  position: relative;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.dropdown-item.active {
+  background-color: rgba(76, 175, 80, 0.1);
+  color: #4CAF50;
+  font-weight: 500;
+  position: relative;
+  border-radius: 3px;
+}
+
+.dropdown-item.active:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 4px;
+  height: 70%;
+  transform: translateY(-50%);
+  background-color: #4CAF50;
+  border-radius: 0 2px 2px 0;
+}
+
+.dropdown-item:hover {
+  background-color: rgba(76, 175, 80, 0.05);
+  color: #4CAF50;
+}
+
+.dropdown-item:active {
+  background-color: rgba(76, 175, 80, 0.15);
 }
 
 .user-avatar-container {
@@ -149,11 +294,12 @@ export default {
     margin: 10px 0;
   }
 
-  .el-menu {
+  .custom-menu {
     width: 100%;
+    flex-wrap: wrap;
   }
 
-  .el-menu-item, .el-sub-menu {
+  .menu-item {
     margin: 0 5px;
   }
 
@@ -163,5 +309,59 @@ export default {
     right: 0.5rem;
     margin-left: 0;
   }
+
+  .dropdown-menu {
+    width: 100%;
+  }
+}
+</style>
+
+<style>
+/* 非scoped样式，确保可以覆盖element-ui原生样式 */
+.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+  border-bottom: 2px solid #ffd04b !important;
+  color: #ffd04b !important;
+  background-color: rgba(255, 255, 255, 0.2) !important;
+}
+
+.el-menu--horizontal > .el-menu-item.is-active {
+  border-bottom: 2px solid #ffd04b !important;
+}
+
+/* 特别为顶级子菜单添加悬停效果 */
+.el-menu--horizontal > .el-submenu > .el-submenu__title:hover {
+  color: #ffd04b !important;
+  background-color: rgba(255, 255, 255, 0.2) !important;
+  border-bottom: 2px solid #ffd04b !important;
+}
+
+.el-menu--horizontal .el-submenu:focus .el-submenu__title,
+.el-menu--horizontal .el-submenu:hover .el-submenu__title,
+.el-menu--horizontal .el-menu-item:focus,
+.el-menu--horizontal .el-menu-item:hover {
+  color: #ffd04b !important;
+  background-color: rgba(255, 255, 255, 0.2) !important;
+}
+
+.el-submenu__title i {
+  color: #fff !important;
+}
+
+.el-submenu.is-active .el-submenu__title i {
+  color: #ffd04b !important;
+}
+
+.el-submenu:hover .el-submenu__title i {
+  color: #ffd04b !important;
+}
+
+/* 针对inline-block元素的修复 */
+.el-menu--horizontal .el-submenu {
+  display: inline-block !important;
+}
+
+.el-menu--horizontal .el-submenu .el-submenu__title {
+  height: 56px !important;
+  line-height: 56px !important;
 }
 </style>

src/views/customer/knowledgeBase.vue

@@ -66,22 +66,26 @@
           <!-- 知识条目图片 -->
           <div class="item-images" v-if="item.images && item.images.length > 0">
             <template v-if="item.images.length === 1">
-              <el-image
+              <div class="single-image-container">
-                :src="item.images[0]"
+                <el-image
-                :preview-src-list="item.images"
+                  :src="item.images[0]"
-                fit="cover"
+                  :preview-src-list="item.images"
-                class="single-image"
+                  fit="cover"
-              ></el-image>
+                  class="single-image"
+                ></el-image>
+              </div>
             </template>
             <template v-else>
-              <el-image
+              <div class="image-grid" :class="`grid-count-${item.images.length > 4 ? 'many' : item.images.length}`">
-                v-for="(img, index) in item.images"
+                <div v-for="(img, index) in item.images" :key="index" class="grid-image-container">
-                :key="index"
+                  <el-image
-                :src="img"
+                    :src="img"
-                :preview-src-list="item.images"
+                    :preview-src-list="item.images"
-                fit="cover"
+                    fit="cover"
-                class="grid-image"
+                    class="grid-image"
-              ></el-image>
+                  ></el-image>
+                </div>
+              </div>
             </template>
           </div>
 
@@ -368,25 +372,66 @@ export default {
 
 .knowledge-cover {
   position: relative;
-  height: 40vh;
+  height: 45vh;
-  min-height: 300px;
+  min-height: 320px;
-  max-height: 500px;
+  max-height: 550px;
   overflow: hidden;
   background-color: #000;
   width: 100%;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
 .cover-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  opacity: 0.7;
+  opacity: 0.8;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  object-position: center top;
+}
+
+.search-box {
+  position: absolute;
+  bottom: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80%;
+  max-width: 650px;
+  z-index: 2;
+}
+
+.search-box .el-input {
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+}
+
+.search-box .el-input >>> .el-input__inner {
+  height: 50px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  font-size: 16px;
+  padding-left: 40px;
+}
+
+.knowledge-cover::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6));
+  z-index: 1;
 }
 
 .title-area {
   position: absolute;
   left: 0;
-  top: 30%;
+  top: 35%;
   width: 100%;
   text-align: center;
   color: #fff;
@@ -410,29 +455,6 @@ export default {
   margin-right: auto;
 }
 
-.search-box {
-  position: absolute;
-  bottom: 50px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 80%;
-  max-width: 600px;
-  z-index: 10;
-}
-
-.search-box .el-input {
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.search-box .el-input >>> .el-input__inner {
-  height: 50px;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  font-size: 16px;
-  padding-left: 40px;
-}
-
 .knowledge-content {
   padding: 50px 0 30px;
   width: 100%;
@@ -557,31 +579,51 @@ export default {
 }
 
 .item-images {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
   margin-bottom: 20px;
+  width: 100%;
+}
+
+.single-image-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 15px;
 }
 
 .single-image {
   max-width: 100%;
-  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   max-height: 400px;
+  object-fit: contain;
+}
+
+.image-grid {
+  display: grid;
+  gap: 10px;
+  width: 100%;
+}
+
+.grid-count-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-count-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.grid-count-4, .grid-count-many {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-image-container {
+  aspect-ratio: 1 / 1;
   border-radius: 8px;
   overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .grid-image {
-  width: 100%;
-  height: 0;
-  padding-bottom: 100%;
-  position: relative;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.grid-image img {
-  position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -721,6 +763,27 @@ export default {
   color: #333;
 }
 
+@media screen and (min-width: 768px) {
+  .grid-count-3, .grid-count-many {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .grid-count-4 {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .grid-count-2, .grid-count-3, .grid-count-4, .grid-count-many {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .single-image {
+    max-height: 300px;
+  }
+}
+
 @media screen and (max-width: 768px) {
   .knowledge-content {
     padding: 50px 15px 30px;
@@ -734,10 +797,6 @@ export default {
     width: 90%;
   }
 
-  .item-images {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
   .page-title {
     font-size: 28px;
   }