mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-10 19:36:43 +08:00
1537 lines
50 KiB
Vue
1537 lines
50 KiB
Vue
<template>
|
||
<div id="couser-list-content" class="couser-list-content">
|
||
<div class="course-banner">
|
||
<portal-header current="course" textColor="#fff" @emitInput="emitInput"></portal-header>
|
||
</div>
|
||
<div style="padding-top:30px" class="">
|
||
<div class="xcontent2">
|
||
<div class="xcontent2-main content-div">
|
||
<div class="search-div" style="margin-right:36px">
|
||
<div class="searchbar" style="padding-right: 40px;" v-if="stagList.length > 0">
|
||
<span @click="handleClearTags" style="float: right;margin-top: 6px;margin-right: -20px;color: #858585;cursor: pointer;" title="清除查询条件"><i class="el-icon-close"></i> 清除</span>
|
||
<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>
|
||
<div class="search-item">
|
||
<div style="margin-top:10px; display: flex;">
|
||
<div style="line-height: 25px;padding-right: 10px;">
|
||
<span class="item-title" style="padding-right: 5px;">授课方式:</span>
|
||
</div>
|
||
<!-- // 10微课，21在线课(直播)；20:在线课( 录播)；30:面授课；40:学习项目,90:混合式， -->
|
||
<div>
|
||
<a @click="handleTypeAllClick(1)" class="option-item" :class="{'option-active':ctypeTagAll}">全部</a>
|
||
<a @click="handleTypeClick(ctypeList[0],ctypeList)" class="option-item" :class="{'option-active':ctypeList[0].checked}">录播课</a>
|
||
<a @click="handleTypeClick(ctypeList[1],ctypeList)" class="option-item" :class="{'option-active':ctypeList[1].checked}">线下课</a>
|
||
<a class="option-border"> </a>
|
||
<a @click="handleTypeClick(ctypeList[2],ctypeList)" class="option-item" :class="{'option-active':ctypeList[2].checked}">学习项目</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="search-item">
|
||
<div style="line-height: 25px;margin-top:10px; display: flex;">
|
||
<div class="search-item-type">
|
||
<span class="item-title" style="padding-right: 5px;">一级分类:</span>
|
||
</div>
|
||
<div>
|
||
<a @click="handleTypeAllClick(11)" class="option-item" :class="{'option-active':oneTagAll}">全部</a>
|
||
<a v-for="one in oneList" @click="handleOptionClick(one,oneList,1)" class="option-item" :class="{'option-active':one.checked}">{{one.name}}</a>
|
||
<a class="option-border"> </a>
|
||
<a class="option-item">
|
||
<span @click="jumUX()" class="Uxtext" style=""> U选小课堂
|
||
<span class="uxicon">
|
||
<svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
|
||
</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="search-item" v-if="twoList.length>0">
|
||
<div style="line-height: 25px;margin-top:10px; display: flex;justify-content: flex-start;">
|
||
<div class="search-item-type">
|
||
<span class="item-title" style="padding-right: 5px;">二级分类:</span>
|
||
</div>
|
||
<div style="white-space: nowrap;">
|
||
<a @click="handleTypeAllClick(12)" class="option-item" :class="{'option-active':twoTagAll}">全部</a>
|
||
</div>
|
||
<div>
|
||
<a v-for="two in twoList" @click="handleOptionClick(two,twoList,2)" class="option-item" :class="{'option-active':two.checked}">{{two.name}}</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="search-item" v-if="threeList.length>0">
|
||
<div style="line-height: 25px;margin-top:10px; display: flex;justify-content: flex-start;">
|
||
<div class="search-item-type">
|
||
<span class="item-title" style="padding-right: 5px;">三级分类:</span>
|
||
</div>
|
||
<div style="white-space: nowrap;">
|
||
<a @click="handleTypeAllClick(13)" class="option-item" :class="{'option-active':threeTagAll}">全部</a>
|
||
</div>
|
||
<div>
|
||
<a v-for="three in threeList" :key="three.id" @click="handleOptionClick(three,threeList,3)" class="option-item" :class="{'option-active':three.checked}">{{three.name}}</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="order-div">
|
||
<span class="quyer-tag">
|
||
<el-button type="text" class="order-class" @click="orderChange('studys')" :class="{ actice: course.orderField == 'studys' }">最热</el-button>
|
||
<el-button type="text" class="order-class" @click="orderChange('publishTime')" :class="{ actice: course.orderField == 'publishTime' }">最新</el-button>
|
||
</span>
|
||
</div>
|
||
<div class="xcourse-list">
|
||
<div class="xcourse-card" v-for="(cinfo,cidx) in courseList" :key="cinfo.id">
|
||
<div class="course-card">
|
||
<div class="course-card-favorite">
|
||
<interactBar :type="1" nodeWidth="20px" :data="cinfo" :courseExclusive="true" :comments="false" :praises="false" :shares="false" :views="false"></interactBar>
|
||
</div>
|
||
<!-- <a :href="toCourseDetail(cinfo)"> -->
|
||
<a @click="toCourseDetail(cinfo)">
|
||
<div class="course-image-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 style="width:80%" class="course-title two-line-ellipsis" :title="cinfo.title" v-html="cinfo.name">
|
||
|
||
</div>
|
||
|
||
<div class="couresstartTime">
|
||
<span v-if="cinfo.type == 30 && cinfo.startTime">开课时间：{{ cinfo.startTime }}</span>
|
||
</div>
|
||
|
||
<div class="course-info">
|
||
<div class="course-info-user">
|
||
<!-- <span class="course-info-author" v-if="cinfo.teacher">{{cinfo.teacher=='BOE教师'? '':cinfo.teacher}}</span> -->
|
||
<span class="course-info-author" v-if="cinfo.teacher" v-html="cinfo.teacher"></span>
|
||
<span class="course-info-studys" >{{formatNum(cinfo.studies)}}人学习</span>
|
||
</div>
|
||
<div class="course-info-score">
|
||
<div>
|
||
<div v-if="cinfo.score">
|
||
<span class="course-score-value">{{toScore(cinfo.score)}}分</span>
|
||
</div>
|
||
<div v-else class="course-score-no">未评分</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</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-else-if="moreState == 2">数据加载中</span>
|
||
<span class="pag-text-msg" v-else-if="moreState == 3 && courseList.length > 0">没有更多数据了</span>
|
||
<span class="notcoures" v-else-if="moreState == 3 && courseList.length==0">
|
||
<img :src="`${webBaseUrl}/images/nocouresimg.png`" alt="">
|
||
<h5>暂无课程，请优先学习其它课程吧～</h5>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="xcontent2-minor">
|
||
<div id="fixd-box">
|
||
<div v-if="identity == 2 || identity == 3 || identity == 5">
|
||
<div class="portal-model-btn pointer" @click="toNeedCourse">
|
||
<svg-icon style="margin-right: 10px;font-size: 24px;" icon-class="upCourse"></svg-icon>
|
||
上传课程
|
||
</div>
|
||
</div>
|
||
<div class="portal-ranking-list ranking-bg">
|
||
<div class="ranking-title">好评榜</div>
|
||
<ul class="ranking-data">
|
||
<li class="list-info" v-for="(item, index) in scorelist" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
|
||
<a style="display: inherit" @click="toCourseDetail(item)">
|
||
<span class="portal-right-text blue-one" v-if="index==0">
|
||
<img :src="`${webBaseUrl}/images/listblue01.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text blue-tow" v-if="index==1">
|
||
<img :src="`${webBaseUrl}/images/listblue02.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text blue-three" v-if="index==2">
|
||
<img :src="`${webBaseUrl}/images/listblue03.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text" v-if="index==3">
|
||
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text" v-if="index==4">
|
||
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
|
||
</span>
|
||
<span class="portal-title-desc title-line-ellipsis" v-if="item.images == ''" style="font-size: 14px;">{{ item.name }}</span>
|
||
<span class="portal-title-desc" v-else style="font-size: 14px;">
|
||
<!-- <img v-if="index == 0" class="rankimg" :src="fileBaseUrl + item.images" alt=""/> -->
|
||
<span class="portal-images-title two-line-ellipsis">{{ item.name }}</span>
|
||
</span>
|
||
|
||
<div class="list-active">
|
||
<div class="list-content">
|
||
<div class="list-img">
|
||
<course-image :course="item" :text="false" width="108px" height="60px"></course-image>
|
||
<span v-if="item.type < 21" class="course-type">录播</span>
|
||
<span v-if="item.type==30" class="course-type">线下课</span>
|
||
<span v-if="item.type==40" class="course-type">学习项目</span>
|
||
</div>
|
||
<div class="list-text">
|
||
<h6 class="index-one-line-ellipsis">{{item.name}}</h6>
|
||
<span class="index-one-line-ellipsis">{{item.publishTime}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="list-bottom">
|
||
<couresinteract :type="1" :data="item" ></couresinteract>
|
||
|
||
<!-- <interactBar :type="1" :data="item" :couseViews="true" :shares="false" :views="false"></interactBar> -->
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div style="margin-top:26px" class="portal-ranking-list ranking-bg1">
|
||
<div class="ranking-title">人气榜</div>
|
||
<ul class="ranking-data">
|
||
<li class="list-info" v-for="(item, index) in ankingList" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
|
||
<a style="display: inherit" @click="toCourseDetail(item)">
|
||
<span class="portal-right-text orange-one" v-if="index==0">
|
||
<img :src="`${webBaseUrl}/images/list-01.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text orange-tow" v-if="index==1">
|
||
<img :src="`${webBaseUrl}/images/list02.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text orange-three" v-if="index==2">
|
||
<img :src="`${webBaseUrl}/images/list03.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text" v-if="index==3">
|
||
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text" v-if="index==4">
|
||
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
|
||
</span>
|
||
<span class="portal-title-desc title-line-ellipsis" v-if="item.images == ''" style="font-size: 14px;">{{ item.name }}</span>
|
||
<span class="portal-title-desc" v-else style="font-size: 14px;">
|
||
<!-- <img v-if="index == 0" class="rankimg" :src="fileBaseUrl + item.images" alt=""/> -->
|
||
<span class="portal-images-title two-line-ellipsis">{{ item.name }}</span>
|
||
</span>
|
||
|
||
<div class="list-active">
|
||
<div class="list-content">
|
||
<div class="list-img">
|
||
<course-image :course="item" :text="false" width="108px" height="60px"></course-image>
|
||
<span v-if="item.type < 21" class="course-type">录播</span>
|
||
<span v-if="item.type==30" class="course-type">线下课</span>
|
||
<span v-if="item.type==40" class="course-type">学习项目</span>
|
||
</div>
|
||
<div class="list-text">
|
||
<h6 class="index-one-line-ellipsis">{{item.name}}</h6>
|
||
<span class="index-one-line-ellipsis">{{item.publishTime}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="list-bottom">
|
||
<couresinteract :type="1" :data="item" ></couresinteract>
|
||
|
||
<!-- <interactBar :type="1" :data="item" :couseViews="true" :shares="false" :views="false"></interactBar> -->
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div style="margin-top:26px" class="portal-ranking-list ranking-bg2">
|
||
<div class="ranking-title">热度榜</div>
|
||
<ul class="ranking-data">
|
||
<li class="list-info" v-for="(item, index) in hotList" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
|
||
<a style="display: inherit" @click="toCourseDetail(item)">
|
||
<span class="portal-right-text orange-one" v-if="index==0">
|
||
<img :src="`${webBaseUrl}/images/listred01 .png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text orange-tow" v-if="index==1">
|
||
<img :src="`${webBaseUrl}/images/listred02.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text orange-three" v-if="index==2">
|
||
<img :src="`${webBaseUrl}/images/listred03.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text" v-if="index==3">
|
||
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text" v-if="index==4">
|
||
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
|
||
</span>
|
||
<span class="portal-title-desc title-line-ellipsis list-lidex" v-if="item.images == ''" style="font-size: 14px;">{{ item.courseName }}</span>
|
||
<span class="portal-title-desc " v-else style="font-size: 14px;">
|
||
<!-- <img v-if="index == 0" class="rankimg" :src="fileBaseUrl + item.images" alt=""/> -->
|
||
<span class="portal-images-title two-line-ellipsis">{{ item.courseName }}</span>
|
||
</span>
|
||
<div class="list-active">
|
||
<div class="list-content">
|
||
<div class="list-img">
|
||
<course-image :course="item" :text="false" width="108px" height="60px"></course-image>
|
||
<!-- <img style="width:96px;height:52px" :src="fileBaseUrl + item.images" alt=""/> -->
|
||
<span v-if="item.type < 21" class="course-type">录播</span>
|
||
<span v-if="item.type==30" class="course-type">线下课</span>
|
||
<span v-if="item.type==40" class="course-type">学习项目</span>
|
||
</div>
|
||
<div class="list-text">
|
||
<h6 class="index-one-line-ellipsis">{{item.courseName}}</h6>
|
||
<span class="index-one-line-ellipsis">{{item.publishTime}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="list-bottom">
|
||
<couresinteract :type="1" :data="item" ></couresinteract>
|
||
<!-- <interactBar :type="1" :data="item" :couseViews="true" :shares="false" :views="false"></interactBar> -->
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- <div class="course-resources pointer"> -->
|
||
<!-- 资源位 -->
|
||
<!-- <img @click="banJump()" :src="fileBaseUrl + resonimg.image" alt=""> -->
|
||
<!-- </div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<portal-footer></portal-footer>
|
||
<portalFloatTools ref="floatTools"></portalFloatTools>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { mapGetters, mapActions } 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 apiCoursePortal from "@/api/modules/coursePortal.js";
|
||
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 apiOldCourse from "@/api/boe/course.js";
|
||
import apiTeacher from "@/api/modules/teacher.js";
|
||
import apiUser from "@/api/system/user.js";
|
||
import scene from "@/api/modules/scene.js";
|
||
import apiUserGroup from "@/api/modules/usergroup.js";
|
||
import interactBar from "@/components/Portal/interactBar.vue";
|
||
import courseImage from "@/components/Course/courseImage.vue";
|
||
import { courseType, getType, toScore,formatDate,formatUserNumber,formatDateByFmt } from "@/utils/tools.js";
|
||
import { deepClone, param } from "../../../utils";
|
||
import apiSearchterm from "@/api/modules/searchterm.js";
|
||
import apiPlace from "@/api/phase2/place.js"
|
||
export default {
|
||
name: "index",
|
||
components: {
|
||
portalHeader,
|
||
portalFooter,
|
||
portalFloatTools,
|
||
courseItem,
|
||
courseForm,
|
||
authorInfo,
|
||
couresinteract,
|
||
courseImage,
|
||
interactBar
|
||
},
|
||
computed: {
|
||
...mapGetters(["resOwnerMap", "sysTypeMap", "userInfo", "identity"]),
|
||
stagList(){ //计算出选择的内容
|
||
let list=[];
|
||
if(this.keyword){
|
||
list.push({
|
||
type:0,
|
||
id:'keyword',
|
||
name:this.keyword,
|
||
checked:true
|
||
})
|
||
}
|
||
this.ctypeList.forEach(item=>{
|
||
if(item.checked){
|
||
list.push(item);
|
||
}
|
||
});
|
||
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);
|
||
}
|
||
})
|
||
// this.oneList.forEach(item=>{
|
||
// if(item.checked){
|
||
// list.push(item);
|
||
// }
|
||
// });
|
||
// this.twoList.forEach(item=>{
|
||
// if(item.checked){
|
||
// list.push(item);
|
||
// }
|
||
// });
|
||
// this.threeList.forEach(item=>{
|
||
// if(item.checked){
|
||
// list.push(item);
|
||
// }
|
||
// });
|
||
//console.log(list,'list');
|
||
return list;
|
||
},
|
||
ctypeTagAll(){
|
||
let flag=this.ctypeList.some(item=>{
|
||
return item.checked;
|
||
});
|
||
return !flag;
|
||
},
|
||
oneTagAll(){
|
||
let flag=this.oneList.some(item=>{
|
||
return item.checked;
|
||
});
|
||
return !flag;
|
||
},
|
||
twoTagAll(){
|
||
let flag=this.twoList.some(item=>{
|
||
return item.checked;
|
||
});
|
||
return !flag;
|
||
},
|
||
threeTagAll(){
|
||
let flag=this.threeList.some(item=>{
|
||
return item.checked;
|
||
});
|
||
return !flag;
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
ctypeList:[
|
||
{type:1,id:20,name:'录播课',checked:false},
|
||
{type:1,id:30,name:'线下课',checked:false},
|
||
{type:1,id:40,name:'学习项目',checked:false},
|
||
],
|
||
oneList:[], //一级分类{type:11}
|
||
twoList:[], //二级分类{type:12}
|
||
threeList:[],//三级分类{type:13}
|
||
|
||
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: "studys",
|
||
keyword:'',//关键词
|
||
topOrder: true,
|
||
orderAsc: false,
|
||
pageIndex: 1, // 第几页
|
||
pageSize: 9 ,//每页多少条
|
||
openCourse:0,//增加的公开课查询
|
||
},
|
||
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
|
||
};
|
||
},
|
||
|
||
mounted() {
|
||
let screenWidth = window.screen.availWidth;
|
||
if (screenWidth < 1280) {
|
||
this.course.pageSize = 9;
|
||
this.columns = 3;
|
||
} else if (screenWidth < 1600) {
|
||
this.course.pageSize = 12;
|
||
this.columns = 3;
|
||
} else if (screenWidth >= 1600) {
|
||
this.course.pageSize = 15;
|
||
this.columns = 3;
|
||
}
|
||
|
||
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 !== {}) {
|
||
this.keyword = this.$route.query.keyword;
|
||
}
|
||
this.loadTypeData();//加载分类
|
||
//this.getSceneData(); //已经没有场景了
|
||
if (this.keyword) {
|
||
this.totalPages = 4;
|
||
}
|
||
|
||
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{
|
||
Promise.all([apiOldCourse.audience(this.userInfo.sysId),apiUserGroup.userGroupIds()]).then(rs=>{
|
||
//console.log(rs,'rs');
|
||
let aids=[];
|
||
if(rs[0].status==200){
|
||
aids.push(rs[0].result);
|
||
}
|
||
if(rs[1].status==200){
|
||
aids.push(rs[1].result);
|
||
}
|
||
this.audiences=aids;
|
||
sessionStorage.setItem(localKey,this.audiences);
|
||
this.search();
|
||
})
|
||
}
|
||
}
|
||
|
||
//this.searchterm();//搜索词已经没有了
|
||
this.couresreso();//广告位
|
||
|
||
},
|
||
beforeDestroy() {
|
||
window.removeEventListener("scroll", this.handleScroll);
|
||
},
|
||
methods: {
|
||
stagClose(tag,tagIndex){
|
||
tag.checked=false;
|
||
if(tag.type==0){
|
||
this.keyword='';
|
||
}
|
||
this.searchData();
|
||
},
|
||
|
||
handleTypeAllClick(t){
|
||
if(t==1){
|
||
this.ctypeList.forEach(ct=>{
|
||
ct.checked=false;
|
||
})
|
||
}else if(t==11){
|
||
this.oneList.forEach(ct=>{
|
||
ct.checked=false;
|
||
});
|
||
this.twoList.forEach(ct=>{
|
||
ct.checked=false;
|
||
});
|
||
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.oneList.forEach(one=>{
|
||
one.checked=false;
|
||
one.children.forEach(two=>{
|
||
two.checked=false;
|
||
two.children.forEach(three=>{
|
||
three.checked=false;
|
||
})
|
||
})
|
||
});
|
||
this.twoList=[];
|
||
this.threeList=[];
|
||
this.searchData();
|
||
},
|
||
handleTypeClick(item,list){
|
||
item.checked=!item.checked;
|
||
//使用上面一行是可以多选，使用下面是单选
|
||
// list.forEach(row=>{
|
||
// row.checked=false;
|
||
// })
|
||
// item.checked=true;
|
||
|
||
this.searchData();
|
||
},
|
||
handleOptionClick(item,list,level){
|
||
item.checked=!item.checked;
|
||
//使用上面一行是可以多选，使用下面是单选
|
||
// list.forEach(row=>{
|
||
// row.checked=false;
|
||
// })
|
||
// item.checked=true;
|
||
//以下是新的规则的修改，
|
||
if(!item.checked){
|
||
//清空它下面的所有的中的
|
||
item.children.forEach(subItem=>{
|
||
subItem.checked=false;
|
||
if(subItem.children){
|
||
subItem.children.forEach(sub=>{
|
||
sub.checked=false;
|
||
})
|
||
}
|
||
});
|
||
if(level==1){
|
||
this.twoList=[];
|
||
this.threeList=[];
|
||
}
|
||
if(level==2){
|
||
this.threeList=[];
|
||
}
|
||
this.searchData();
|
||
return;
|
||
}
|
||
|
||
let $this=this;
|
||
if(level==1){ //一级的情况
|
||
this.twoList=[];
|
||
this.threeList=[];
|
||
let lastCheked=null;
|
||
item.children.forEach(two=>{
|
||
$this.twoList.push(two);
|
||
if(two.checked){
|
||
lastCheked=two;
|
||
}
|
||
});
|
||
if(lastCheked!=null){
|
||
$this.threeList=lastCheked.children;
|
||
item.children.forEach(three=>{
|
||
});
|
||
}
|
||
}else if(level==2){ //二级的情况
|
||
this.threeList=item.children;
|
||
}else if(level==3){ //三级的情况
|
||
|
||
}
|
||
//this.handleChangeTypes(item);
|
||
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);
|
||
// })
|
||
// }
|
||
// });
|
||
// }
|
||
// })
|
||
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=>{
|
||
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
|
||
}
|
||
|
||
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);
|
||
});
|
||
|
||
}
|
||
} 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.stagList;
|
||
this.searchData();
|
||
},
|
||
handleScroll() {
|
||
if(this.courseList.length>6){
|
||
|
||
let innerHeight = document.querySelector("#couser-list-content").clientHeight;
|
||
let outerHeight = document.documentElement.clientHeight;
|
||
let scrollTop = document.documentElement.scrollTop;
|
||
let outerWidth = document.querySelector(".xcontent2-minor").clientWidth;
|
||
if (outerHeight + scrollTop + 350 >= innerHeight) {
|
||
if (this.moreState == 1 && this.course.pageIndex < 4) {
|
||
this.loadMore();
|
||
}
|
||
}
|
||
//console.log(this.course.pageIndex,'this.course.pageIndex');
|
||
//加此判断，是为了没有数据时的闪动问题
|
||
//if(this.course.pageIndex >1){
|
||
if (scrollTop > 1176) {
|
||
document.querySelector("#fixd-box").style.cssText =
|
||
"position: fixed;top: -882px;width:"+outerWidth+"px";
|
||
} else {
|
||
document.querySelector("#fixd-box").style.cssText = "position: static";
|
||
}
|
||
//}
|
||
|
||
}
|
||
|
||
},
|
||
toNeedCourse() {
|
||
// 需要先切换标签
|
||
//this.$store.dispatch('SetCurIdentity',2);
|
||
//this.$router.push('/need/course?open=new');
|
||
this.$refs.floatTools.toNeedCourse();
|
||
},
|
||
searchData() {
|
||
this.course.pageIndex = 1;
|
||
this.noPageList = true; //判断接口是否还有数据
|
||
this.noDataList = true; //判断接口是否还有数据
|
||
this.courseList = [];
|
||
this.totalPages = 4;
|
||
this.search();
|
||
},
|
||
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;
|
||
}
|
||
},
|
||
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() {
|
||
//测试时间格式化
|
||
// let s=1650973801;
|
||
// var d = new Date(1650973801*1000);
|
||
// console.log(formatDateByFmt(d,'yyyy-MM-dd hh:mm'),'data');
|
||
|
||
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.companyId=this.userInfo.companyId;
|
||
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;
|
||
}
|
||
});
|
||
|
||
this.isFind = true;
|
||
this.course.device = 1;
|
||
if(this.course.pageIndex == 1) {
|
||
this.courseList = [];
|
||
}
|
||
|
||
let isTopList = [];
|
||
// 隐藏loadMore
|
||
this.moreState = 2;
|
||
await apiCoursePortal.courseSearch(this.course).then(res => {
|
||
if (res.status == 200 && res.result.list.length > 0) {
|
||
this.totalPages = res.result.totalPages;
|
||
res.result.list.forEach(item => {
|
||
// item.startTime
|
||
if(item.startTime != '') {
|
||
item.startTime=formatDateByFmt(new Date(item.startTime*1000),'yyyy-MM-dd hh:mm')
|
||
//let time = item.startTime.split('-');
|
||
//item.startTime = `${time[0]}年${time[1]}月${time[2]}日`
|
||
}
|
||
//教师转化
|
||
if(item.teacher){
|
||
let dotIdx=item.teacher.indexOf(',');
|
||
if(dotIdx>0){
|
||
item.teacher=item.teacher.substring(0,dotIdx);
|
||
}
|
||
}
|
||
if(item.teacher && item.teacher=='BOE教师'){
|
||
item.teacher='';
|
||
}
|
||
|
||
//转化标红显示
|
||
item.title=item.name;
|
||
if(that.course.keyword){
|
||
item.name=that.brightenKeyword(item.name,that.course.keyword);
|
||
}else{
|
||
item.name=item.name;
|
||
}
|
||
|
||
});
|
||
|
||
this.courseList.push(...res.result.list);
|
||
this.moreState = 1;
|
||
} else {
|
||
this.moreState = 3;
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.moreState = 3;
|
||
});
|
||
|
||
},
|
||
// showInApply() {
|
||
// this.inapply.show = true;
|
||
// },
|
||
// pushEnter(type) {
|
||
// this.type1.push(type);
|
||
// },
|
||
// deleteOut(type) {
|
||
// this.type1 = this.type.filter(item => item != type);
|
||
// },
|
||
// chooseShow(type) {
|
||
// return this.type1.some(item => item == type);
|
||
// },
|
||
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}`);
|
||
// }
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.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-image-box:hover{
|
||
transform: scale(1.3) translateY(-15px);
|
||
transition: all 0.6s;
|
||
}
|
||
|
||
|
||
.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: 20;
|
||
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');
|
||
}
|
||
|
||
::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 25px;
|
||
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 {
|
||
padding: 0px 15px 0 0px;
|
||
}
|
||
}
|
||
// .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{
|
||
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;
|
||
}
|
||
.option-border{
|
||
width: 2px;
|
||
display: inline-block;
|
||
height: 15px;
|
||
margin: 0px 20px -2px 20px;
|
||
background: #666;
|
||
}
|
||
.option-active{
|
||
color:#387DF7;
|
||
}
|
||
</style>
|