hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-21 00:36:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

课程列表侧边栏修改 课程详情评分修改 课程详情章节目录修改

Browse Source
This commit is contained in:
赵依梦
2025-11-17 16:11:14 +08:00
parent f3cc59d313
commit c11fb55ce3
2 changed files with 113 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/views/portal/course/Index.vue
View File

@@ -39,25 +39,28 @@
:class="{ courseTwoActive: twoList.id == twoId || twoList.checked }" @mouseleave.stop="leaveIndex"
@mouseenter.stop="changeIndex(twoList.id)">
<!-- 三级分类 -->
<el-popover class="popover" popper-class='coursePopperClass' placement="right-start" width="536"
:disabled="!twoList.children.length" :open-delay="0" :close-delay="0" trigger="hover"
:visible-arrow="false" @hide="leaveIndex" @show="changeIndex(twoList.id)" transition="none">
<div class="course-two-content" slot="reference">{{
twoList.name }}</div>
<!-- 内容 -->
<div class="course-three-box">
<div class="course-three-box-title">
{{ twoList.name }}
</div>
<div style="padding: 0 40px;display: flex;flex-wrap: wrap;">
<div :class="threeList.checked ? 'threeActive' : ''" v-for="threeList in twoList.children"
:key="threeList.id" @click.stop="handleOptionClick(threeList, 3, twoList.children)"
class="course-three">
<span>{{ threeList.name }}</span>
<el-menu>
<el-submenu :index="String(twoIndex)" v-if="twoList.children && twoList.children.length > 0">
<template slot="title">
<div class="course-two-content">
{{ twoList.name }}
</div>
</div>
</div>
</el-popover>
</template>
<el-menu-item-group>
<div style="padding: 0 40px;display: flex;flex-wrap: wrap;">
<div :class="threeList.checked ? 'threeActive' : ''" v-for="threeList in twoList.children"
:key="threeList.id" @click.stop="handleOptionClick(threeList, 3, twoList.children)"
class="course-three">
<span>{{ threeList.name }}</span>
</div>
</div>
</el-menu-item-group>
</el-submenu>
<el-menu-item :index="String(twoIndex)" v-else>
<div slot="title" class="course-two-content"> {{ twoList.name }}</div>
</el-menu-item>
</el-menu>
<!-- </el-popover> -->
</div>
</div>
</div>
@@ -613,6 +616,7 @@ export default {
},
data() {
return {
menuActiveIndex: '-1', //无默认选中
newData: false,//线上品牌系列隐藏
navTitle: [],
// 设置高亮
@@ -1569,6 +1573,38 @@ console.log(res.result.list,'data')
</script>
<style scoped lang="scss">
.course-three-box-title{
font-size: 16px;
font-weight: 600;
height: 68px;
line-height: 80px;
background: linear-gradient(180deg, rgba(78,166,255,0.2) 0%,
rgba(78,166,255,0) 100%);padding-left: 40px;
}
.course-three{
border-radius: 6px;
border: 1px solid #C7CBD2;display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 10px;
margin-right: 20px;
margin-bottom: 10px;
cursor: pointer;
color: rgb(48, 49, 51);
&:hover{
color: #387DF7;
border: 1px solid #387DF7 !important;
}
}
.threeActive{
color: #387DF7;
border: 1px solid #387DF7 !important;
}
.couser-list-content {
min-height: 110%;
}
@@ -1629,10 +1665,29 @@ console.log(res.result.list,'data')
}
}
// 三级列表
.course-list {
background-color: #fff;
::v-deep .el-submenu__title, .el-menu-item {
height: 38px;
padding: 0 5px!important;
}
::v-deep .el-menu-item.is-active {
background-color: inherit;
color: inherit;
}
::v-deep .el-submenu__title {
background-color: inherit;
color: inherit;
}
.course-one {
position: relative;
@@ -1646,7 +1701,7 @@ console.log(res.result.list,'data')
// 二级的高亮
.courseTwoActive {
color: #387DF7;
color: #387DF7 !important;
border-image: linear-gradient(90deg, rgba(47, 101, 236, 1), rgba(228, 236, 255, 1)) 1 1 !important;
}