hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-09 02:46: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;
}

42
src/views/study/coursenew.vue
View File

@@ -123,13 +123,20 @@
<div>
<div class="course-interact">
<div class="score" style="display: flex;">
<div v-if="!scoreInfo.has" style="margin-left:10px;cursor: pointer;padding-top:18px">
<div v-if="!scoreInfo.has" style="margin-left:10px;cursor: pointer;padding-top:10px;display: flex;align-items: center;">
<!-- <el-popover placement="top" width="300" trigger="hover"> -->
<!-- <div style="text-align:center;line-height:50px;padding:20px 0px">
<div style="padding-top:30px"><el-button @click="addScore">提交评分</el-button></div>
</div> -->
<el-rate v-model="scoreInfo.score" @change="addScore"></el-rate>
<p style="margin-right:10px">告诉我们您的喜欢程度</p>
<el-rate v-model="scoreInfo.score" @change="showConfirmScore" :allow-half="true"></el-rate>
<div v-if="isShowScoreConfirm">
<span class="score-text">{{ toScore(scoreInfo.score) }}</span>
<span style="font-size: 18px;">分</span>
<el-button style="margin-left:10px" type="primary" size="mini" @click="addScore" >确定</el-button>
<el-button size="mini" @click="handleCancelScore">取消</el-button>
</div>
<!-- <el-tag class="ref-score" slot="reference">去评分</el-tag> -->
<!-- </el-popover> -->
</div>
@@ -188,7 +195,7 @@
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu :index="item.section.id">
<el-submenu :index="item.section.id" v-if="catalogTree.length > 1">
<template slot="title">
<div style="display: flex;justify-content: space-between;">
<div style="width: 240px;font-weight: 700;font-size: 16px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="item.section.name">{{item.section.name}}</div>
@@ -215,6 +222,27 @@
</div>
</el-menu-item-group>
</el-submenu>
<div v-else>
<el-menu-item-group v-for="(ele, i) in item.children" :key="i">
<div class="units-info" :class="{'units-active':contentData.id == ele.id}" @click="showRes(ele,i,index,item)">
<el-menu-item :index="ele.id" style="padding: 0;padding-left: 10px;">
<div style="display: flex;justify-content: space-between;">
<div style="width: 200px;font-size: 16px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="ele.contentName">{{i+1}}. {{ ele.contentName }}</div>
<div>
<span v-if="contentData.id == ele.id" style="color: #387DF7;font-size: 14px;margin-right: 4px;">学习中</span>
<!-- <img v-if="contentData.id == ele.id" :src="`${webBaseUrl}/images/playicon.png`" alt=""> -->
<img v-if="contentData.id == ele.id && ele.status == 9" style="width: 16px;height: 16px;" src="@/assets/images/over.png" alt="">
<img v-if="contentData.id == ele.id && ele.status == 0" style="width: 16px;height: 16px;" src="@/assets/images/nowNot.png" alt="">
<img v-if="contentData.id == ele.id && (ele.status != 9&&ele.status != 0)" style="width: 16px;height: 16px;" src="@/assets/images/ban1.png" alt="">
<img v-if="contentData.id != ele.id && ele.status == 9" style="width: 16px;height: 16px;" src="@/assets/images/notNew.png" alt="">
<img v-if="contentData.id != ele.id && ele.status == 0" style="width: 16px;height: 16px;" src="@/assets/images/not.png" alt="">
<img v-if="contentData.id != ele.id && (ele.status != 9&&ele.status != 0)" style="width: 16px;height: 16px;" src="@/assets/images/newBan.png" alt="">
</div>
</div>
</el-menu-item>
</div>
</el-menu-item-group>
</div>
</el-menu>
</div>
<!-- <div v-for="(item, index) in catalogTree" :key="index" :name="index">
@@ -390,6 +418,7 @@
},
data() {
return {
isShowScoreConfirm: false,
protocolDialogVisible: false,
tentative: false,
isContentTypeTwo: null,
@@ -533,6 +562,13 @@
}
},
methods: {
handleCancelScore() {
this.isShowScoreConfirm = false;
this.scoreInfo.score = 5
},
showConfirmScore() {
this.isShowScoreConfirm = true;
},
handleOpen(key,path){
if(this.isFalse){
this.defaultOpeneds = [key]