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

还原-需求方要测试

Browse Source
This commit is contained in:
670788339
2025-11-07 10:08:37 +08:00
parent e8c5c5acdb
commit be88ddcf20
1 changed files with 77 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
<div id="couser-list-content" class="couser-list-content"> <div id="couser-list-content" class="couser-list-content">
<div class="course-banner"> <div class="course-banner">
<portal-header current="course" textColor="#fff" :keywords="keyword" @emitInput="emitInput" <portal-header current="course" textColor="#fff" :keywords="keyword" @emitInput="emitInput"
@showClass="showClass"></portal-header> @showClass="showClass"></portal-header>
</div> </div>
<div style="padding-top:30px"> <div style="padding-top:30px">
<div class="xcontent2"> <div class="xcontent2">
@@ -11,7 +11,7 @@
<span v-if="navTitle.length">></span> <span v-if="navTitle.length">></span>
<template v-if="navTitle.length"> <template v-if="navTitle.length">
<div class="oneTitle" v-for="(item, index) in navTitle" :key="item.id" <div class="oneTitle" v-for="(item, index) in navTitle" :key="item.id"
@click="handleOptionClick(item, index)"> @click="handleOptionClick(item, index)">
<span class="titleName">&nbsp;{{ item.name }}&nbsp;</span> <span class="titleName">&nbsp;{{ item.name }}&nbsp;</span>
<span v-if="index !== navTitle.length - 1">></span> <span v-if="index !== navTitle.length - 1">></span>
</div> </div>
@@ -35,15 +35,15 @@
<div class="course-one" v-for="one in oneList" :key="one.id" @click.stop="handleOptionClick(one, 1, oneList)"> <div class="course-one" v-for="one in oneList" :key="one.id" @click.stop="handleOptionClick(one, 1, oneList)">
<div class="course-one-content">{{ one.name }}</div> <div class="course-one-content">{{ one.name }}</div>
<div class="course-two" v-for="(twoList, twoIndex) in one.children" :key="twoList.id" <div class="course-two" v-for="(twoList, twoIndex) in one.children" :key="twoList.id"
@click.stop="handleOptionClick(twoList, 2, one.children)" @click.stop="handleOptionClick(twoList, 2, one.children)"
:class="{ courseTwoActive: twoList.id == twoId || twoList.checked }" @mouseleave.stop="leaveIndex" :class="{ courseTwoActive: twoList.id == twoId || twoList.checked }" @mouseleave.stop="leaveIndex"
@mouseenter.stop="changeIndex(twoList.id)"> @mouseenter.stop="changeIndex(twoList.id)">
<!-- 三级分类 --> <!-- 三级分类 -->
<el-popover class="popover" popper-class='coursePopperClass' placement="right-start" width="536" <el-popover class="popover" popper-class='coursePopperClass' placement="right-start" width="536"
:disabled="!twoList.children.length" :open-delay="0" :close-delay="0" trigger="hover" :disabled="!twoList.children.length" :open-delay="0" :close-delay="0" trigger="hover"
:visible-arrow="false" @hide="leaveIndex" @show="changeIndex(twoList.id)" transition="none"> :visible-arrow="false" @hide="leaveIndex" @show="changeIndex(twoList.id)" transition="none">
<div class="course-two-content" slot="reference">{{ <div class="course-two-content" slot="reference">{{
twoList.name }}</div>- twoList.name }}</div>-
<!-- 内容 --> <!-- 内容 -->
<div class="course-three-box"> <div class="course-three-box">
<div class="course-three-box-title"> <div class="course-three-box-title">
@@ -51,8 +51,8 @@
</div> </div>
<div style="padding: 0 40px;display: flex;flex-wrap: wrap;"> <div style="padding: 0 40px;display: flex;flex-wrap: wrap;">
<div :class="threeList.checked ? 'threeActive' : ''" v-for="threeList in twoList.children" <div :class="threeList.checked ? 'threeActive' : ''" v-for="threeList in twoList.children"
:key="threeList.id" @click.stop="handleOptionClick(threeList, 3, twoList.children)" :key="threeList.id" @click.stop="handleOptionClick(threeList, 3, twoList.children)"
class="course-three"> class="course-three">
<span>{{ threeList.name }}</span> <span>{{ threeList.name }}</span>
</div> </div>
</div> </div>
@@ -283,23 +283,23 @@
</div> --> </div> -->
<!-- 内容导航 --> <!-- 内容导航 -->
<div class="topNav" v-if="!newData"> <div class="topNav" v-if="!newData">
<div class="search-div nav" style="flex: 1;height: auto;"> <div class="search-div nav" style="height: 100px;flex: 1;">
<div @click="handleTypeAllClick(1)" class="option-item" style="font-weight: bold;position: relative;margin-right: 20px;" :class="{ 'option-active': ctypeTagAll }"> <div @click="handleTypeAllClick(1)" class="option-item" style="font-weight: bold;position: relative;margin-right: 20px;" :class="{ 'option-active': ctypeTagAll }">
<a>全部</a> <a>全部</a>
<span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span> <span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span>
</div> </div>
<div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item" style="font-weight: bold" <div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item" style="font-weight: bold"
:class="{ 'option-active': ctypeList[0].checked }"> :class="{ 'option-active': ctypeList[0].checked }">
<a>录播课</a> <a>录播课</a>
<span :class="ctypeList[0].checked ? 'nav-bottbor' : ''"></span> <span :class="ctypeList[0].checked ? 'nav-bottbor' : ''"></span>
</div> </div>
<div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item" style="font-weight: bold" <div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item" style="font-weight: bold"
:class="{ 'option-active': ctypeList[1].checked }"> :class="{ 'option-active': ctypeList[1].checked }">
<a>线下课</a> <a>线下课</a>
<span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span> <span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span>
</div> </div>
<div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item" style="font-weight: bold" <div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item" style="font-weight: bold"
:class="{ 'option-active': ctypeList[2].checked }"> :class="{ 'option-active': ctypeList[2].checked }">
<a>学习项目</a> <a>学习项目</a>
<span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span> <span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>
</div> </div>
@@ -312,9 +312,9 @@
</a> </a>
<!-- 修改热点标签区域 --> <!-- 修改热点标签区域 -->
<div style="margin-top:10px;flex: 1;"> <div style="margin-top:10px;flex: 1;">
<!-- <div class="search-item-type" style="padding-top: 2px; float: left;"> <!-- <div class="search-item-type" style="padding-top: 2px; float: left;">
<span class="item-title" style="padding-right: 5px;">热点标签:</span> <span class="item-title" style="padding-right: 5px;">热点标签:</span>
</div>--> </div>-->
<!-- 修改热点标签容器，支持换行 --> <!-- 修改热点标签容器，支持换行 -->
<div class="hot-tags-wrapper"> <div class="hot-tags-wrapper">
<div <div
@@ -339,15 +339,15 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div id="fixd-box" class="upload" style="margin-left: 26px;"> <!-- <div id="fixd-box" class="upload" style="margin-left: 26px;">
<div v-if="identity == 2 || identity == 3 || identity == 5"> <div v-if="identity == 2 || identity == 3 || identity == 5">
<div class="portal-model-btn pointer" style="margin-bottom: 0px;height: 100px;line-height: 100px;" <div class="portal-model-btn pointer" style="margin-bottom: 0px;height: 100px;line-height: 100px;"
@click="toNeedCourse"> @click="toNeedCourse">
<svg-icon style="margin-right: 10px;font-size: 24px;" icon-class="upCourse"></svg-icon> <svg-icon style="margin-right: 10px;font-size: 24px;" icon-class="upCourse"></svg-icon>
上传课程 上传课程
</div> </div>
</div> </div>
</div>--> </div>-->
</div> </div>
<!-- 清除 --> <!-- 清除 -->
<div v-if="stagList.length > 0 && !newData" class="search-div" style="padding: 0;margin-bottom: 20px;"> <div v-if="stagList.length > 0 && !newData" class="search-div" style="padding: 0;margin-bottom: 20px;">
@@ -355,7 +355,7 @@
<div style="line-height: 30px;"> <div style="line-height: 30px;">
<span class="item-title"> 搜索条件:</span> <span class="item-title"> 搜索条件:</span>
<el-tag closable v-for="(tag, tagIdx) in stagList" :key="'t' + tagIdx" @close="stagClose(tag, tagIdx)" <el-tag closable v-for="(tag, tagIdx) in stagList" :key="'t' + tagIdx" @close="stagClose(tag, tagIdx)"
:style="{ color: tag.type === 0 ? '#ff0000' : '' }"> :style="{ color: tag.type === 0 ? '#ff0000' : '' }">
{{ tag.tagName }} {{ tag.tagName }}
</el-tag> </el-tag>
</div> </div>
@@ -370,11 +370,11 @@
<div class="order-div" v-if="!newData"> <div class="order-div" v-if="!newData">
<span class="quyer-tag"> <span class="quyer-tag">
<el-button type="text" class="order-class" @click="orderChange('studys')" <el-button type="text" class="order-class" @click="orderChange('studys')"
:class="{ actice: course.orderField == 'studys' }">最热</el-button> :class="{ actice: course.orderField == 'studys' }">最热</el-button>
<el-button type="text" class="order-class" @click="orderChange('publishTime')" <el-button type="text" class="order-class" @click="orderChange('publishTime')"
:class="{ actice: course.orderField == 'publishTime' }">最新</el-button> :class="{ actice: course.orderField == 'publishTime' }">最新</el-button>
<el-button type="text" class="order-class" @click="orderChange('score')" <el-button type="text" class="order-class" @click="orderChange('score')"
:class="{ actice: course.orderField == 'score' }">好评率</el-button> :class="{ actice: course.orderField == 'score' }">好评率</el-button>
</span> </span>
<span class="order-count"> <span class="order-count">
共找到<span>{{ count }}</span>个结果 共找到<span>{{ count }}</span>个结果
@@ -407,7 +407,7 @@
<div class="keywordInfo-every"> <div class="keywordInfo-every">
<div class="keywordInfo" v-for="(keyword, index) in cinfo.keywordsActive" :key="index"> <div class="keywordInfo" v-for="(keyword, index) in cinfo.keywordsActive" :key="index">
<el-tooltip popper-class="keywordInfo-class" :visible-arrow="false" <el-tooltip popper-class="keywordInfo-class" :visible-arrow="false"
:disabled="!keyword.showTitle"> :disabled="!keyword.showTitle">
<template #content> <template #content>
<span v-html="keyword.title"></span> <span v-html="keyword.title"></span>
</template> </template>
@@ -431,7 +431,7 @@
<div class="course-info-score"> <div class="course-info-score">
<div style="display: flex;"> <div style="display: flex;">
<interactBar :type="1" nodeWidth="20px" :data="cinfo" :courseExclusive="true" :comments="false" <interactBar :type="1" nodeWidth="20px" :data="cinfo" :courseExclusive="true" :comments="false"
:praises="false" :shares="false" :views="false"></interactBar> :praises="false" :shares="false" :views="false"></interactBar>
<div v-if="cinfo.score"> <div v-if="cinfo.score">
<span class="course-score-value">{{ toScore(cinfo.score) }}分</span> <span class="course-score-value">{{ toScore(cinfo.score) }}分</span>
</div> </div>
@@ -476,7 +476,7 @@
</span> </span>
<div v-if="courseList.length > 0"> <div v-if="courseList.length > 0">
<pagination :size="course.pageSize" :total="count" :page="course.pageIndex" <pagination :size="course.pageSize" :total="count" :page="course.pageIndex"
layout="total, prev, pager, next, jumper" @change-page="currentChange"></pagination> layout="total, prev, pager, next, jumper" @change-page="currentChange"></pagination>
</div> </div>
</div> </div>
</div> </div>
@@ -755,7 +755,7 @@ export default {
} }
}) })
//初始化:获取最新前10个热点标签 //初始化:获取最新前10个热点标签
apiCourseTag.getHotTagList(null).then(rs => { apiCourseTag.getHotTagList(null).then(rs => {
if (rs.status == 200) { if (rs.status == 200) {
this.hotTagsList = rs.result.map(tag => ({ this.hotTagsList = rs.result.map(tag => ({
...tag, ...tag,
@@ -1036,33 +1036,33 @@ export default {
this.searchData(1); this.searchData(1);
}, },
// 清除 // 清除
handleClearTags() { handleClearTags() {
//清空所有的条件 //清空所有的条件
this.keyword = ''; this.keyword = '';
this.ctypeList.forEach(item => { this.ctypeList.forEach(item => {
item.checked = false; item.checked = false;
});
this.hotTagsList.forEach(item => {
item.checked = false;
});
this.course.tags = ''; // 清空标签ID
// 添加清除三级分类的逻辑
this.oneList.forEach(one => {
one.checked = false;
one.children.forEach(two => {
two.checked = false;
two.children.forEach(three => {
three.checked = false;
}); });
}); this.hotTagsList.forEach(item => {
}); item.checked = false;
});
this.course.tags = ''; // 清空标签ID
// 清空导航标题 // 添加清除三级分类的逻辑
this.navTitle = []; this.oneList.forEach(one => {
one.checked = false;
one.children.forEach(two => {
two.checked = false;
two.children.forEach(three => {
three.checked = false;
});
});
});
this.searchData(); // 清空导航标题
}, this.navTitle = [];
this.searchData();
},
// 导航切换(录播课，线下课，学习项目) // 导航切换(录播课，线下课，学习项目)
handleTypeClick(item, list) { handleTypeClick(item, list) {
item.checked = !item.checked; item.checked = !item.checked;
@@ -1580,7 +1580,7 @@ handleClearTags() {
if (item.teacher) { if (item.teacher) {
item.teacher = item.teacher.split(',').filter(itemValue => itemValue !== 'BOE教师').join(','); item.teacher = item.teacher.split(',').filter(itemValue => itemValue !== 'BOE教师').join(',');
// if (dotIdx > 0) { // if (dotIdx > 0) {
// item.teacher = item.teacher.substring(0, dotIdx); // item.teacher = item.teacher.substring(0, dotIdx);
// } // }
} }
if (item.teacher && item.teacher == 'BOE教师') { if (item.teacher && item.teacher == 'BOE教师') {
@@ -1856,9 +1856,6 @@ handleClearTags() {
.topNav { .topNav {
display: flex; display: flex;
margin-bottom: 20px; margin-bottom: 20px;
height: auto;
min-height: 80px;
align-items: center;
.nav { .nav {
display: flex; display: flex;
@@ -2336,8 +2333,8 @@ handleClearTags() {
margin-left: 15px; margin-left: 15px;
font-size: 14px; font-size: 14px;
color: #3d3d3d; color: #3d3d3d;
//cursor: pointer; cursor: pointer;
//position: relative; position: relative;
} }
.uxicon { .uxicon {
@@ -2468,8 +2465,6 @@ handleClearTags() {
background: #fff; background: #fff;
padding: 10px 25px; padding: 10px 25px;
border-radius: 8px; border-radius: 8px;
height: auto;
min-height: 60px;
::v-deep .el-input { ::v-deep .el-input {
width: 420px; width: 420px;
@@ -2593,8 +2588,7 @@ handleClearTags() {
color: #3d3d3d; color: #3d3d3d;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
//margin: 0px 15px; margin: 0px 15px;
font-weight: normal;
} }
.option-border { .option-border {
@@ -2608,7 +2602,7 @@ handleClearTags() {
.option-active { .option-active {
color: #387DF7; color: #387DF7;
} }
/* 项目简介 方法一：外部 CSS 类 */ /* 项目简介 方法一：外部 CSS 类 */
::v-deep.el-dialog { ::v-deep.el-dialog {
border-radius: 3% 3% 1% 1%; border-radius: 3% 3% 1% 1%;
padding: 0; padding: 0;
@@ -2636,16 +2630,10 @@ handleClearTags() {
/* ---end--- */ /* ---end--- */
/* ---标签管理 added by zhengsongbo on 2025-08-01--- */ /* ---标签管理 added by zhengsongbo on 2025-08-01--- */
.search-div.nav { .search-div.nav {
display: flex; display: block;
flex-direction: column;
height: auto;
min-height: 100px;
}
.hot-tags-area {
width: 100%; width: 100%;
margin-top: 15px; clear: both;
} }
.option-item { .option-item {
margin: 0px 5px; margin: 0px 5px;
} }
@@ -2684,7 +2672,7 @@ a.custom2 {
.hot-tags-container { .hot-tags-container {
display: inline-block; display: inline-block;
//white-space: nowrap; white-space: nowrap;
overflow-x: auto; overflow-x: auto;
vertical-align: top; vertical-align: top;
} }
@@ -2717,6 +2705,16 @@ a.custom2 {
color: #387DF7 !important; // 匹配时的蓝色 color: #387DF7 !important; // 匹配时的蓝色
} }
/* 添加热点标签容器样式，支持换行 */
.hot-tags-wrapper {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
padding-top: 2px;
//margin-left: 90px; /* 为"热点标签:"文本留出空间 */
}
/* 调整option-item样式以适应换行布局 */ /* 调整option-item样式以适应换行布局 */
.option-item { .option-item {
position: relative; position: relative;
@@ -2747,32 +2745,5 @@ a.custom2 {
gap: 5px; gap: 5px;
} }
} }
/* ---end--- */
.hot-tags-wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, max-content));
gap: 15px 20px;
align-items: center;
justify-items: start;
width: 100%;
padding: 10px 0;
}
.hot-tags-wrapper .option-item {
position: relative;
cursor: pointer;
white-space: nowrap;
padding: 5px 10px;
text-align: center;
}
.course-tags {
margin: 5px 0;
min-height: 20px;
}
.course-tag-item {
color: #333333;
}
.course-tag-item[style*="color: #387DF7"] {
color: #387DF7 !important;
}
</style> </style>