This commit is contained in:
zhaofang
2022-09-02 18:00:18 +08:00
parent 872b77a6fb
commit f998be66c8
10 changed files with 60 additions and 46 deletions

View File

@@ -80,7 +80,7 @@
<div class="xrow-course course-index" v-for="(cinfo,cidx) in courseList" :key="cinfo.id" v-if="(courseList.length<=course.pageSize) || (cidx<parseInt(courseList.length/columns)*columns)">
<div class="course-card">
<a :href="toCourseDetail(cinfo)">
<div class="course-image-box">
<div class="course-image-box" style="height:196px">
<course-image height="196px" :course="cinfo"></course-image>
<!-- <span v-if="cinfo.type < 21" class="course-type-title course-type">录播课</span>
<span v-if="cinfo.type==30" class="course-type-title course-type">线下课</span>
@@ -148,7 +148,7 @@
<div class="list-content">
<div class="list-img">
<course-image :course="item"></course-image>
<span v-if="item.type < 21" class="course-type">录播</span>
<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>
@@ -196,7 +196,7 @@
<div class="list-content">
<div class="list-img">
<course-image :course="item"></course-image>
<span v-if="item.type < 21" class="course-type">录播</span>
<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>
@@ -236,12 +236,11 @@
<img style="width:96px;height:52px" :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"></course-image>
<span v-if="item.type < 21" class="course-type">录播</span>
<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>
@@ -800,17 +799,19 @@ export default {
<style scoped lang="scss">
.course-card{
// height: 196px;
position: relative;
}
// ::v-deep .course-image-box :hover .el-image{
// transition: all 10s;
// z-index: 999;
// position: absolute;
// top: -50%;
// width: 500px !important;
// height: 500px !important;
::v-deep .course-image-box :hover .el-image{
transition: all 0.5s;
z-index: 999;
position: absolute;
top: -50px;
left: -35px;
width: 420px !important;
height: 236px !important;
// }
}
.list-active{
display: none;
@@ -834,6 +835,9 @@ export default {
width: 125px;
height: 70px;
position: relative;
::v-deep .el-image{
border-radius: 4px !important;
}
img{
width: 100%;
height: 100%;
@@ -881,6 +885,7 @@ export default {
position: relative;
}
.list-info:hover .list-active{
// transition: all 0.5s;
display: block;
}
@@ -1017,10 +1022,13 @@ export default {
}
.course-image-box {
position: relative;
// height: 196px;
height: 196px;
// width: 350px;
width: 100%;
height: 100%;
::v-deep .el-image{
border-radius: 4px !important;
}
.course-image {
width: 100%;
height: 148px;