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

Merge branch 'master-20251023-tag' into merge-20251113-tag

Browse Source 
# Conflicts:
#	src/components/Course/courseTag.vue
This commit is contained in:
670788339
2025-11-17 13:28:18 +08:00
parent 7316215809 c801dc8a3d
commit 322172edec
4 changed files with 306 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/Course/courseForm.vue
View File

@@ -45,18 +45,18 @@
<!-- 蒙层引导组件 --> <!-- 蒙层引导组件 -->
<div v-if="showGuidance" class="guidance-overlay" @click="closeGuidance"> <div v-if="showGuidance" class="guidance-overlay" @click="closeGuidance">
<div class="guidance-content"> <div class="guidance-content">
<div class="guidance-title">新功能引导</div> <div class="guidance-title"></div> <!--新功能引导-->
<div class="guidance-steps"> <div class="guidance-steps">
<div class="guidance-step" :class="{ active: currentStep === 1 }"> <div class="guidance-step" :class="{ active: currentStep === 1 }">
<div class="step-number">1</div> <div class="step-number"></div>
<div class="step-content"> <div class="step-content">
<div class="step-title">用标签为课程精准定位，吸引更多学员！可从以下维度构思：</div> <div class="step-title">用标签为课程精准定位，吸引更多学员！可从以下维度构思：</div>
<div class="step-desc">✨ 讲领域（如：品质管理）</div> <div class="step-desc" style="padding-left: 20px;">✨ 讲领域（如：品质管理）</div>
<div class="step-desc">✨ 教技能（如：沟通技巧）</div> <div class="step-desc" style="padding-left: 20px;">✨ 教技能（如：沟通技巧）</div>
<div class="step-desc">✨ 涉内容（如：5W1H分析法）</div> <div class="step-desc" style="padding-left: 20px;">✨ 涉内容（如：5W1H分析法）</div>
</div> </div>
</div> </div>
<!-- <div class="guidance-step" :class="{ active: currentStep === 2 }"> <!-- <div class="guidance-step" :class="{ active: currentStep === 2 }">
<div class="step-number">2</div> <div class="step-number">2</div>
<div class="step-content"> <div class="step-content">
<div class="step-title">添加课程标签</div> <div class="step-title">添加课程标签</div>
@@ -75,7 +75,7 @@
</div> </div>
<!-- 高亮指引元素 --> <!-- 高亮指引元素 -->
<!-- <div v-if="showGuidance" class="highlight-element" :style="highlightStyle"></div>--> <!-- <div v-if="showGuidance" class="highlight-element" :style="highlightStyle"></div>-->
<!--微课--> <!--微课-->
@@ -114,11 +114,14 @@
</el-cascader> </el-cascader>
</el-form-item> </el-form-item>
<el-form-item label="标签" required class="guidance-highlight" data-step="1"> <el-form-item label="标签" required class="guidance-highlight" data-step="1" style="display: flex" >
<courseTag ref="courseTag" :courseId="curCourseId" :sysTypeList="sysTypeList" <courseTag ref="courseTag" :courseId="curCourseId" :sysTypeList="sysTypeList"
:initialTags="courseTags" @change="handleTagsChange" :initialTags="courseTags" @change="handleTagsChange"
@focus="onTagFocus"> @focus="onTagFocus" style="width: 95%;">
</courseTag> </courseTag>
<el-tooltip content="点击查看标签新功能引导" placement="top">
<i class="el-icon-question" style="color: #409EFF; cursor: pointer;" @click="handleTagHelp"></i>
</el-tooltip>
</el-form-item> </el-form-item>
<el-form-item label="资源归属" required> <el-form-item label="资源归属" required>
@@ -303,11 +306,14 @@
</el-select> --> </el-select> -->
<choice :teacherValue="teacherValues" @getTeacherList="getTeacherList"></choice> <choice :teacherValue="teacherValues" @getTeacherList="getTeacherList"></choice>
</el-form-item> </el-form-item>
<el-form-item label="标签" required class="guidance-highlight" data-step="1"> <el-form-item label="标签" required class="tag-from-item" data-step="1" >
<courseTag ref="courseTag" :courseId="curCourseId" :sysTypeList="sysTypeList" <courseTag ref="courseTag" :courseId="curCourseId" :sysTypeList="sysTypeList"
:initialTags="courseTags" @change="handleTagsChange" :initialTags="courseTags" @change="handleTagsChange"
@focus="onTagFocus"> @focus="onTagFocus" >
</courseTag> </courseTag>
<el-tooltip content="点击查看标签新功能引导" placement="top">
<i class="el-icon-question" style="color: #409EFF; cursor: pointer;" @click="handleTagHelp"></i>
</el-tooltip>
</el-form-item> </el-form-item>
<el-form-item label="关键字"> <el-form-item label="关键字">
@@ -647,6 +653,9 @@ export default {
this.loadUserGroup(); this.loadUserGroup();
}, },
methods: { methods: {
handleTagHelp(){
this.checkAndShowGuidance();
},
// 关键字的更改 // 关键字的更改
changeKeywords(option){ changeKeywords(option){
if(option.target.value){ if(option.target.value){
@@ -955,26 +964,26 @@ export default {
this.curCourseId = this.courseInfo.id this.curCourseId = this.courseInfo.id
console.log('保存课程成功',this.curCourseId) console.log('保存课程成功',this.curCourseId)
console.log('isTip ',this.courseInfo.isTip) console.log('isTip ',this.courseInfo.isTip)
if(this.courseInfo.isTip){ // if(this.courseInfo.isTip){
// 检查是否为首次创建，显示引导 // // 检查是否为首次创建，显示引导
this.checkAndShowGuidance(); // this.checkAndShowGuidance();
} // }
if (this.courseChooseId == 1) { if (this.courseChooseId == 1) {
this.weike.dlgShow = true; this.weike.dlgShow = true;
} else { } else {
this.biaoke.dlgShow = true; this.biaoke.dlgShow = true;
} }
this.$nextTick(() => { // this.$nextTick(() => {
this.initTagComponent(); // this.initTagComponent();
// 如果显示引导，初始化高亮元素 // // 如果显示引导，初始化高亮元素
if (this.showGuidance) { // if (this.showGuidance) {
this.$nextTick(() => { // this.$nextTick(() => {
this.initGuidanceElements(); // this.initGuidanceElements();
this.highlightCurrentStep(); // this.highlightCurrentStep();
}); // });
} // }
}); // });
} else { } else {
this.$message.error(rs.message); this.$message.error(rs.message);
} }
@@ -983,15 +992,15 @@ export default {
// 检查并显示引导 // 检查并显示引导
checkAndShowGuidance() { checkAndShowGuidance() {
// 检查本地存储，判断是否为首次创建 // 检查本地存储，判断是否为首次创建
const hasShownGuidance = localStorage.getItem('course_creation_guidance_shown'); // const hasShownGuidance = localStorage.getItem('course_creation_guidance_shown');
if (!hasShownGuidance) { // if (!hasShownGuidance) {
this.showGuidance = true; this.showGuidance = true;
this.currentStep = 1; this.currentStep = 1;
this.isFirstCreate = true; this.isFirstCreate = true;
// 标记引导已显示 // 标记引导已显示
localStorage.setItem('course_creation_guidance_shown', 'true'); localStorage.setItem('course_creation_guidance_shown', 'true');
apiCourse.saveTip(); // apiCourse.saveTip();
} // }
}, },
// 初始化引导元素 // 初始化引导元素
initGuidanceElements() { initGuidanceElements() {
@@ -2012,9 +2021,9 @@ export default {
} }
.step-number { .step-number {
width: 24px; //width: 24px;
height: 24px; height: 24px;
background: #409EFF; //background: #409EFF;
color: white; color: white;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
@@ -2060,4 +2069,26 @@ export default {
position: relative; position: relative;
z-index: 10001; z-index: 10001;
} }
//.el-form-item__content {
// display: flex;
// width: 80%;
// .tag-container {
// width: 95%;
// }
//}
.tag-from-item .el-form-item__content {
margin-left: 0 !important;
display: flex;
//align-items: center;
.tag-container {
width: 95%;
}
}
.guidance-highlight .el-form-item__content {
margin-left: 0 !important;
display: flex;
width: 75%;
}
</style> </style>

2
src/components/Course/courseTag.vue
View File

@@ -217,7 +217,9 @@ export default {
this.$emit('change', this.displayTags); this.$emit('change', this.displayTags);
this.clearInput(); this.clearInput();
this.$nextTick(() => {
this.$refs.tagSelect.visible = false; this.$refs.tagSelect.visible = false;
});
}, },
clearInput() { clearInput() {

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

@@ -71,25 +71,21 @@
<!-- 内容导航 --> <!-- 内容导航 -->
<div class="topNav" v-if="!newData"> <div class="topNav" v-if="!newData">
<div class="search-div nav" style="flex: 1;height: auto;background: #fff;"> <div class="search-div nav" style="flex: 1;height: auto;background: #fff;">
<div class="nav-primary" style="gap: 15px;display: flex"> <div class="nav-primary" style="gap: 15px;display: flex;margin-top: 20px;">
<div @click="handleTypeAllClick(1)" class="option-item" style="position: relative;" :class="{ 'option-active': ctypeTagAll }"> <div @click="handleTypeAllClick(1)" class="option-item" style="position: relative;" :class="{ 'option-active': ctypeTagAll }">
<a>全部</a> <a>全部</a>
<span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span>
</div> </div>
<div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item" <div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item"
:class="{ 'option-active': ctypeList[0].checked }"> :class="{ 'option-active': ctypeList[0].checked }">
<a>录播课</a> <a>录播课</a>
<span :class="ctypeList[0].checked ? 'nav-bottbor' : ''"></span>
</div> </div>
<div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item" <div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item"
:class="{ 'option-active': ctypeList[1].checked }"> :class="{ 'option-active': ctypeList[1].checked }">
<a>线下课</a> <a>线下课</a>
<span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span>
</div> </div>
<div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item" <div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item"
:class="{ 'option-active': ctypeList[2].checked }"> :class="{ 'option-active': ctypeList[2].checked }">
<a>学习项目</a> <a>学习项目</a>
<span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>
</div> </div>
<a class="option-item"> <a class="option-item">
<span @click="uClassClick" class="Uxtext" > U选小课堂 <span @click="uClassClick" class="Uxtext" > U选小课堂
@@ -100,19 +96,19 @@
</a> </a>
</div> </div>
<!-- 修改热点标签区域 --> <!-- 修改热点标签区域 -->
<div style="margin-top:10px;flex: 1;"> <div style="margin:20px 0;flex: 1;">
<!-- 修改热点标签容器，支持换行 --> <!-- 修改热点标签容器，支持换行 -->
<div class="hot-tags-wrapper"> <div>
<div class="hot-tags-wrapper"> <div style="display: flex">
<div <div
class="option-item" style=" padding-top: 2px;" class="option-item" style=" padding-top: 2px;"
:class="{ 'option-active': isAllHotTagsSelected }" :class="{ 'option-active': isAllHotTagsSelected }"
@click="handleClearHotTags" @click="handleClearHotTags"
> >
<span>全部</span> <span>全部</span>
<span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span>
</div> </div>
<div class="fieldbox" style="padding-left: 15px;">
<div <div
class="option-item" style=" padding-top: 2px;" class="option-item" style=" padding-top: 2px;"
v-for="tag in hotTagsList" v-for="tag in hotTagsList"
@@ -120,10 +116,12 @@
@click="handleTagClick(tag, hotTagsList,1)" @click="handleTagClick(tag, hotTagsList,1)"
:class="{ 'option-active': tag.checked }" :class="{ 'option-active': tag.checked }"
> >
<span>{{tag.tagName}}</span> <span>{{tag.tagName}} </span>
<span :class="tag.checked ? 'nav-bottbor' : ''"></span> <!-- <span :class="tag.checked ? 'nav-bottbor' : ''"></span>-->
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -253,10 +251,6 @@
</template> </template>
<!-- 暂无数据 --> <!-- 暂无数据 -->
<div class="pagination-div"> <div class="pagination-div">
<!-- <span class="pag-text" @click="loadMore()"
v-if="moreState == 1 && courseList.length >= course.pageSize">加载更多</span> -->
<!-- <span class="pag-text-msg" v-if="moreState == 2">数据加载中</span> -->
<!-- <span class="pag-text-msg" v-else-if="moreState == 3 && courseList.length > 0">没有更多数据了</span> -->
<span class="notcoures" v-if="moreState == 3 && courseList.length == 0"> <span class="notcoures" v-if="moreState == 3 && courseList.length == 0">
<img :src="`${webBaseUrl}/images/nocouresimg.png`" alt=""> <img :src="`${webBaseUrl}/images/nocouresimg.png`" alt="">
<h5>暂无课程，请优先学习其它课程吧～</h5> <h5>暂无课程，请优先学习其它课程吧～</h5>
@@ -1784,7 +1778,7 @@ export default {
.nav-bottbor { .nav-bottbor {
position: absolute; position: absolute;
top: 130%; top: 100%;
left: 0; left: 0;
width: 100%; width: 100%;
height: 4px; height: 4px;
@@ -2012,13 +2006,6 @@ export default {
color: #999; color: #999;
} }
.couderbox {
// width: 5px;
// padding: 0;
// display: inline-block;
// text-align: center;
}
.coures-border { .coures-border {
width: 2px; width: 2px;
height: 15px; height: 15px;
@@ -2262,16 +2249,6 @@ export default {
left: 98%; left: 98%;
} }
// .el-radio-button{
// margin-right: 10px;
// margin-bottom: 10px;
// .el-radio-button__inner{
// background: #fff;
// border: none;
// height: 20px;
// }
// }
::v-deep .el-radio-button__inner, ::v-deep .el-radio-button__inner,
.el-radio-group { .el-radio-group {
vertical-align: top; vertical-align: top;
@@ -2325,13 +2302,6 @@ export default {
} }
} }
.searchbar {
//background-color: #ffffff;
// border: 1px solid #f3f3f3;
// width: 900px;
// padding: 5px 20px;
}
.fixed { .fixed {
position: fixed; position: fixed;
top: 0px; top: 0px;
@@ -2423,14 +2393,6 @@ export default {
} }
} }
// .tip{
// color:#999999;
// font-size: 12px;
// >span{
// margin-right: 8px;
// cursor: pointer;
// }
// }
.search-item { .search-item {
// padding: 10px 0; // padding: 10px 0;
} }
@@ -2473,30 +2435,6 @@ export default {
} }
} }
} }
// .course-form {
// width: 100%;
// margin: 10px 0;
// ::v-deep.el-button {
// width: 100%;
// color: #fff;
// }
// }
// .right-box {
// .add-btn {
// width: 100%;
// padding: 15px 0;
// }
// .ranking-card {
// margin-top: 0px;
// }
// .ranking-data {
// margin: 10px 0;
// color: #999999;
// }
// }]
.search-item-type { .search-item-type {
line-height: 25px; line-height: 25px;
padding-right: 10px; padding-right: 10px;
@@ -2550,22 +2488,12 @@ export default {
padding: 0 !important; padding: 0 !important;
} }
/* ---end--- */ /* ---end--- */
// 2025-11-07 10:00 修改
.search-div.nav { .search-div.nav {
display: block; display: block;
width: 100%; width: 100%;
clear: both; clear: both;
} }
//.search-div.nav {
// display: flex;
// flex-direction: column;
// height: auto;
// min-height: 100px;
//}
//.hot-tags-area {
// width: 100%;
// margin-top: 15px;
//}
.option-item { .option-item {
margin: 0px 5px; margin: 0px 5px;
@@ -2614,22 +2542,6 @@ a.custom2 {
display: none; display: none;
} }
/* 添加标签样式 */
//.course-tags {
// margin: 5px 0;
// min-height: 20px;
//}
//.course-tags ::v-deep .el-tag {
// color: #387DF7 !important;
// border-color: #387DF7 !important;
//}
//.course-tags ::v-deep .el-tag .el-tag__close {
// color: #387DF7 !important;
//}
//.course-tags ::v-deep .el-tag .el-tag__close:hover {
// background-color: #387DF7 !important;
// color: white !important;
//}
.course-tag-item { .course-tag-item {
color: #333333; // 默认深灰色 color: #333333; // 默认深灰色
@@ -2648,7 +2560,7 @@ a.custom2 {
/* 保持原有的导航底部横线样式 */ /* 保持原有的导航底部横线样式 */
.nav-bottbor { .nav-bottbor {
position: absolute; position: absolute;
top: 130%; top: 100%;
left: 0; left: 0;
width: 100%; width: 100%;
height: 4px; height: 4px;
@@ -2668,7 +2580,7 @@ a.custom2 {
gap: 5px; gap: 5px;
} }
} }
// 2025-11-07 10:00 修改
.hot-tags-wrapper { .hot-tags-wrapper {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -2676,22 +2588,7 @@ a.custom2 {
align-items: center; align-items: center;
padding-top: 2px; padding-top: 2px;
} }
//.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 { .course-tags {
margin: 5px 0; margin: 5px 0;
min-height: 20px; min-height: 20px;
@@ -2738,4 +2635,23 @@ a.custom2 {
background-color: transparent !important; background-color: transparent !important;
} }
.fieldbox {
display: flex;
white-space: nowrap;
flex-wrap: wrap;
div {
margin: 0 15px;
display: inline-block;
font-size: 14px;
line-height: 25px;
//color: #3d3d3d;
font-weight: 500;
}
.fieldactive {
color: #387DF7;
}
}
</style> </style>

249
src/views/portal/course/qualityCourse.vue
View File

@@ -56,23 +56,23 @@
<div class="topNav" v-if="!newData" style="display: flex; flex-direction: row;background-color:#fff;"> <div class="topNav" v-if="!newData" style="display: flex; flex-direction: row;background-color:#fff;">
<!-- 修改后 --> <!-- 修改后 -->
<div class="search-div nav" style="flex: 1;height: auto;"> <div class="search-div nav" style="flex: 1;height: auto;">
<div class="nav-primary" style="display: flex; justify-content: space-between; align-items: center;"> <div class="nav-primary" style="display: flex; justify-content: space-between; align-items: center;margin-top: 15px;">
<div style="display: flex;"> <div style="display: flex;">
<div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item" <div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item"
: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" <div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item"
:class="{ 'option-active': ctypeList[1].checked }" style="padding-left: 15px;"> :class="{ 'option-active': ctypeList[1].checked }" style="padding-left: 15px;">
<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" <div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item"
:class="{ 'option-active': ctypeList[2].checked }" style="padding-left: 15px;"> :class="{ 'option-active': ctypeList[2].checked }" style="padding-left: 15px;">
<a>外部精选</a> <a>外部精选</a>
<span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span> <!-- <span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>-->
</div> </div>
</div> </div>
@@ -90,36 +90,82 @@
</div> </div>
</div> </div>
<div style="margin-top:10px;flex: 1;"> <!-- <div style="margin-top:10px;flex: 1;">-->
<!-- 修改热点标签容器，支持换行 --> <!-- &lt;!&ndash; 修改热点标签容器，支持换行 &ndash;&gt;-->
<div class="hot-tags-wrapper" style="display: flex;"> <!-- <div class="hot-tags-wrapper" style="display: flex;">-->
<div class="hot-tags-wrapper" style="display: flex; align-items: center;"> <!-- <div class="hot-tags-wrapper" style="display: flex; align-items: center;">-->
<div <!-- <div-->
class="option-item" <!-- class="option-item"-->
style=" padding-top: 2px; margin-left: 15px;" <!-- style=" padding-top: 2px; margin-left: 15px;"-->
:class="{ 'option-active': isAllHotTagsSelected }" <!-- :class="{ 'option-active': isAllHotTagsSelected }"-->
@click="handleClearHotTags" <!-- @click="handleClearHotTags"-->
> <!-- >-->
<span>全部</span> <!-- <span>全部</span>-->
<span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span> <!-- </div>-->
</div>
<div <!-- <div-->
class="option-item" <!-- class="option-item"-->
style=" padding-top: 2px;" <!-- style=" padding-top: 2px;"-->
<!-- v-for="tag in hotTagsList"-->
<!-- :key="tag.id"-->
<!-- @click="handleTagClick(tag, hotTagsList,1)"-->
<!-- :class="{ 'option-active': tag.checked }"-->
<!-- >-->
<!-- <span>{{tag.tagName}}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div style="margin:20px 0;flex: 1;">-->
<!-- <div>-->
<!-- <div style="display: flex">-->
<!-- <div-->
<!-- class="option-item" style=" padding-top: 2px;"-->
<!-- :class="{ 'option-active': isAllHotTagsSelected }"-->
<!-- @click="handleClearHotTags"-->
<!-- >-->
<!-- <span>全部</span>-->
<!-- </div>-->
<!-- <div class="fieldbox" style="padding-left: 15px;">-->
<!-- <div-->
<!-- class="option-item" style=" padding-top: 2px;"-->
<!-- v-for="tag in hotTagsList"-->
<!-- :key="tag.id"-->
<!-- @click="handleTagClick(tag, hotTagsList,1)"-->
<!-- :class="{ 'option-active': tag.checked }"-->
<!-- >-->
<!-- <span>{{tag.tagName}} </span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div style="margin:20px 0;flex: 1;">
<div>
<div style="display: flex">
<div class="option-item" style="padding-top: 2px;min-width: 33px;"
:class="{ 'option-active': isAllHotTagsSelected }"
@click="handleClearHotTags">
<span>全部</span>
</div>
<div class="fieldbox" style="padding-left: 15px;">
<div class="option-item" style="padding-top: 2px;"
v-for="tag in hotTagsList" v-for="tag in hotTagsList"
:key="tag.id" :key="tag.id"
@click="handleTagClick(tag, hotTagsList,1)" @click="handleTagClick(tag, hotTagsList,1)"
:class="{ 'option-active': tag.checked }" :class="{ 'option-active': tag.checked }">
>
<span>{{tag.tagName}}</span> <span>{{tag.tagName}}</span>
<span :class="tag.checked ? 'nav-bottbor' : ''"></span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<!-- 清除 --> <!-- 清除 -->
@@ -444,6 +490,9 @@ export default {
}); });
return !flag; return !flag;
}, },
isAllHotTagsSelected() {
return !this.hotTagsList.some(tag => tag.checked);
}
}, },
data() { data() {
return { return {
@@ -711,15 +760,12 @@ export default {
}, },
// isAllHotTagsSelected() {
// return !this.hotTagsList.some(tag => tag.checked);
// },
handleClearHotTags() { handleClearHotTags() {
// 清除所有热点标签的选中状态 // 清除所有热点标签的选中状态
this.hotTagsList.forEach(tag => { this.hotTagsList.forEach(tag => {
tag.checked = false; tag.checked = false;
}); });
this.isAllHotTagsSelected = true;
// 清空course.tags // 清空course.tags
this.course.tags = ''; this.course.tags = '';
@@ -1607,29 +1653,29 @@ export default {
} }
// 导航 // 导航
.topNav { //.topNav {
display: flex; // display: flex;
margin-bottom: 20px; // margin-bottom: 20px;
//
.nav { // .nav {
display: flex; // display: flex;
align-items: center; // align-items: center;
//
.option-item { // .option-item {
position: relative; // position: relative;
//
.nav-bottbor { // .nav-bottbor {
position: absolute; // position: absolute;
top: 130%; // top: 130%;
left: 0; // left: 0;
width: 100%; // width: 100%;
height: 4px; // height: 4px;
background: #387DF7; // background: #387DF7;
border-radius: 5px; // border-radius: 5px;
} // }
} // }
} // }
} //}
.u-class { .u-class {
::v-deep .el-dialog { ::v-deep .el-dialog {
@@ -2313,11 +2359,11 @@ export default {
align-items: center; align-items: center;
padding-top: 2px; padding-top: 2px;
} }
.search-div.nav { //.search-div.nav {
display: block; // display: block;
width: 100%; // width: 100%;
clear: both; // clear: both;
} //}
.search-item-type { .search-item-type {
line-height: 25px; line-height: 25px;
padding-right: 10px; padding-right: 10px;
@@ -2325,14 +2371,14 @@ export default {
white-space: nowrap; white-space: nowrap;
} }
.option-item { //.option-item {
font-family: "Menlo", "苹方-简" !important; // font-family: "Menlo", "苹方-简" !important;
color: #3d3d3d; // color: #3d3d3d;
display: inline-block; // display: inline-block;
font-size: 14px; // font-size: 14px;
margin: 0px 15px; // margin: 0px 15px;
cursor: pointer // cursor: pointer
} //}
.option-border { .option-border {
width: 2px; width: 2px;
@@ -2342,6 +2388,63 @@ export default {
background: #666; background: #666;
} }
.topNav {
display: flex;
margin-bottom: 20px;
height: auto;
min-height: 80px;
align-items: center;
.nav {
display: flex;
align-items: center;
.option-item {
position: relative;
margin: 0 15px;
cursor: pointer;
.nav-bottbor {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 4px;
background: #387DF7;
border-radius: 5px;
}
}
}
}
.search-div.nav {
display: block;
width: 100%;
clear: both;
}
.option-item {
margin: 0px 5px;
}
.fieldbox {
display: flex;
white-space: nowrap;
flex-wrap: wrap;
div {
margin: 0 15px;
display: inline-block;
font-size: 14px;
line-height: 25px;
font-weight: 500;
}
.fieldactive {
color: #387DF7;
}
}
.option-active { .option-active {
color: #387DF7; color: #387DF7;
} }
@@ -2380,4 +2483,24 @@ export default {
font-weight: bold; font-weight: bold;
background-color: transparent !important; background-color: transparent !important;
} }
//.fieldbox {
//
// display: flex;
// white-space: nowrap;
// flex-wrap: wrap;
//
// div {
// margin: 0 15px;
// display: inline-block;
// font-size: 14px;
// line-height: 25px;
// //color: #3d3d3d;
// font-weight: 500;
// }
//
// .fieldactive {
// color: #387DF7;
// }
//}
</style> </style>