|
|
|
|
@ -3,39 +3,27 @@ |
|
|
|
|
<div class="search"> |
|
|
|
|
<h6>精品课程，精彩讲解</h6> |
|
|
|
|
<div class="input"> |
|
|
|
|
<img src="@/assets/img/search.png" |
|
|
|
|
alt=""> |
|
|
|
|
<input type="text" |
|
|
|
|
placeholder="请输入课程名称" |
|
|
|
|
v-model="keyword"> |
|
|
|
|
<img src="@/assets/img/search.png" alt=""> |
|
|
|
|
<input type="text" placeholder="请输入课程名称" v-model="keyword"> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="tabs"> |
|
|
|
|
<a class="item" |
|
|
|
|
v-for="(item, i) in tabs" |
|
|
|
|
:key="i" |
|
|
|
|
:class="{active: item.id == active}" |
|
|
|
|
@click="tabChange(item)">{{ item.name }}</a> |
|
|
|
|
<a class="item" v-for="(item, i) in tabs" :key="i" :class="{ active: item.id == active }" |
|
|
|
|
@click="tabChange(item)">{{ item.name }}</a> |
|
|
|
|
</div> |
|
|
|
|
<!-- 课程筛选 --> |
|
|
|
|
<div class="filter"> |
|
|
|
|
<div class="wrap-inner" |
|
|
|
|
style="padding-bottom: 0"> |
|
|
|
|
<div class="wrap-inner" style="padding-bottom: 0"> |
|
|
|
|
<dl v-if="active != 2"> |
|
|
|
|
<dt>课程分类：</dt> |
|
|
|
|
<dd :class="{active: form.categoryId === ''}" |
|
|
|
|
@click="changeCategory('')">不限</dd> |
|
|
|
|
<dd v-for="(item, i) in classificationList" |
|
|
|
|
:key="i" |
|
|
|
|
:class="{active: form.categoryId === item.id}" |
|
|
|
|
@click="changeCategory(item.id)">{{ item.classificationName }}</dd> |
|
|
|
|
<dd :class="{ active: form.categoryId === '' }" @click="changeCategory('')">不限</dd> |
|
|
|
|
<dd v-for="(item, i) in classificationList" :key="i" :class="{ active: form.categoryId === item.id }" |
|
|
|
|
@click="changeCategory(item.id)">{{ item.classificationName }}</dd> |
|
|
|
|
</dl> |
|
|
|
|
<dl> |
|
|
|
|
<dt>课程类型：</dt> |
|
|
|
|
<dd v-for="(item, i) in types" |
|
|
|
|
:key="i" |
|
|
|
|
:class="{active: form.courseType === item.id}" |
|
|
|
|
@click="changeType(item.id)">{{ item.name }}</dd> |
|
|
|
|
<dd v-for="(item, i) in types" :key="i" :class="{ active: form.courseType === item.id }" |
|
|
|
|
@click="changeType(item.id)">{{ item.name }}</dd> |
|
|
|
|
</dl> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -44,48 +32,36 @@ |
|
|
|
|
<div class="course-bg"></div> |
|
|
|
|
<template v-if="list.length"> |
|
|
|
|
<ul> |
|
|
|
|
<li v-for="(item, index) in list" |
|
|
|
|
:key="index" |
|
|
|
|
@click="toDetail(item.id)"> |
|
|
|
|
<img :src="item.coverUrl" |
|
|
|
|
alt="" /> |
|
|
|
|
<li v-for="(item, index) in list" :key="index" @click="toDetail(item.id)"> |
|
|
|
|
<img :src="item.coverUrl" alt="" /> |
|
|
|
|
<div class="title">{{ item.courseName }}</div> |
|
|
|
|
<div class="desc" |
|
|
|
|
:class="{ie: core.isIE(),ie: core.isFirefox()}" |
|
|
|
|
v-html="item.courseIntroduction"></div> |
|
|
|
|
<div class="desc" :class="{ ie: core.isIE(), ie: core.isFirefox() }" v-html="item.courseIntroduction"></div> |
|
|
|
|
<div class="metas"> |
|
|
|
|
<div class="meta"> |
|
|
|
|
<i class="el-icon-view"></i> |
|
|
|
|
{{ item.pageviews }} |
|
|
|
|
</div> |
|
|
|
|
<div class="meta collect" |
|
|
|
|
@click.stop="collect(item)"> |
|
|
|
|
<div class="meta collect" @click.stop="collect(item)"> |
|
|
|
|
<i :class="item.collectionStatus ? 'el-icon-star-on' : 'el-icon-star-off'"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="meta"> |
|
|
|
|
<i class="el-icon-user"></i> |
|
|
|
|
{{ item.schoolName }} |
|
|
|
|
</div> |
|
|
|
|
<span v-if="item.courseType == 0" |
|
|
|
|
class="type">{{ item.courseType == 1 ? '付费' : '免费'}}</span> |
|
|
|
|
<span v-if="item.courseType == 0" class="type">{{ item.courseType == 1 ? '付费' : '免费' }}</span> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<div class="pagination"> |
|
|
|
|
<el-pagination background |
|
|
|
|
layout="total, prev, pager, next" |
|
|
|
|
:total="total" |
|
|
|
|
@current-change="handleCurrentChange" |
|
|
|
|
:current-page="page" |
|
|
|
|
:page-size="pageSize"> |
|
|
|
|
<el-pagination background layout="total, prev, pager, next" :total="total" |
|
|
|
|
@current-change="handleCurrentChange" :current-page="page" :page-size="pageSize"> |
|
|
|
|
</el-pagination> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<div class="empty"> |
|
|
|
|
<div> |
|
|
|
|
<img src="@/assets/img/none.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img src="@/assets/img/none.png" alt=""> |
|
|
|
|
<p>暂无课程</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -250,183 +226,210 @@ export default { |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.search { |
|
|
|
|
position: relative; |
|
|
|
|
padding: 100px 0 130px; |
|
|
|
|
text-align: center; |
|
|
|
|
background: url(../../../assets/img/course-bg2.png) (73px 50px)/250px auto no-repeat, |
|
|
|
|
url(../../../assets/img/course-bg4.png) (top left) / auto no-repeat, |
|
|
|
|
url(../../../assets/img/course-bg3.png) (top right) / auto no-repeat, |
|
|
|
|
url(../../../assets/img/course-bg1.png) 0 0/100% 100% no-repeat; |
|
|
|
|
|
|
|
|
|
h6 { |
|
|
|
|
margin-bottom: 25px; |
|
|
|
|
font-size: 26px; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.input { |
|
|
|
|
position: relative; |
|
|
|
|
padding: 100px 0 130px; |
|
|
|
|
width: 700px; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 19px; |
|
|
|
|
left: 14px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
input { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 62px; |
|
|
|
|
line-height: 62px; |
|
|
|
|
padding: 0 50px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #333; |
|
|
|
|
border: 0; |
|
|
|
|
outline: none; |
|
|
|
|
border-radius: 4px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tabs { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.item { |
|
|
|
|
padding: 0 10px; |
|
|
|
|
margin-right: 16px; |
|
|
|
|
font-size: 17px; |
|
|
|
|
text-align: center; |
|
|
|
|
background: url(../../../assets/img/course-bg2.png) (73px 50px)/250px auto no-repeat, |
|
|
|
|
url(../../../assets/img/course-bg4.png) (top left) / auto no-repeat, |
|
|
|
|
url(../../../assets/img/course-bg3.png) (top right) / auto no-repeat, |
|
|
|
|
url(../../../assets/img/course-bg1.png) 0 0/100% 100% no-repeat; |
|
|
|
|
h6 { |
|
|
|
|
margin-bottom: 25px; |
|
|
|
|
font-size: 26px; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
.input { |
|
|
|
|
position: relative; |
|
|
|
|
width: 700px; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
img { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 19px; |
|
|
|
|
left: 14px; |
|
|
|
|
} |
|
|
|
|
input { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 62px; |
|
|
|
|
line-height: 62px; |
|
|
|
|
padding: 0 50px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #333; |
|
|
|
|
border: 0; |
|
|
|
|
outline: none; |
|
|
|
|
border-radius: 4px; |
|
|
|
|
color: #333; |
|
|
|
|
line-height: 50px; |
|
|
|
|
border-bottom: 3px solid transparent; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
color: #007eff; |
|
|
|
|
border-color: #007eff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.tabs { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
.item { |
|
|
|
|
padding: 0 10px; |
|
|
|
|
margin-right: 16px; |
|
|
|
|
font-size: 17px; |
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
|
|
.wrap { |
|
|
|
|
.filter { |
|
|
|
|
width: 100%; |
|
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
|
|
dl { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin: 20px 0; |
|
|
|
|
|
|
|
|
|
dt { |
|
|
|
|
color: #333; |
|
|
|
|
line-height: 50px; |
|
|
|
|
border-bottom: 3px solid transparent; |
|
|
|
|
font-size: 16px; |
|
|
|
|
font-weight: 600; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
dd { |
|
|
|
|
padding: 5px 15px; |
|
|
|
|
color: #6a6a6a; |
|
|
|
|
font-size: 16px; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
cursor: pointer; |
|
|
|
|
border-radius: 4px; |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
color: #007eff; |
|
|
|
|
border-color: #007eff; |
|
|
|
|
color: $main-color; |
|
|
|
|
background-color: #e6f0ff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.wrap { |
|
|
|
|
.filter { |
|
|
|
|
width: 100%; |
|
|
|
|
background-color: #fff; |
|
|
|
|
dl { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin: 20px 0; |
|
|
|
|
dt { |
|
|
|
|
color: #333; |
|
|
|
|
font-size: 16px; |
|
|
|
|
font-weight: 600; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
dd { |
|
|
|
|
padding: 5px 15px; |
|
|
|
|
color: #6a6a6a; |
|
|
|
|
font-size: 16px; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
cursor: pointer; |
|
|
|
|
border-radius: 4px; |
|
|
|
|
&.active { |
|
|
|
|
color: $main-color; |
|
|
|
|
background-color: #e6f0ff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.courses { |
|
|
|
|
position: relative; |
|
|
|
|
padding: 10px 0 20px; |
|
|
|
|
background: url(../../../assets/img/course3.png) 0 0 / auto no-repeat; |
|
|
|
|
|
|
|
|
|
.course-bg { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
right: 0; |
|
|
|
|
width: 602px; |
|
|
|
|
height: 100%; |
|
|
|
|
background: url(../../../assets/img/course4.png) (0 -100px)/140% 140% no-repeat; |
|
|
|
|
} |
|
|
|
|
.courses { |
|
|
|
|
position: relative; |
|
|
|
|
padding: 10px 0 20px; |
|
|
|
|
background: url(../../../assets/img/course3.png) 0 0 / auto no-repeat; |
|
|
|
|
.course-bg { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
right: 0; |
|
|
|
|
width: 602px; |
|
|
|
|
height: 100%; |
|
|
|
|
background: url(../../../assets/img/course4.png) (0 -100px)/140% 140% no-repeat; |
|
|
|
|
} |
|
|
|
|
ul { |
|
|
|
|
position: relative; |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
width: 90%; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
li { |
|
|
|
|
width: calc(20% - 20px); |
|
|
|
|
min-height: 250px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
padding: 18px; |
|
|
|
|
margin: 10px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
img { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 165px; |
|
|
|
|
transition: 0.3s; |
|
|
|
|
} |
|
|
|
|
.title { |
|
|
|
|
margin: 10px 0 5px; |
|
|
|
|
color: #0b1d30; |
|
|
|
|
font-size: 16px; |
|
|
|
|
word-wrap: break-word; |
|
|
|
|
word-break: break-all; |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
.desc span { |
|
|
|
|
color: #f00; |
|
|
|
|
font-size: 14px; |
|
|
|
|
background-color: #f00; |
|
|
|
|
} |
|
|
|
|
.desc { |
|
|
|
|
color: #757f92; |
|
|
|
|
font-size: 14px; |
|
|
|
|
display: -webkit-box; |
|
|
|
|
-webkit-box-orient: vertical; |
|
|
|
|
-webkit-line-clamp: 2; |
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
&.ie { |
|
|
|
|
height: 80px; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.type { |
|
|
|
|
display: inline-block; |
|
|
|
|
padding: 2px 10px; |
|
|
|
|
border-radius: 20px; |
|
|
|
|
color: #1cdbb8; |
|
|
|
|
border: 1px solid; |
|
|
|
|
} |
|
|
|
|
.metas { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
} |
|
|
|
|
.meta { |
|
|
|
|
color: #a9a9a9; |
|
|
|
|
font-size: 12px; |
|
|
|
|
} |
|
|
|
|
.collect { |
|
|
|
|
font-size: 20px; |
|
|
|
|
} |
|
|
|
|
&:hover { |
|
|
|
|
box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), |
|
|
|
|
0px 1px 2px -2px rgba(142, 123, 253, 0.16); |
|
|
|
|
img { |
|
|
|
|
transform: scale(1.05); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
ul { |
|
|
|
|
position: relative; |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
width: 90%; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
li { |
|
|
|
|
width: calc(20% - 20px); |
|
|
|
|
min-height: 250px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
padding: 18px; |
|
|
|
|
margin: 10px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 165px; |
|
|
|
|
transition: 0.3s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
margin: 10px 0 5px; |
|
|
|
|
color: #0b1d30; |
|
|
|
|
font-size: 16px; |
|
|
|
|
word-wrap: break-word; |
|
|
|
|
word-break: break-all; |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.desc span { |
|
|
|
|
color: #f00; |
|
|
|
|
font-size: 14px; |
|
|
|
|
background-color: #f00; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.desc { |
|
|
|
|
color: #757f92; |
|
|
|
|
font-size: 14px; |
|
|
|
|
display: -webkit-box; |
|
|
|
|
-webkit-box-orient: vertical; |
|
|
|
|
-webkit-line-clamp: 2; |
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
&.ie { |
|
|
|
|
height: 80px; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
@media (max-width: 1700px) { |
|
|
|
|
li { |
|
|
|
|
width: calc(25% - 20px); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.type { |
|
|
|
|
display: inline-block; |
|
|
|
|
padding: 2px 10px; |
|
|
|
|
border-radius: 20px; |
|
|
|
|
color: #1cdbb8; |
|
|
|
|
border: 1px solid; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.metas { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.meta { |
|
|
|
|
color: #a9a9a9; |
|
|
|
|
font-size: 12px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.collect { |
|
|
|
|
font-size: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), |
|
|
|
|
0px 1px 2px -2px rgba(142, 123, 253, 0.16); |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
transform: scale(1.05); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media (max-width: 1700px) { |
|
|
|
|
li { |
|
|
|
|
width: calc(25% - 20px); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
