mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-14 05:16:43 +08:00
2507 lines
71 KiB
Vue
2507 lines
71 KiB
Vue
<template>
|
||
<div id="couser-list-content" class="couser-list-content">
|
||
<div class="course-banner">
|
||
<portal-header current="course" textColor="#fff" :keywords="keyword" @emitInput="emitInput"
|
||
@showClass="showClass"></portal-header>
|
||
</div>
|
||
<div style="padding-top:30px">
|
||
<div class="xcontent2">
|
||
</div>
|
||
<div class="xcontent2">
|
||
<!-- 左侧三级 -->
|
||
<div class="xcontent2-minor" style="margin-right:36px;">
|
||
<div class="course-title-style">
|
||
<div class="imgTilte">
|
||
<div>精品课程</div>
|
||
</div>
|
||
</div>
|
||
<div class="course-list">
|
||
<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-two" v-for="(twoList, twoIndex) in one.children" :key="twoList.id"
|
||
@click.stop="handleOptionClick(twoList, 2, one.children)"
|
||
: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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="fixd-box">
|
||
|
||
</div>
|
||
</div>
|
||
<!-- 右侧 -->
|
||
<div class="xcontent2-main content-div">
|
||
|
||
<!-- 内容导航 -->
|
||
<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="nav-primary" style="display: flex; justify-content: space-between; align-items: center;margin-top: 15px;">
|
||
<div style="display: flex;">
|
||
<div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item"
|
||
:class="{ 'option-active': ctypeList[0].checked }">
|
||
<a>全部</a>
|
||
<!-- <span :class="ctypeList[0].checked ? 'nav-bottbor' : ''"></span>-->
|
||
</div>
|
||
|
||
<div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item"
|
||
:class="{ 'option-active': ctypeList[1].checked }" style="padding-left: 15px;">
|
||
<a>内部专享</a>
|
||
<!-- <span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span>-->
|
||
</div>
|
||
<div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item"
|
||
:class="{ 'option-active': ctypeList[2].checked }" style="padding-left: 15px;">
|
||
<a>外部精选</a>
|
||
<!-- <span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>-->
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: center;">
|
||
<span style="margin-right: 10px;" class="option-item">请选择年份 </span>
|
||
<el-select v-model="yearChosen" multiple style="width: 150px;">
|
||
<el-option
|
||
v-for="year in years"
|
||
v-if="year"
|
||
:key="year"
|
||
:label="year"
|
||
:value="year">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div style="margin-top:10px;flex: 1;">-->
|
||
<!-- <!– 修改热点标签容器，支持换行 –>-->
|
||
<!-- <div class="hot-tags-wrapper" style="display: flex;">-->
|
||
<!-- <div class="hot-tags-wrapper" style="display: flex; align-items: center;">-->
|
||
<!-- <div-->
|
||
<!-- class="option-item"-->
|
||
<!-- style=" padding-top: 2px; margin-left: 15px;"-->
|
||
<!-- :class="{ 'option-active': isAllHotTagsSelected }"-->
|
||
<!-- @click="handleClearHotTags"-->
|
||
<!-- >-->
|
||
<!-- <span>全部</span>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <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 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"
|
||
:key="tag.id"
|
||
@click="handleTagClick(tag, hotTagsList,1)"
|
||
:class="{ 'option-active': tag.checked }">
|
||
<span>{{tag.tagName}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<!-- 清除 -->
|
||
<div v-if="stagList.length > 0 && !newData" class="search-div" style="padding: 0;margin-bottom: 20px;">
|
||
<div class="searchbar" style="background-color:#f6f7fb;display: flex;justify-content: space-between;">
|
||
<div style="line-height: 30px;">
|
||
<span class="item-title"> 搜索条件</span>
|
||
<el-tag closable v-for="(tag, tagIdx) in stagList" :key="'t' + tagIdx" @close="stagClose(tag, tagIdx)">{{
|
||
tag.name }}</el-tag>
|
||
</div>
|
||
<div>
|
||
<el-button type="primary" size="mini" @click="handleClearTags">清除</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 标题最新最热好评率 -->
|
||
<div class="xcourse-list" style="background-color: #fff;border-radius: 8px;padding:0 25px;">
|
||
<div class="order-div" v-if="!newData">
|
||
<span class="quyer-tag">
|
||
<el-button type="text" class="order-class" @click="orderChange('DEFAULT')"
|
||
:class="{ actice: course.orderField == 'DEFAULT' }">全部课程</el-button>
|
||
<el-button type="text" class="order-class" @click="orderChange('HOT')"
|
||
:class="{ actice: course.orderField == 'HOT' }">最热</el-button>
|
||
<el-button type="text" class="order-class" @click="orderChange('NEW')"
|
||
:class="{ actice: course.orderField == 'NEW' }">最新</el-button>
|
||
<el-button type="text" class="order-class" @click="orderChange('GOOD')"
|
||
:class="{ actice: course.orderField == 'GOOD' }">好评率</el-button>
|
||
</span>
|
||
<span class="order-count">
|
||
共找到<span>{{ count }}</span>个结果
|
||
</span>
|
||
</div>
|
||
<template v-if="!newData">
|
||
<div class="xcourse-card" v-for="(cinfo, cidx) in courseList" :key="cinfo.id">
|
||
<div class="course-card" style="padding: 10px;">
|
||
<a @click="toCourseDetail(cinfo)">
|
||
<div class="course-img-box">
|
||
<course-image :text="true" :course="cinfo"></course-image>
|
||
<span v-if="cinfo.type == 20 || 10" class="course-type-left">录播课</span>
|
||
<span v-if="cinfo.type == 30" class="course-type-left">线下课</span>
|
||
<span v-if="cinfo.type == 40" class="course-type-left">学习项目</span>
|
||
</div>
|
||
<div class="course-title two-line-ellipsis" :title="cinfo.title" v-html="cinfo.courseName"></div>
|
||
<!-- 添加标签显示区域 -->
|
||
<div class="course-tags" v-if="cinfo.tagsList && cinfo.tagsList.length > 0">
|
||
<el-tag
|
||
v-for="(tag, tagIndex) in cinfo.tagsList"
|
||
:key="tagIndex"
|
||
size="mini"
|
||
type="info"
|
||
style="margin: 2px 2px; border-radius: 2px;"
|
||
>
|
||
<span v-html="highlightTagKeyword(tag)"></span>
|
||
</el-tag>
|
||
</div>
|
||
<!-- 关键字 -->
|
||
<div class="keywordInfo-every">
|
||
<div class="keywordInfo" v-for="(keyword, index) in cinfo.keywordsActive" :key="index">
|
||
<el-tooltip popper-class="keywordInfo-class" :visible-arrow="false"
|
||
:disabled="!keyword.showTitle">
|
||
<template #content>
|
||
<span v-html="keyword.title"></span>
|
||
</template>
|
||
<div class="keyword-content" v-html="keyword.name"></div>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
<!-- {{cinfo}}-->
|
||
<div class="couresstartTime">
|
||
<span v-if="cinfo.type == 30 && cinfo.startTime">开课时间：{{ cinfo.startTime }}</span>
|
||
</div>
|
||
<div class="course-info">
|
||
<div class="course-info-user" style="max-width: 100px;" v-if="cinfo.teacherName">
|
||
<el-tooltip :content="cinfo.teacherName.split(',')[0]" placement="bottom" effect="light">
|
||
<span class="course-info-author">{{ cinfo.teacherName.split(',')[0] }}</span>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="course-info-user">
|
||
<span class="course-info-studys">{{ formatNum(cinfo.studyNum) }}人学习</span>
|
||
</div>
|
||
<div class="course-info-score">
|
||
<div style="display: flex;">
|
||
<interactBar :type="1" nodeWidth="20px" :data="cinfo" :courseExclusive="true" :comments="false"
|
||
:praises="false" :shares="false" :views="false"></interactBar>
|
||
<div v-if="cinfo.courseScore">
|
||
<span class="course-score-value">{{ toScore(cinfo.courseScore) }}分</span>
|
||
</div>
|
||
<div v-else class="course-score-no">未评分</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<!-- 线上品牌系列课程 -->
|
||
<template v-if="newData">
|
||
<div class="xcourse-card" v-for="cinfo in courseList" :key="cinfo.id" style="margin-bottom: 0;margin-top: 36px;">
|
||
<div class="course-card" style="padding: 10px;">
|
||
<a @click="() => $message.success('如需了解详情，请联系BOEU')">
|
||
<div class="course-img-box">
|
||
<course-image :text="true" :course="cinfo"></course-image>
|
||
</div>
|
||
<div class="course-title two-line-ellipsis" :title="cinfo.title" v-html="cinfo.name"></div>
|
||
<div class="course-title two-line-ellipsis">
|
||
{{ cinfo.remark }}
|
||
</div>
|
||
<div class="course-info">
|
||
<div class="course-info-user">
|
||
<span class="course-info-author" v-if="cinfo.teacher" v-html="cinfo.teacher"></span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<!-- 暂无数据 -->
|
||
<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">
|
||
<img :src="`${webBaseUrl}/images/nocouresimg.png`" alt="">
|
||
<h5>当前分类下暂未标记精品课</h5>
|
||
</span>
|
||
<div v-if="courseList.length > 0">
|
||
<pagination :size="course.pageSize" :total="Number(count)" :page="course.pageIndex"
|
||
layout="total, prev, pager, next, jumper" @change-page="currentChange"></pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<portal-footer></portal-footer>
|
||
<portalFloatTools ref="floatTools"></portalFloatTools>
|
||
<!-- U课堂弹窗 -->
|
||
<div class="u-class">
|
||
<el-dialog :visible.sync="showUClass" width="833px">
|
||
<div class="ClassBoxContent">
|
||
<img src="../../../assets/images/u_class.png" alt="" class="img" />
|
||
<div class="ContentBox">
|
||
<div class="left">
|
||
<div class="title">U选小课堂</div>
|
||
<div class="jy">项目简介</div>
|
||
<div class="msg">
|
||
于22年首推，是一个面向全集团员工开放的职业通识类数字化培养项目，旨在帮助员工开阔眼界、加厚职业素养。在原有外部精选通用力课程基础上，2023年引入创新专区，以新鲜的话题、新颖的形式，带给全员丰富、有趣的学习体验。
|
||
</div>
|
||
<div class="bottom"></div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="tyl" @click="tylClick">
|
||
<div class="tyl_title">
|
||
<img src="../../../assets/images/dc.png" alt="" class="tyl_title_img" />
|
||
<span class="tyl_title_msg">通用力专区</span>
|
||
</div>
|
||
<div class="tyl_jy">加厚职业素养，轻学习、快成长！</div>
|
||
<div class="tyl_msg">
|
||
内容涵盖：领导力、市场营销、职场技能、财务知识、法律常识、人力资源、经典国学、人文社科
|
||
</div>
|
||
</div>
|
||
<div class="text_msg">
|
||
创新力专区课程版权已到期！
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {mapActions, mapGetters} from "vuex";
|
||
import couresinteract from '@/components/Portal/course/couresinteract.vue';
|
||
import portalHeader from "@/components/PortalHeader.vue";
|
||
import portalFooter from "@/components/PortalFooter.vue";
|
||
import portalFloatTools from "@/components/PortalFloatTools.vue";
|
||
import authorInfo from "@/components/Portal/authorInfo.vue";
|
||
import courseItem from "@/components/Portal/course/courseItem.vue";
|
||
import apiCourseStudy from "@/api/modules/courseStudy.js";
|
||
import courseForm from "@/components/Course/courseForm.vue";
|
||
import apiType from "@/api/modules/type.js";
|
||
import apiCourse from "@/api/modules/coursePortal.js";
|
||
import scene from "@/api/modules/scene.js";
|
||
import apiUserbasic from "@/api/boe/userbasic.js";
|
||
import interactBar from "@/components/Portal/interactBar.vue";
|
||
import courseImage from "@/components/Course/courseImage.vue";
|
||
import {formatDate, formatUserNumber, toScore} from "@/utils/tools.js";
|
||
import apiSearchterm from "@/api/modules/searchterm.js";
|
||
import apiPlace from "@/api/phase2/place.js"
|
||
import {qualityCourseTimeMark, qualityPageList} from "@/api/phase2"
|
||
import apiCourseTag from '@/api/modules/courseTag.js'
|
||
export default {
|
||
name: "index",
|
||
components: {
|
||
portalHeader,
|
||
portalFooter,
|
||
portalFloatTools,
|
||
courseItem,
|
||
courseForm,
|
||
authorInfo,
|
||
couresinteract,
|
||
courseImage,
|
||
interactBar
|
||
},
|
||
computed: {
|
||
...mapGetters(["resOwnerMap", "sysTypeMap", "userInfo", "identity"]),
|
||
typeList() {
|
||
let list = [];
|
||
|
||
},
|
||
// 取消搜索条件标签展示
|
||
/*stagList() { //计算出选择的内容
|
||
let list = [];
|
||
if (this.keyword) {
|
||
list.push({
|
||
type: 0,
|
||
id: 'keyword',
|
||
name: this.keyword,
|
||
checked: true
|
||
})
|
||
}
|
||
this.oneList.forEach(one => {
|
||
var twoChildChecked = false;//是否有下级
|
||
one.children.forEach(two => {
|
||
if (two.checked) {
|
||
twoChildChecked = true;
|
||
}
|
||
var threeChildChecked = false;
|
||
two.children.forEach(three => {
|
||
if (three.checked) {
|
||
list.push(three);
|
||
threeChildChecked = true;
|
||
}
|
||
});
|
||
if (two.checked && !threeChildChecked) {
|
||
list.push(two);
|
||
}
|
||
});
|
||
if (one.checked && !twoChildChecked) {
|
||
list.push(one);
|
||
}
|
||
})
|
||
return list;
|
||
},*/
|
||
|
||
stagList() {
|
||
let list = [];
|
||
|
||
// 关键词
|
||
if (this.keyword) {
|
||
list.push({
|
||
type: 0,
|
||
id: 'keyword',
|
||
name: this.keyword,
|
||
tagName: this.keyword,
|
||
checked: true
|
||
});
|
||
}
|
||
|
||
// 课程类型
|
||
this.ctypeList.forEach(item => {
|
||
if (item.checked) {
|
||
list.push({
|
||
...item,
|
||
tagName: item.name
|
||
});
|
||
}
|
||
});
|
||
|
||
// 热点标签 - 这是关键修复
|
||
this.hotTagsList.forEach(item => {
|
||
if (item.checked) {
|
||
list.push({
|
||
...item,
|
||
name: item.tagName || item.name,
|
||
tagName: item.tagName || item.name,
|
||
type: 14
|
||
});
|
||
}
|
||
});
|
||
|
||
// 三级分类
|
||
this.oneList.forEach(one => {
|
||
var twoChildChecked = false;
|
||
one.children.forEach(two => {
|
||
if (two.checked) {
|
||
twoChildChecked = true;
|
||
}
|
||
var threeChildChecked = false;
|
||
two.children.forEach(three => {
|
||
if (three.checked) {
|
||
list.push({
|
||
...three,
|
||
tagName: three.name
|
||
});
|
||
threeChildChecked = true;
|
||
}
|
||
});
|
||
if (two.checked && !threeChildChecked) {
|
||
list.push({
|
||
...two,
|
||
tagName: two.name
|
||
});
|
||
}
|
||
});
|
||
if (one.checked && !twoChildChecked) {
|
||
list.push({
|
||
...one,
|
||
tagName: one.name
|
||
});
|
||
}
|
||
});
|
||
|
||
return list;
|
||
},
|
||
ctypeTagAll() {
|
||
let flag = this.ctypeList.some(item => {
|
||
return item.checked;
|
||
});
|
||
return !flag;
|
||
},
|
||
isAllHotTagsSelected() {
|
||
return !this.hotTagsList.some(tag => tag.checked);
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
/** 被选择的精品课程*/
|
||
courseChosen: void 0,
|
||
yearChosen: [],
|
||
years: [],
|
||
newData: false,//线上品牌系列隐藏
|
||
navTitle: [],
|
||
// 设置高亮
|
||
twoId: '',
|
||
count: 0,//分页总条条数
|
||
showUClass: false,
|
||
ctypeList: [
|
||
{ type: 1, id: 0, name: '全部', checked: true },
|
||
{ type: 1, id: 1, name: '内部专享', checked: false },
|
||
{ type: 1, id: 2, name: '外部精选', checked: false },
|
||
],
|
||
id: '',
|
||
oneList: [], //一级分类{type:11}
|
||
twoList: [], //二级分类{type:12}
|
||
threeList: [],//三级分类{type:13}
|
||
searching: false,//是否正在搜索中
|
||
|
||
resonimg: {},
|
||
formatDate,
|
||
formatNum: formatUserNumber,
|
||
audiences: [],//当前用户的受众
|
||
couretitle: "",
|
||
toScore,
|
||
noPageList: true, //判断接口是否还有数据
|
||
noDataList: true, //判断接口是否还有数据
|
||
moreState: 1, // 1 加载更多 2 加载中 3无数据
|
||
columns: 3, //列的数量
|
||
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
|
||
// 查询信息
|
||
course: {
|
||
orderField: "DEFAULT",
|
||
companyId: '',
|
||
keyword: '',//关键词
|
||
topOrder: true,
|
||
orderAsc: false,
|
||
pageIndex: 1, // 第几页
|
||
pageSize: 9,//每页多少条
|
||
openCourse: 0,//增加的公开课查询
|
||
userId:''
|
||
},
|
||
sceneList: [], //场景
|
||
keyword: "",//查询的关键字
|
||
anking: "",
|
||
isFind: false,
|
||
searchbar: {
|
||
top: false
|
||
},
|
||
ankingList: [],
|
||
scorelist: [],
|
||
queryExpand: true, // true更多，false收起
|
||
//status: 1,
|
||
pager: {
|
||
total: 40
|
||
},
|
||
data: [{}, {}, {}, {}],
|
||
order: 1,
|
||
courseList: [],
|
||
searchRecords: [],
|
||
hotList: [],
|
||
totalPages: 1,
|
||
localSessionKey: this.$xpage.constants.localCourseFiltersKey,
|
||
hotTagsList: [],
|
||
// isAllHotTagsSelected: true,
|
||
};
|
||
},
|
||
// 受众需要每次刷新
|
||
created() {
|
||
let localKey = "user_" + this.userInfo.sysId + "_gids";
|
||
apiUserbasic.getInAudienceIds().then(rs => {
|
||
if (rs.status == 200) {
|
||
this.audiences = rs.result;
|
||
sessionStorage.setItem(localKey, this.audiences);
|
||
} else {
|
||
console.log(rs.message);
|
||
}
|
||
})
|
||
},
|
||
mounted() {
|
||
|
||
qualityCourseTimeMark().then(response=>{
|
||
this.years = response.data.result
|
||
})
|
||
|
||
let el_top = document.querySelector("#searchbar");
|
||
let el_search = document.querySelector("#searchbar");
|
||
let height = 200;
|
||
let flag = true;
|
||
let $this = this;
|
||
this.getAnkingData();
|
||
// window.addEventListener("scroll", this.handleScroll);
|
||
// if (this.$route.query !== {}) {
|
||
if (this.$route.query.keyword) {
|
||
this.keyword = this.$route.query.keyword;
|
||
}
|
||
this.loadTypeData();//加载分类
|
||
//this.getSceneData(); //已经没有场景了
|
||
if (this.keyword) {
|
||
this.totalPages = 4;
|
||
}
|
||
//新加
|
||
this.refId = this.$route.query.recommendId;
|
||
if (this.refId) {
|
||
this.course.type = 'recommend'
|
||
}
|
||
this.loadSysTypes();
|
||
this.getScoreList();
|
||
this.getHotList();
|
||
//查询排行榜，页面打开只查询一次
|
||
let localKey = "user_" + this.userInfo.sysId + "_gids";
|
||
if (this.audiences.length == 0) {
|
||
//let hasIds;
|
||
let hasIds = sessionStorage.getItem(localKey);
|
||
if (hasIds && hasIds.length > 0) {
|
||
this.audiences = hasIds.split(",");
|
||
this.search();
|
||
} else {
|
||
apiUserbasic.getInAudienceIds().then(rs => {
|
||
if (rs.status == 200) {
|
||
this.audiences = rs.result;
|
||
sessionStorage.setItem(localKey, this.audiences);
|
||
} else {
|
||
console.log(rs.message);
|
||
}
|
||
this.search();
|
||
})
|
||
}
|
||
}
|
||
this.couresreso();//广告位
|
||
},
|
||
beforeDestroy() {
|
||
// window.removeEventListener("scroll", this.handleScroll);
|
||
},
|
||
methods: {
|
||
getSearchMode() {
|
||
const hasKeyword = this.keyword && this.keyword.trim() !== '';
|
||
|
||
// 检查是否有导航标签被选中
|
||
const hasNavigationTags = this.stagList.some(tag => {
|
||
// 课程类型(1)、热点标签(14)、分类标签(11,12,13)
|
||
return [1, 11, 12, 13, 14].includes(tag.type) && tag.checked;
|
||
});
|
||
|
||
if (hasKeyword && hasNavigationTags) {
|
||
return 'mixed'; // 混合模式：关键字 + 导航标签
|
||
} else if (hasKeyword) {
|
||
return 'keyword'; // 纯关键字搜索
|
||
} else if (hasNavigationTags) {
|
||
return 'navigation'; // 纯导航标签搜索
|
||
} else {
|
||
return 'none'; // 无搜索条件
|
||
}
|
||
},
|
||
|
||
// 高亮标签关键字
|
||
highlightTagKeyword(tag) {
|
||
const searchMode = this.getSearchMode();
|
||
|
||
switch (searchMode) {
|
||
case 'keyword':
|
||
return this.highlightPartialMatch(tag);
|
||
case 'navigation':
|
||
return this.highlightExactMatch(tag);
|
||
case 'mixed':
|
||
return this.highlightMixedMode(tag);
|
||
default:
|
||
return tag;
|
||
}
|
||
},
|
||
|
||
// 部分匹配高亮（纯关键字搜索模式）
|
||
highlightPartialMatch(tag) {
|
||
const searchKeywords = this.stagList
|
||
.filter(searchTag => searchTag.type === 0) // 只处理关键字类型
|
||
.map(searchTag => searchTag.tagName || searchTag.name)
|
||
.filter(keyword => keyword && keyword.trim());
|
||
|
||
if (searchKeywords.length === 0) {
|
||
return tag;
|
||
}
|
||
|
||
let highlightedTag = tag;
|
||
|
||
searchKeywords.forEach(keyword => {
|
||
if (tag.includes(keyword)) {
|
||
const regex = new RegExp(`(${this.escapeRegExp(keyword)})`, 'gi');
|
||
highlightedTag = highlightedTag.replace(regex, '<span class="keyword-highlight">$1</span>');
|
||
}
|
||
});
|
||
|
||
return highlightedTag;
|
||
},
|
||
|
||
// 完全匹配高亮（纯导航标签模式）
|
||
highlightExactMatch(tag) {
|
||
const isMatched = this.stagList.some(searchTag => {
|
||
// 只检查导航标签类型
|
||
if (searchTag.type === 0) return false;
|
||
|
||
const searchName = searchTag.tagName || searchTag.name;
|
||
return searchName === tag;
|
||
});
|
||
|
||
if (isMatched) {
|
||
return `<span class="exact-match-highlight">${tag}</span>`;
|
||
}
|
||
|
||
return tag;
|
||
},
|
||
|
||
// 混合模式高亮（关键字 + 导航标签）
|
||
highlightMixedMode(tag) {
|
||
// 1. 先检查是否完全匹配导航标签
|
||
const exactMatched = this.stagList.some(searchTag => {
|
||
if (searchTag.type === 0) return false;
|
||
|
||
const searchName = searchTag.tagName || searchTag.name;
|
||
return searchName === tag;
|
||
});
|
||
|
||
// 2. 如果完全匹配导航标签，整个标签高亮
|
||
if (exactMatched) {
|
||
return `<span class="exact-match-highlight">${tag}</span>`;
|
||
}
|
||
|
||
// 3. 否则检查是否包含关键字，进行部分高亮
|
||
const searchKeywords = this.stagList
|
||
.filter(searchTag => searchTag.type === 0)
|
||
.map(searchTag => searchTag.tagName || searchTag.name)
|
||
.filter(keyword => keyword && keyword.trim());
|
||
|
||
if (searchKeywords.length === 0) {
|
||
return tag;
|
||
}
|
||
|
||
let highlightedTag = tag;
|
||
let hasKeywordMatch = false;
|
||
|
||
searchKeywords.forEach(keyword => {
|
||
if (tag.includes(keyword)) {
|
||
const regex = new RegExp(`(${this.escapeRegExp(keyword)})`, 'gi');
|
||
highlightedTag = highlightedTag.replace(regex, '<span class="keyword-highlight">$1</span>');
|
||
hasKeywordMatch = true;
|
||
}
|
||
});
|
||
|
||
// 4. 如果有关键字匹配，返回部分高亮结果
|
||
if (hasKeywordMatch) {
|
||
return highlightedTag;
|
||
}
|
||
|
||
// 5. 都不匹配，返回原标签
|
||
return tag;
|
||
},
|
||
|
||
// 辅助方法：转义正则表达式特殊字符
|
||
escapeRegExp(string) {
|
||
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||
},
|
||
|
||
|
||
|
||
handleClearHotTags() {
|
||
// 清除所有热点标签的选中状态
|
||
this.hotTagsList.forEach(tag => {
|
||
tag.checked = false;
|
||
});
|
||
// 清空course.tags
|
||
this.course.tags = '';
|
||
|
||
// 触发搜索
|
||
this.searchData();
|
||
},
|
||
handleTagClick(item, list,type) {
|
||
console.info('切换标签 item = ' + item)
|
||
// this.isAllHotTagsSelected = false;
|
||
|
||
item.checked = !item.checked;
|
||
|
||
// 更新course.tags
|
||
const checkedTags = this.hotTagsList.filter(tag => tag.checked);
|
||
let tagIds = checkedTags.map(tag => tag.id).join(',');
|
||
this.course.tags = tagIds;
|
||
// this.$forceUpdate();
|
||
this.searchData(type);
|
||
|
||
// 强制触发stagList重新计算
|
||
// this.$nextTick(() => {
|
||
// this.searchData(type);
|
||
// });
|
||
},
|
||
|
||
|
||
// 改变分页
|
||
currentChange(val) {
|
||
this.course.pageIndex = val
|
||
this.search()
|
||
},
|
||
// 移入
|
||
changeIndex(twoId) {
|
||
this.twoId = twoId
|
||
},
|
||
// 移除
|
||
leaveIndex() {
|
||
this.twoId = ''
|
||
},
|
||
tylClick() {
|
||
window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
|
||
},
|
||
cylClick() {
|
||
window.open("https://u.boe.com/pc/course?keyword=创新力专区");
|
||
},
|
||
showClass(flag) {
|
||
if (flag) {
|
||
this.showUClass = flag;
|
||
}
|
||
},
|
||
uClassClick() {
|
||
// this.showUClass = true;
|
||
window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130")
|
||
},
|
||
saveLocalFilters() {
|
||
let typeCodeList = [];
|
||
this.stagList.forEach(item => {
|
||
typeCodeList.push({
|
||
type: item.type,
|
||
id: item.id,
|
||
name: item.name
|
||
})
|
||
});
|
||
let typeCodeString = JSON.stringify(typeCodeList);
|
||
//console.log(typeCodeString);
|
||
sessionStorage.setItem(this.localSessionKey, typeCodeString);
|
||
},
|
||
loadLocalFilters() {
|
||
let hasData = sessionStorage.getItem(this.localSessionKey);
|
||
let $this = this;
|
||
if (hasData) {
|
||
let typeCodeList = JSON.parse(hasData);
|
||
typeCodeList.forEach(item => {
|
||
if (item.type == 0) {
|
||
this.keyword = item.name;
|
||
} else if (item.type == 1) {
|
||
if (item.id == 20) {
|
||
$this.ctypeList[0].checked = true;
|
||
} else if (item.id == 30) {
|
||
$this.ctypeList[1].checked = true;
|
||
} else if (item.id == 40) {
|
||
$this.ctypeList[2].checked = true;
|
||
}
|
||
} else { //三级分类的处理，如果一个分类选中多个，显示哪个，显示第一个，是否可以
|
||
this.oneList.forEach(one => {
|
||
if (one.id == item.id && item.type == '11') {
|
||
this.navTitle = [{ ...one }]
|
||
one.checked = true
|
||
}
|
||
one.children.forEach(two => {
|
||
if (two.id == item.id && item.type == '12') {
|
||
this.navTitle = [{ ...one }, { ...two }]
|
||
two.checked = true
|
||
}
|
||
two.children.forEach(three => {
|
||
if (three.id == item.id && item.type == '13') {
|
||
this.navTitle = [{ ...one }, { ...two }, { ...three }]
|
||
three.checked = true
|
||
}
|
||
})
|
||
})
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
//搜索条件
|
||
// 搜索条件
|
||
stagClose(tag, tagIndex) {
|
||
this.courseChosen = void 0;
|
||
tag.checked = false;
|
||
|
||
if (tag.type == 0) {
|
||
// 关键词类型
|
||
this.keyword = '';
|
||
} else if (tag.type == 1) {
|
||
// 课程类型
|
||
this.ctypeList.forEach(item => {
|
||
if (item.id == tag.id) {
|
||
item.checked = false;
|
||
}
|
||
});
|
||
} else if (tag.type == 14) {
|
||
// 热点标签类型
|
||
this.hotTagsList.forEach(item => {
|
||
if (item.id == tag.id) {
|
||
item.checked = false;
|
||
}
|
||
});
|
||
// 更新course.tags
|
||
const checkedHotTags = this.hotTagsList.filter(tag => tag.checked);
|
||
let tagIds = checkedHotTags.map(tag => tag.id).join(',');
|
||
this.course.tags = tagIds;
|
||
} else if (tag.type == 11 || tag.type == 12 || tag.type == 13) {
|
||
// 三级分类标签
|
||
this.oneList.forEach(one => {
|
||
if (one.id == tag.id) {
|
||
one.checked = false;
|
||
}
|
||
one.children.forEach(two => {
|
||
if (two.id == tag.id) {
|
||
two.checked = false;
|
||
}
|
||
two.children.forEach(three => {
|
||
if (three.id == tag.id) {
|
||
three.checked = false;
|
||
}
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
this.navTitle = []
|
||
this.searchData();
|
||
},
|
||
|
||
isTagMatched(tag) {
|
||
// 检查stagList中是否有匹配的标签
|
||
return this.stagList.some(searchTag =>
|
||
searchTag.tagName === tag || searchTag.name === tag
|
||
);
|
||
},
|
||
// 导航全选
|
||
handleTypeAllClick(t) {
|
||
if (t == 1) {
|
||
this.ctypeList.forEach(ct => {
|
||
ct.checked = false;
|
||
})
|
||
} else if (t == 11) {
|
||
this.oneList.forEach(ct => {
|
||
ct.checked = true;
|
||
});
|
||
this.twoList.forEach(ct => {
|
||
ct.checked = true;
|
||
});
|
||
this.threeList.forEach(ct => {
|
||
ct.checked = false;
|
||
});
|
||
this.twoList = [];
|
||
this.threeList = [];
|
||
} else if (t == 12) {
|
||
this.twoList.forEach(ct => {
|
||
ct.checked = false;
|
||
});
|
||
this.threeList.forEach(ct => {
|
||
ct.checked = false;
|
||
});
|
||
this.threeList = [];
|
||
} else if (t == 13) {
|
||
this.threeList.forEach(ct => {
|
||
ct.checked = false;
|
||
})
|
||
}
|
||
this.searchData();
|
||
},
|
||
// 清除
|
||
handleClearTags() {
|
||
//清空所有的条件
|
||
this.keyword = '';
|
||
|
||
// 清除课程类型
|
||
this.ctypeList.forEach(item => {
|
||
item.checked = false;
|
||
});
|
||
|
||
// 清除热点标签
|
||
this.hotTagsList.forEach(item => {
|
||
item.checked = false;
|
||
});
|
||
// 清空course.tags
|
||
this.course.tags = '';
|
||
|
||
// 清除年份选择
|
||
this.yearChosen = [];
|
||
|
||
// 清除三级分类
|
||
this.oneList.forEach(one => {
|
||
one.checked = false;
|
||
one.children.forEach(two => {
|
||
two.checked = false;
|
||
two.children.forEach(three => {
|
||
three.checked = false;
|
||
})
|
||
})
|
||
});
|
||
|
||
// 清除左侧被选中的内容
|
||
this.courseChosen = void 0;
|
||
this.twoList = [];
|
||
this.threeList = [];
|
||
this.navTitle = [];
|
||
this.newData = false;
|
||
sessionStorage.removeItem(this.localSessionKey)
|
||
this.searchData();
|
||
},
|
||
|
||
// 导航切换(录播课，线下课，学习项目)
|
||
handleTypeClick(item, list) {
|
||
// item.checked = !item.checked;
|
||
//使用上面一行是可以多选，使用下面是单选
|
||
list.forEach(row=>{
|
||
row.checked=false;
|
||
})
|
||
item.checked=true;
|
||
this.searchData();
|
||
},
|
||
//三级分类
|
||
handleOptionClick(item, level, list) {
|
||
// 线上品牌展示效果
|
||
this.newData = item.newData;
|
||
this.courseChosen = item.id
|
||
console.log(item, "---------");
|
||
// 单选，排除法
|
||
this.oneList.forEach(one => {
|
||
one.checked = false;
|
||
if (one.id == item.id) {
|
||
this.navTitle = [{ ...one }]
|
||
one.checked = true;
|
||
}
|
||
one.children.forEach(two => {
|
||
two.checked = false;
|
||
if (two.id == item.id) {
|
||
this.navTitle = [{ ...one }, { ...two }]
|
||
two.checked = true
|
||
}
|
||
two.children.forEach(three => {
|
||
three.checked = false;
|
||
if (three.id == item.id) {
|
||
this.navTitle = [{ ...one }, { ...two }, { ...three }]
|
||
three.checked = true
|
||
}
|
||
})
|
||
})
|
||
})
|
||
this.searchData();
|
||
},
|
||
// 无用
|
||
handleChangeTypes(item) {
|
||
console.log(item);
|
||
//重新计算
|
||
this.twoList = [];
|
||
this.threeList = [];
|
||
let $this = this;
|
||
this.oneList.forEach(one => {
|
||
if (one.checked) {
|
||
one.children.forEach(two => {
|
||
$this.twoList.push(two);
|
||
if (two.checked) {
|
||
two.children.forEach(three => {
|
||
$this.threeList.push(three);
|
||
})
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
// 加载分类
|
||
async loadTypeData() {
|
||
let $this = this;
|
||
try {
|
||
const { result, status } = await apiType.tree(1);
|
||
if (status === 200) {
|
||
let tree = [];
|
||
result.forEach((item, index) => {
|
||
let newItem = {
|
||
type: 11,
|
||
id: item.id,
|
||
name: item.name,
|
||
children: [],
|
||
|
||
checked: false
|
||
}
|
||
if (item.children) {
|
||
item.children.forEach(subItem => {
|
||
let newSubItem = {
|
||
type: 12,
|
||
id: subItem.id,
|
||
name: subItem.name,
|
||
children: [],
|
||
checked: false,
|
||
newData: subItem?.newData || false
|
||
}
|
||
|
||
if (subItem.children) {
|
||
subItem.children.forEach(sub => {
|
||
let newSub = {
|
||
type: 13,
|
||
id: sub.id,
|
||
name: sub.name,
|
||
children: [],
|
||
checked: false
|
||
}
|
||
newSubItem.children.push(newSub);
|
||
})
|
||
}
|
||
newItem.children.push(newSubItem);
|
||
})
|
||
}
|
||
$this.oneList.push(newItem);
|
||
|
||
|
||
});
|
||
this.loadLocalFilters();
|
||
// this.search()
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
},
|
||
// 无用
|
||
banJump() {
|
||
if (this.resonimg.JumpUrl) {
|
||
window.open(this.resonimg.JumpUrl);
|
||
}
|
||
},
|
||
couresreso() {
|
||
let key = 'course';
|
||
apiPlace.detail(key).then(res => {
|
||
let resImgList = JSON.parse(res.result.content);
|
||
if (resImgList && resImgList.length > 0) {
|
||
this.resonimg = resImgList[0]
|
||
}
|
||
})
|
||
},
|
||
// 无用
|
||
jumUX() {
|
||
window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130", "_blank");
|
||
},
|
||
// 无用
|
||
jumOpen() {
|
||
//公开课 openCourse=1
|
||
this.course.openCourse = 1;//
|
||
this.searchData();
|
||
},
|
||
// 头部
|
||
emitInput(val) {
|
||
this.keyword = val;
|
||
this.searchData();
|
||
},
|
||
toNeedCourse() {
|
||
this.$refs.floatTools.toNeedCourse();
|
||
},
|
||
searchData(type) {
|
||
this.course.pageIndex = 1;
|
||
this.noPageList = true; //判断接口是否还有数据
|
||
this.noDataList = true; //判断接口是否还有数据
|
||
this.courseList = [];
|
||
this.totalPages = 4;
|
||
this.search(type);
|
||
},
|
||
inputOn() {
|
||
this.$forceUpdate();
|
||
},
|
||
...mapActions({
|
||
getResOwnerTree: "resOwner/getResOwnerTree",
|
||
loadResOwners: "resOwner/loadResOwners",
|
||
getSysTypeTree: "sysType/getSysTypeTree",
|
||
loadSysTypes: "sysType/loadSysTypes"
|
||
}),
|
||
sysTypeName(code) {
|
||
if (code == "") {
|
||
return "";
|
||
}
|
||
return this.sysTypeMap.get(code);
|
||
},
|
||
searchterm() {
|
||
apiSearchterm.list(5, 1).then(res => {
|
||
if (res.status == 200) {
|
||
this.searchRecords = res.result;
|
||
}
|
||
});
|
||
},
|
||
//课程列表详情
|
||
toCourseDetail(item) {
|
||
let $this = this;
|
||
let courseId = item.id;
|
||
if (!courseId) {
|
||
courseId = item.courseId;
|
||
}
|
||
if (item.source == 1) {
|
||
//return `${this.webBaseUrl}/course/boeframe?id=${item.id}&type=${item.type}`;
|
||
//location.href=`${this.webBaseUrl}/course/boeframe?id=${item.id}&type=${item.type}`;
|
||
this.$router.push('/course/boeframe?id=' + courseId + '&type=' + item.type);
|
||
//此处使用window.open有问题
|
||
//window.open(`${this.webBaseUrl}/course/boeframe?id=${item.id}&type=${item.type}`);
|
||
} else if (item.source == 3) {
|
||
//跳转到管理系统的页面
|
||
let manageApi = process.env.VUE_APP_MANAGER_API_PATH;
|
||
let studentPath = process.env.VUE_APP_STUDENT_PATH;
|
||
if (item.type == 30) { //线下课，面授课
|
||
let params = encodeURIComponent('courseId=' + courseId);
|
||
this.$router.push('/forward?to=' + manageApi + '/stu/project/redirectDetail¶ms=' + params);
|
||
} else if (item.type == 40) { //学习项目
|
||
let params = encodeURIComponent('projectId=' + courseId);
|
||
this.$router.push('/forward?to=' + studentPath + '/projectdetails¶ms=' + params);
|
||
//this.$router.push('/forward?to='+manageApi+'/stu/project/redirectDetail¶ms='+params);
|
||
}
|
||
} else {
|
||
if (item.type == 10) {
|
||
//return this.webBaseUrl + "/course/studyindex?id=" + item.id;
|
||
this.$router.push("/course/studyindex?id=" + courseId);
|
||
} else if (item.type == 20) {
|
||
apiCourseStudy.hasSignup(courseId).then(rs => {
|
||
if (rs.status == 200) {
|
||
//return $this.webBaseUrl + "/course/studyindex?id=" + item.id;
|
||
this.$router.push("/course/studyindex?id=" + courseId);
|
||
} else {
|
||
//return $this.webBaseUrl + "/course/detail?id=" + item.id;
|
||
this.$router.push("/course/detail?id=" + courseId);
|
||
}
|
||
})
|
||
//return $this.webBaseUrl + "/course/detail?id=" + item.id;
|
||
}
|
||
}
|
||
},
|
||
orderChange(id) {
|
||
this.course.orderField = id;
|
||
this.course.pageIndex = 1;
|
||
this.noPageList = true; //判断接口是否还有数据
|
||
this.noDataList = true; //判断接口是否还有数据
|
||
this.courseList = [];
|
||
this.totalPages = 1;
|
||
this.search();
|
||
},
|
||
//获取场景，保留
|
||
async getSceneData() {
|
||
try {
|
||
const { result, status } = await scene.list(1);
|
||
if (status === 200) {
|
||
this.sceneList = result;
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
},
|
||
loadMore() {
|
||
this.course.pageIndex += 1;
|
||
this.search();
|
||
},
|
||
// 高亮搜索词
|
||
brightenKeyword(val, keyword) {
|
||
const Reg = new RegExp(keyword, 'i');
|
||
let res = '';
|
||
if (val) {
|
||
res = val.replace(Reg, `<span style="color: #3e7fff;">${keyword}</span>`);
|
||
return res;
|
||
}
|
||
},
|
||
brightenKeywords(val, keyword) {
|
||
if (!val) return
|
||
const keywordData = val.filter(item => item.indexOf(keyword) != -1)
|
||
const Reg = new RegExp(keyword, 'i');
|
||
return keywordData.map(item => {
|
||
let color = '#e89e42'
|
||
let equalityColor = '#387DF7'
|
||
let listData = item.replace(Reg, `<span style="color: ${item == keyword ? equalityColor : color};">${keyword}</span>`)
|
||
const regex = /(.*?)(<span.*?>)(.*?)(<\/span>)(.*)/i;
|
||
const match = regex.exec(listData);
|
||
console.log(match);
|
||
const contentStart = match[1];
|
||
const spanTag = match[2];
|
||
const content = match[3];
|
||
const spanEnd = match[4];
|
||
const contentEnd = match[5];
|
||
let modifiedStr = '';
|
||
if (!contentStart) {
|
||
modifiedStr = `${spanTag}${content.substring(0, 3)}${spanEnd}${content.length == 1 ? contentEnd.substring(0, 2) : content.length == 2 ? contentEnd.substring(0, 1) : ''}`
|
||
} else if (contentStart.length == 1) {
|
||
modifiedStr = `${contentStart}${spanTag}${content.substring(0, 2)}${spanEnd}${content.length == 1 ? contentEnd.substring(0, 1) : ''}`
|
||
} else if (contentStart.length == 2) {
|
||
modifiedStr = `${contentStart}${spanTag}${content.substring(0, 1)}${spanEnd}`
|
||
} else {
|
||
modifiedStr = contentStart.substring(0, 3)
|
||
}
|
||
console.log(modifiedStr);
|
||
return {
|
||
name: modifiedStr,
|
||
title: listData,
|
||
showTitle: item.length > 3
|
||
}
|
||
})
|
||
},
|
||
getAllChecked() { //获取全部选中的标签
|
||
let list = [];
|
||
|
||
this.ctypeList.forEach(item => {
|
||
if (item.checked) {
|
||
list.push(item);
|
||
}
|
||
});
|
||
this.oneList.forEach(one => {
|
||
one.children.forEach(two => {
|
||
two.children.forEach(three => {
|
||
if (three.checked) {
|
||
list.push(three);
|
||
}
|
||
});
|
||
if (two.checked) {
|
||
list.push(two);
|
||
}
|
||
});
|
||
if (one.checked) {
|
||
list.push(one);
|
||
}
|
||
})
|
||
return list;
|
||
},
|
||
// 查询
|
||
async search (type) {
|
||
if (this.searching) {
|
||
this.$message.warning("正在搜索中，请待搜索完成后再重新搜索");
|
||
return;
|
||
}
|
||
this.searching = true;
|
||
this.saveLocalFilters();
|
||
let that = this;
|
||
if (this.keyword) {
|
||
apiSearchterm.save({ keyword: this.course.keyword, type: 1 });
|
||
}
|
||
|
||
if (this.audiences.length > 0) {
|
||
this.course.audiences = this.audiences.join(",");
|
||
}
|
||
//console.log(this.userInfo)
|
||
this.course.type = "";//不使用单查询了
|
||
this.course.types = "";
|
||
this.course.sysType1 = "";
|
||
this.course.sysType2 = "";
|
||
this.course.sysType3 = "";
|
||
this.course.keyword = this.keyword;
|
||
let allChecked = this.getAllChecked();
|
||
allChecked.forEach(item => {
|
||
if (item.type == 1) {
|
||
if (that.course.types) { that.course.types += '-'; }
|
||
that.course.types += item.id;
|
||
} else if (item.type == 11) {
|
||
if (that.course.sysType1) { that.course.sysType1 += '-'; }
|
||
that.course.sysType1 += item.id;
|
||
} else if (item.type == 12) {
|
||
if (that.course.sysType2) { that.course.sysType2 += '-'; }
|
||
that.course.sysType2 += item.id;
|
||
} else if (item.type == 13) {
|
||
if (that.course.sysType3) { that.course.sysType3 += '-'; }
|
||
that.course.sysType3 += item.id;
|
||
}
|
||
});
|
||
if (!type && type !== 1){
|
||
apiCourseTag.getHotTagList(that.course).then(rs => {
|
||
if (rs.status == 200) {
|
||
// 保留已选中标签的状态
|
||
const currentCheckedTags = this.hotTagsList.filter(tag => tag.checked);
|
||
this.hotTagsList = rs.result.map(tag => ({
|
||
...tag,
|
||
checked: currentCheckedTags.some(checkedTag => checkedTag.id === tag.id)
|
||
}));
|
||
} else {
|
||
console.log(rs.message);
|
||
}
|
||
})
|
||
}
|
||
|
||
this.isFind = true;
|
||
this.course.device = 1;
|
||
if (this.course.pageIndex == 1) {
|
||
this.courseList = [];
|
||
}
|
||
|
||
let isTopList = [];
|
||
// 隐藏loadMore
|
||
this.moreState = 2;
|
||
this.course.userId = this.userInfo.aid
|
||
|
||
// 请求参数预处理
|
||
const params = JSON.parse(JSON.stringify(this.course))
|
||
// 清除多余的参数
|
||
const {pageIndex, orderField, userId} = params
|
||
params.pageNum = pageIndex
|
||
params.orderByType = orderField
|
||
params.courseSource = this.ctypeList.findIndex(e => e.checked)
|
||
if (params.courseSource === -1) {
|
||
params.courseSource = 0
|
||
}
|
||
this.yearChosen.length && (params.years = this.yearChosen)
|
||
params.courseName = this.keyword
|
||
delete params.userId
|
||
params.aid = userId
|
||
params.sysType = this.courseChosen
|
||
|
||
console.log(`params`, params)
|
||
await qualityPageList(params).then(res => {
|
||
this.searching = false;
|
||
console.log(res.status)
|
||
if (res.status === 200) {
|
||
this.totalPages = res.data.result.pages;
|
||
|
||
const list = res.data.result.records ?? []
|
||
|
||
this.courseList = list
|
||
if (this.newData) {
|
||
this.courseList = [
|
||
{
|
||
audiences: "",
|
||
companyId: "",
|
||
coverImg: "",
|
||
createdAt: "",
|
||
device: 3,
|
||
domainIds: "",
|
||
duration: 7,
|
||
endTime: "",
|
||
esId: "Z4LAbYkBfn0lSHQ9acXX",
|
||
id: "1091051270927183872",
|
||
isSetAudience: 0,
|
||
isTop: 0,
|
||
keywords: "回归,新建,在线,课程",
|
||
keywordsList: ['回归', '新建', '在线', '课程'],
|
||
maxDuration: "",
|
||
name: "人力资源知识技能晋升（人力资源总监空降现场，为各位答疑解惑",
|
||
openCourse: 0,
|
||
openEnroll: 0,
|
||
orderType: "",
|
||
publishTime: 1689748779,
|
||
resOwner: "",
|
||
score: 5,
|
||
source: 2,
|
||
startTime: "",
|
||
studies: 2,
|
||
studiesFormat: "",
|
||
summary: "",
|
||
sysType1: "966458733088919552",
|
||
sysType2: "966459050400600064",
|
||
sysType3: "1060578278816509959",
|
||
tags: "",
|
||
teacher: "张学智",
|
||
teacherCode: "",
|
||
title: "BOE",
|
||
topTime: "",
|
||
type: 20,
|
||
types: "",
|
||
remark: '备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备'
|
||
},
|
||
]
|
||
}
|
||
this.count = res.data.result.total
|
||
if (this.newData) {
|
||
this.count = 1
|
||
}
|
||
this.moreState = 3
|
||
} else {
|
||
this.moreState = 2;
|
||
}
|
||
|
||
})
|
||
.catch(err => {
|
||
this.moreState = 2;
|
||
});
|
||
},
|
||
|
||
getAnkingData() {
|
||
apiCourse.ranking().then(res => {
|
||
if (res.status == 200) {
|
||
res.result.forEach(item => {
|
||
if (item.publishTime != '') {
|
||
item.coverImg = item.images;
|
||
let time = item.publishTime.split('-');
|
||
item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`
|
||
}
|
||
})
|
||
this.ankingList = res.result;
|
||
}
|
||
});
|
||
},
|
||
getScoreList() {
|
||
apiCourse.scorelist(5, 2).then(res => {
|
||
if (res.status == 200) {
|
||
res.result.forEach(item => {
|
||
if (item.publishTime != '') {
|
||
item.coverImg = item.images;
|
||
let time = item.publishTime.split('-');
|
||
item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`
|
||
}
|
||
})
|
||
this.scorelist = res.result;
|
||
// console.log(this.scorelist)
|
||
}
|
||
});
|
||
},
|
||
getHotList() {
|
||
apiCourse.studyCounts(5).then(res => {
|
||
if (res.status == 200) {
|
||
res.result.forEach(item => {
|
||
if (item.publishTime != '') {
|
||
item.coverImg = item.images;
|
||
let time = item.publishTime.split('-');
|
||
item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`
|
||
}
|
||
})
|
||
this.hotList = res.result;
|
||
}
|
||
});
|
||
},
|
||
jumpRouter(item) {
|
||
//console.log(item.type, "item.type");
|
||
// return console.log(id,type,"fihkj1")
|
||
// if (item.type == 20) {
|
||
//录播课
|
||
// window.open(`${this.webBaseUrl}/course/detail?id=${id}`)
|
||
this.$router.push(`/course/detail?id=${item.id}`);
|
||
// }
|
||
// if (item.type == 10) {
|
||
//微课
|
||
// window.open(`${this.webBaseUrl}/course/micro?id=${id}`)
|
||
// this.$router.push(`/course/micro?id=${item.id}`);
|
||
// }
|
||
},
|
||
jumpRouter2(item) {
|
||
// console.log(item,"土豪包括九年")
|
||
let type = item.courseType;
|
||
let id = item.courseId;
|
||
|
||
//console.log(item.type,type,'item.type');
|
||
// return console.log(id,type,"fihkj1")
|
||
// if (type == 20) {
|
||
//录播课
|
||
// window.open(`${this.webBaseUrl}/course/detail?id=${id}`)
|
||
this.$router.push(`/course/detail?id=${id}`);
|
||
// }
|
||
// if (type == 10) {
|
||
//微课
|
||
// window.open(`${this.webBaseUrl}/course/micro?id=${id}`)
|
||
// this.$router.push(`/course/micro?id=${id}`);
|
||
// }
|
||
}
|
||
},
|
||
watch:{
|
||
yearChosen(){
|
||
this.searchData()
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.couser-list-content {
|
||
min-height: 110%;
|
||
}
|
||
|
||
// 标题
|
||
.navTitle {
|
||
margin-bottom: 20px;
|
||
|
||
& a:hover {
|
||
color: #387DF7;
|
||
}
|
||
|
||
.oneTitle {
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
|
||
& .titleName:hover {
|
||
color: #387DF7;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 三级背景高度
|
||
.course-recommended-style{
|
||
position: relative;
|
||
height: 142px;
|
||
background-image: url('../../../assets/images/course/courserecommended.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.course-title-style {
|
||
position: relative;
|
||
height: 100px;
|
||
background-image: url('../../../../public/images/qualityBg.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.imgTilte {
|
||
|
||
div {
|
||
padding-left: 20px;
|
||
font-size: 50px;
|
||
color: #FFFFFF;
|
||
font-weight: 500;
|
||
}
|
||
|
||
// & div:last-child {
|
||
// padding-left: 40px;
|
||
// font-size: 20px;
|
||
// color: #FFFFFF;
|
||
// opacity: .5;
|
||
// font-family: ArialMT !important;
|
||
// }
|
||
|
||
}
|
||
}
|
||
|
||
// 三级列表
|
||
.course-list {
|
||
background-color: #fff;
|
||
|
||
.course-one {
|
||
position: relative;
|
||
|
||
.course-one-content {
|
||
cursor: pointer;
|
||
line-height: 38px;
|
||
height: 38px;
|
||
padding-left: 40px;
|
||
background: linear-gradient(270deg, #F0F7FF 0%, #DDEDFF 100%);
|
||
}
|
||
|
||
// 二级的高亮
|
||
.courseTwoActive {
|
||
color: #387DF7;
|
||
border-image: linear-gradient(90deg, rgba(47, 101, 236, 1), rgba(228, 236, 255, 1)) 1 1 !important;
|
||
}
|
||
|
||
.course-two {
|
||
position: relative;
|
||
border-bottom: 1px solid;
|
||
border-image: linear-gradient(333deg, rgba(243, 243, 243, 1), rgba(227, 227, 227, 1)) 1 1;
|
||
|
||
.course-two-content {
|
||
cursor: pointer;
|
||
height: 38px;
|
||
line-height: 38px;
|
||
font-size: 16px;
|
||
padding-left: 40px;
|
||
}
|
||
}
|
||
|
||
.popover {
|
||
background: linear-gradient(180deg, rgba(78, 166, 255, 0.2) 0%, rgba(78, 166, 255, 0) 100%);
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
// 导航
|
||
//.topNav {
|
||
// display: flex;
|
||
// margin-bottom: 20px;
|
||
//
|
||
// .nav {
|
||
// display: flex;
|
||
// align-items: center;
|
||
//
|
||
// .option-item {
|
||
// position: relative;
|
||
//
|
||
// .nav-bottbor {
|
||
// position: absolute;
|
||
// top: 130%;
|
||
// left: 0;
|
||
// width: 100%;
|
||
// height: 4px;
|
||
// background: #387DF7;
|
||
// border-radius: 5px;
|
||
// }
|
||
// }
|
||
// }
|
||
//}
|
||
|
||
.u-class {
|
||
::v-deep .el-dialog {
|
||
border-radius: 15px;
|
||
|
||
.el-dialog__headerbtn .el-dialog__close {
|
||
color: white;
|
||
position: absolute;
|
||
z-index: 99;
|
||
right: 15px;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-dialog__body {
|
||
padding: 0px;
|
||
}
|
||
|
||
.ClassBoxContent {
|
||
width: 100%;
|
||
height: 396px;
|
||
// background: red;
|
||
border-radius: 15px;
|
||
|
||
.ContentBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
z-index: 9;
|
||
display: flex;
|
||
|
||
.left,
|
||
.right {
|
||
height: calc(100% - 30px);
|
||
}
|
||
|
||
.left {
|
||
padding-left: 30px;
|
||
width: 48%;
|
||
margin-top: -32px;
|
||
|
||
.title {
|
||
width: 200px;
|
||
height: 59px;
|
||
line-height: 59px;
|
||
text-align: center;
|
||
margin-left: -8px;
|
||
font-size: 38px;
|
||
color: white;
|
||
margin-top: 42.97px;
|
||
padding-top: 5px;
|
||
text-shadow: 0 6px 3px rgba(96, 85, 243, 0.4);
|
||
}
|
||
|
||
.jy {
|
||
color: white;
|
||
font-size: 20px;
|
||
margin-top: 87.53px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.msg {
|
||
margin-top: 5px;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
width: 326px;
|
||
text-align: justify;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.bottom {
|
||
width: 100px;
|
||
height: 1px;
|
||
background: rgba(255, 255, 255, 0.85);
|
||
margin-top: 40px;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
// padding-left: 10px;
|
||
width: 50%;
|
||
|
||
.tyl {
|
||
cursor: pointer;
|
||
width: calc(100% - 20px);
|
||
background: rgba(255, 255, 255, 0.95);
|
||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
|
||
border-radius: 4px;
|
||
height: 160px;
|
||
margin-top: 163px;
|
||
|
||
.tyl_title {
|
||
width: 100%;
|
||
padding-left: 20px;
|
||
padding-top: 20px;
|
||
|
||
.tyl_title_img {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.tyl_title_msg {
|
||
font-size: 20px;
|
||
margin-left: 10px;
|
||
color: #333333;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.tyl_jy {
|
||
margin-top: 6.5px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
padding-left: 20px;
|
||
color: #333333;
|
||
}
|
||
|
||
.tyl_msg {
|
||
width: 350.36px;
|
||
margin-top: 13px;
|
||
margin-left: 20px;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
font-weight: 400;
|
||
letter-spacing: 0;
|
||
text-align: justify;
|
||
}
|
||
}
|
||
|
||
.tyl:hover {
|
||
border: 0.96px solid rgba(140, 105, 242, 1);
|
||
box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.3);
|
||
}
|
||
.text_msg{
|
||
margin: 43px 0 0 222px;
|
||
font-size: 14px;
|
||
color: #000;
|
||
}
|
||
|
||
.cyl {
|
||
cursor: pointer;
|
||
width: calc(100% - 20px);
|
||
background: rgba(255, 255, 255, 0.95);
|
||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
|
||
border-radius: 4px;
|
||
height: 180px;
|
||
margin-top: 10px;
|
||
|
||
.tyl_title {
|
||
width: 100%;
|
||
padding-left: 20px;
|
||
padding-top: 20px;
|
||
|
||
.tyl_title_img {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.tyl_title_msg {
|
||
font-size: 20px;
|
||
margin-left: 10px;
|
||
color: #333333;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.tyl_jy {
|
||
margin-top: 6.5px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
padding-left: 20px;
|
||
color: #333333;
|
||
}
|
||
|
||
.tyl_msg {
|
||
width: 350.36px;
|
||
margin-top: 13px;
|
||
margin-left: 20px;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
font-weight: 400;
|
||
letter-spacing: 0;
|
||
text-align: justify;
|
||
}
|
||
}
|
||
|
||
.cyl:hover {
|
||
border: 0.96px solid rgba(140, 105, 242, 1);
|
||
box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.24);
|
||
}
|
||
}
|
||
}
|
||
|
||
.img {
|
||
width: 835px;
|
||
height: 428px;
|
||
margin-left: -1px;
|
||
margin-top: -1px;
|
||
position: absolute;
|
||
top: 0px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.couresstartTime {
|
||
line-height: 26px;
|
||
height: 26px;
|
||
padding-top: 5px;
|
||
font-size: 14px;
|
||
color: #666;
|
||
// position: absolute;
|
||
// right:2px;
|
||
// height: 20px;
|
||
// bottom: 50px;
|
||
}
|
||
|
||
.interact-bar-value {
|
||
color: #999;
|
||
}
|
||
|
||
.couderbox {
|
||
// width: 5px;
|
||
// padding: 0;
|
||
// display: inline-block;
|
||
// text-align: center;
|
||
}
|
||
|
||
.coures-border {
|
||
width: 2px;
|
||
height: 15px;
|
||
border-radius: 20%;
|
||
background: #666;
|
||
}
|
||
|
||
.notcoures {
|
||
text-align: center;
|
||
|
||
img {
|
||
width: 360px;
|
||
height: 226px;
|
||
}
|
||
|
||
h5 {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
.course-type-left {
|
||
position: absolute;
|
||
top: 0px;
|
||
right: 0px;
|
||
width: 60px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
text-align: center;
|
||
background-color: #f99000;
|
||
border-radius: 2px 4px 2px 14px;
|
||
font-size: 12px;
|
||
color: #ffffff;
|
||
-moz-user-select: none;
|
||
/*火狐*/
|
||
-webkit-user-select: none;
|
||
/*webkit浏览器*/
|
||
-ms-user-select: none;
|
||
/*IE10*/
|
||
-khtml-user-select: none;
|
||
/*早期浏览器*/
|
||
user-select: none;
|
||
}
|
||
|
||
.list-lidex {
|
||
display: inline-block;
|
||
display: flex;
|
||
}
|
||
|
||
.course-resources {
|
||
margin-top: 24px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
|
||
.course-img-box {
|
||
position: relative;
|
||
}
|
||
|
||
.course-img-box:hover {
|
||
transform: scale(1.15) translateY(-15px);
|
||
transition: all 0.6s;
|
||
}
|
||
|
||
// 关键字卡片的样式
|
||
.keywordInfo-every {
|
||
display: flex;
|
||
padding-top: 5px;
|
||
|
||
.keywordInfo {
|
||
width: 54px;
|
||
font-size: 12px;
|
||
line-height: 26px;
|
||
background: #F2F5F7;
|
||
border-radius: 4px;
|
||
position: relative;
|
||
border: 1px solid #387DF7;
|
||
|
||
.keyword-content {
|
||
color: #387DF7;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
& .keywordInfo:last-child {
|
||
margin-right: 0 !important;
|
||
}
|
||
|
||
}
|
||
|
||
|
||
.list-active {
|
||
display: none;
|
||
// width: 458px;
|
||
width: 135%;
|
||
height: 165px;
|
||
padding: 20px;
|
||
background: #FFFFFF;
|
||
box-sizing: border-box;
|
||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
|
||
border-radius: 2px;
|
||
border: 1px solid #EDEFF0;
|
||
position: absolute;
|
||
top: 30px;
|
||
left: -17.5%;
|
||
z-index: 999;
|
||
|
||
.list-content {
|
||
display: flex;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #EDEFF0;
|
||
|
||
.list-img {
|
||
width: 125px;
|
||
height: 70px;
|
||
position: relative;
|
||
|
||
::v-deep .el-image {
|
||
border-radius: 4px !important;
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.course-type {
|
||
position: absolute;
|
||
right: 23.5%;
|
||
// bottom: 26%;
|
||
top: 0;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
font-size: 12px;
|
||
color: #FFFFFF;
|
||
padding: 0px 8px;
|
||
background: #f99000;
|
||
border-radius: 0px 0px 0px 10px;
|
||
}
|
||
}
|
||
|
||
.list-text {
|
||
flex: 1;
|
||
|
||
// margin-left: 12px;
|
||
h6 {
|
||
font-size: 14px;
|
||
margin: 0px;
|
||
font-weight: 500;
|
||
line-height: normal;
|
||
color: #04243C;
|
||
}
|
||
|
||
span {
|
||
font-size: 14px;
|
||
color: #6E7B84;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-bottom {
|
||
padding-top: 10px;
|
||
|
||
::v-deep .interact-bar-btns {
|
||
justify-content: space-between !important;
|
||
|
||
.interact-bar-btn {
|
||
margin: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-info {
|
||
position: relative;
|
||
|
||
.span {
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
.list-info:hover .list-active {
|
||
// transition: all 0.5s;
|
||
display: block;
|
||
}
|
||
|
||
.course-banner {
|
||
// height: 240px;
|
||
// background: url('../../../../public/images/course-banner.png');
|
||
background-color: #0078FC;
|
||
}
|
||
|
||
::v-deep .el-radio-button {
|
||
margin-right: 0px;
|
||
}
|
||
|
||
::v-deep .title-line-ellipsis {
|
||
// width: 100%;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
box-sizing: border-box;
|
||
word-break: break-all;
|
||
}
|
||
|
||
::v-deep .el-card__body {
|
||
padding: 0;
|
||
}
|
||
|
||
::v-deep .bacolor:nth-child(odd) {
|
||
background-color: #fff;
|
||
padding: 0 5px;
|
||
}
|
||
|
||
::v-deep .bacolor:nth-child(even) {
|
||
background-color: #f6f6f6;
|
||
padding: 0 5px;
|
||
}
|
||
|
||
.Uxtext {
|
||
font-weight: 450;
|
||
margin-top: 5px;
|
||
margin-left: 15px;
|
||
font-size: 14px;
|
||
color: #3d3d3d;
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
|
||
.uxicon {
|
||
font-size: 10px;
|
||
position: absolute;
|
||
top: -14px;
|
||
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,
|
||
.el-radio-group {
|
||
vertical-align: top;
|
||
}
|
||
|
||
::v-deep .el-radio-button__inner {
|
||
background: none;
|
||
}
|
||
|
||
::v-deep .el-radio-button:first-child .el-radio-button__inner {
|
||
border-left: none;
|
||
// border-radius: 4px 0 0 4px;
|
||
//box-shadow: none!important;
|
||
}
|
||
|
||
.item-title {
|
||
margin: 10px 10px 10px 0;
|
||
font-size: 14px;
|
||
color: #6E7B84;
|
||
}
|
||
|
||
.item-line {
|
||
padding-left: 2px;
|
||
height: 20px;
|
||
background: #ddd;
|
||
}
|
||
|
||
.btn-label {
|
||
position: relative;
|
||
display: inline-block;
|
||
outline: 0;
|
||
|
||
span {
|
||
padding: 7px 15px;
|
||
font-size: 12px;
|
||
border-radius: 0;
|
||
white-space: nowrap;
|
||
background: #fff;
|
||
border: 1px solid #dcdfe6;
|
||
font-weight: 500;
|
||
border-left: 0;
|
||
color: #606266;
|
||
-webkit-appearance: none;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
outline: 0;
|
||
margin: 0;
|
||
position: relative;
|
||
cursor: pointer;
|
||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||
}
|
||
}
|
||
|
||
.searchbar {
|
||
background-color: #ffffff;
|
||
// border: 1px solid #f3f3f3;
|
||
// width: 900px;
|
||
// padding: 5px 20px;
|
||
}
|
||
|
||
.fixed {
|
||
position: fixed;
|
||
top: 0px;
|
||
background-color: #f0f0f0;
|
||
z-index: 999;
|
||
height: 50px;
|
||
}
|
||
|
||
.content-div {
|
||
.quyer-tag {
|
||
|
||
// margin-left: 10px;
|
||
.order-class {
|
||
margin: 30px 0;
|
||
color: #6E7B84;
|
||
text-align: left;
|
||
font-size: 14px;
|
||
padding: 4px 8px;
|
||
margin-right: 30px;
|
||
}
|
||
|
||
.actice {
|
||
background: #387DF7;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
/* 分页div */
|
||
.pagination-div {
|
||
text-align: center;
|
||
padding: 10px 0;
|
||
margin: 10px;
|
||
|
||
.pag-text {
|
||
border: 1px solid #292828;
|
||
padding: 10px 20px;
|
||
border-radius: 20px;
|
||
background: #fff;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.pag-text-msg {
|
||
padding: 10px 20px;
|
||
background: #fff;
|
||
}
|
||
}
|
||
|
||
.search-div {
|
||
background: #fff;
|
||
padding: 10px 15px;
|
||
border-radius: 8px;
|
||
|
||
::v-deep .el-input {
|
||
//width: 420px;
|
||
height: 38px;
|
||
//margin-bottom: 13px;
|
||
|
||
.el-input__inner {
|
||
height: 38px;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.el-input-group__append {
|
||
width: 44px;
|
||
height: 38px;
|
||
border: 0;
|
||
padding: 0;
|
||
background: #3e7fff;
|
||
border-radius: 0;
|
||
|
||
.el-button {
|
||
margin: 0;
|
||
border: 0;
|
||
width: 100%;
|
||
height: 38px;
|
||
padding: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.el-icon-search {
|
||
color: #fff;
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// .tip{
|
||
// color:#999999;
|
||
// font-size: 12px;
|
||
// >span{
|
||
// margin-right: 8px;
|
||
// cursor: pointer;
|
||
// }
|
||
// }
|
||
.search-item {
|
||
// padding: 10px 0;
|
||
}
|
||
|
||
.search-item:not(:last-child) {
|
||
// border-bottom: 1px solid #dfdfdf;
|
||
}
|
||
|
||
.search-item-sub {
|
||
// margin-top: 10px;
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
.search-div-collapse {
|
||
display: block;
|
||
}
|
||
|
||
.search-div-expand {
|
||
// display: none;
|
||
}
|
||
|
||
.search-div-more {
|
||
text-align: center;
|
||
}
|
||
|
||
.order-div {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0px 15px 0 0px;
|
||
|
||
.order-count {
|
||
font-size: 14px;
|
||
color: #6E7B84;
|
||
|
||
span {
|
||
color: #000;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.hot-tags-wrapper {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
align-items: center;
|
||
padding-top: 2px;
|
||
}
|
||
//.search-div.nav {
|
||
// display: block;
|
||
// width: 100%;
|
||
// clear: both;
|
||
//}
|
||
.search-item-type {
|
||
line-height: 25px;
|
||
padding-right: 10px;
|
||
width: 85px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
//.option-item {
|
||
// font-family: "Menlo", "苹方-简" !important;
|
||
// color: #3d3d3d;
|
||
// display: inline-block;
|
||
// font-size: 14px;
|
||
// margin: 0px 15px;
|
||
// cursor: pointer
|
||
//}
|
||
|
||
.option-border {
|
||
width: 2px;
|
||
display: inline-block;
|
||
height: 15px;
|
||
margin: 0px 20px -2px 20px;
|
||
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 {
|
||
color: #387DF7;
|
||
}
|
||
|
||
|
||
|
||
/* 关键字部分匹配高亮样式 */
|
||
.keyword-highlight {
|
||
color: #387DF7 !important;
|
||
font-weight: bold;
|
||
background-color: transparent !important;
|
||
}
|
||
/* 导航标签完全匹配高亮样式 */
|
||
.exact-match-highlight {
|
||
color: #387DF7 !important;
|
||
font-weight: bold;
|
||
background-color: transparent !important;
|
||
}
|
||
/* 混合模式下的特殊样式（可选） */
|
||
.mixed-exact-highlight {
|
||
color: #387DF7 !important;
|
||
font-weight: bold;
|
||
background-color: #f0f7ff !important;
|
||
padding: 1px 3px;
|
||
border-radius: 2px;
|
||
}
|
||
/* 确保标签基础样式 */
|
||
.course-tags ::v-deep .el-tag {
|
||
color: #333333;
|
||
background-color: #f4f4f5;
|
||
border-color: #e9e9eb;
|
||
}
|
||
.course-tags ::v-deep .el-tag .keyword-highlight,
|
||
.course-tags ::v-deep .el-tag .exact-match-highlight {
|
||
color: #387DF7 !important;
|
||
font-weight: bold;
|
||
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>
|