Qi-TongXue/ECS-Vue
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Qi 2025-03-28 15:20:38 +08:00
parent ce98f9c5d9
commit 1ccb1ca6c5
2 changed files with 355 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

272
src/views/customer/CustomerDashboard.vue
View File

@ -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">
<el-menu-item index="/customer/home" @click="$router.push('/customer/home')">首页</el-menu-item>
<el-sub-menu index="/customer/education">
<template #title>教育与预防</template>
<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>
</el-sub-menu>
<el-sub-menu index="/customer/assessment">
<template #title>心理健康评估</template>
<el-menu-item index="/customer/psychological-test" @click="$router.push('/customer/psychological-test')">心理测试</el-menu-item>
<el-menu-item index="/customer/questionnaire" @click="$router.push('/customer/questionnaire')">问卷调查</el-menu-item>
</el-sub-menu>
<el-menu-item index="/customer/social-circle" @click="$router.push('/customer/social-circle')">匿名分享圈</el-menu-item>
</el-menu>
<div class="custom-menu">
<div class="menu-item"
:class="{'active': activeIndex === '/customer/home'}"
@click="$router.push('/customer/home')">
首页
</div>
<div class="menu-item dropdown"
:class="{'active': activeIndex === '/customer/education' ||
activeIndex.includes('/customer/knowledge-base') ||
activeIndex.includes('/customer/wellness-guide')}"
@mouseover="showDropdown = 'education'"
@mouseleave="showDropdown = ''">
<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 (path.includes('/customer/knowledge-base') || path.includes('/customer/wellness-guide')) {
return '/customer/education'
} else if (path.includes('/customer/psychological-test') || path.includes('/customer/questionnaire')) {
return '/customer/assessment'
} else {
return path
// 如果当前有手动设置的活动项，优先使用
if (this.currentActive) {
return this.currentActive
}
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 {
margin: 0 15px;
.menu-item.active, .dropdown-item.active {
color: #ffd04b;
background-color: rgba(255, 255, 255, 0.2);
border-bottom: 2px solid #ffd04b;
}
.el-menu-item.is-active {
color: #ffd04b !important;
background-color: rgba(255, 255, 255, 0.2) !important;
.menu-item:hover {
color: #ffd04b;
background-color: rgba(255, 255, 255, 0.2);
}
.el-menu-item:hover {
background: rgba(255, 255, 255, 0.2) !important;
.dropdown {
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>

155
src/views/customer/knowledgeBase.vue
View File

@ -66,22 +66,26 @@
<!-- 知识条目图片 -->
<div class="item-images" v-if="item.images && item.images.length > 0">
<template v-if="item.images.length === 1">
<div class="single-image-container">
<el-image
:src="item.images[0]"
:preview-src-list="item.images"
fit="cover"
class="single-image"
></el-image>
</div>
</template>
<template v-else>
<div class="image-grid" :class="`grid-count-${item.images.length > 4 ? 'many' : item.images.length}`">
<div v-for="(img, index) in item.images" :key="index" class="grid-image-container">
<el-image
v-for="(img, index) in item.images"
:key="index"
:src="img"
:preview-src-list="item.images"
fit="cover"
class="grid-image"
></el-image>
</div>
</div>
</template>
</div>
@ -368,25 +372,66 @@ export default {
.knowledge-cover {
position: relative;
height: 40vh;
min-height: 300px;
max-height: 500px;
height: 45vh;
min-height: 320px;
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;
}