首页课程适应调整

This commit is contained in:
daihh
2022-10-05 14:29:10 +08:00
parent f0f860473a
commit c43678d326
3 changed files with 555 additions and 335 deletions

View File

@@ -9,8 +9,8 @@
</div>
<img class="banner-img" style=" margin: 0 auto;" :src=" fileBaseUrl + item.image" alt="">
</swiper-slide>
</swiper>
</div>
</swiper>
</div>
<div class="personal-panel">
<div class="personal-img">
<author-img :avatar="userInfo.avatar" :aid="userInfo.aid" :sex="userInfo.sex"></author-img>
@@ -35,11 +35,11 @@
</ul>
</div>
</div>
<div class="portal-content xcontent" >
<div class="xindex-content" >
<!-- 推荐课程 -->
<div class="modules">
<div>
<!--内容块-->
<!--内容块-->
<div class="modules-title">
<span class="modules-text">推荐课程</span>
<span class="quyer-tag">
@@ -57,10 +57,10 @@
</div>
<div class="modules-list xrow" style="margin-right:0px">
<!--一个固定内容-->
<div class="xrow-course course-index">
<div class="course-card boe-index">
<div class="xindex-course">
<a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">
<div class="course-image-box">
<div class="xindex-course-image">
<el-image class="course-image" :src="this.webBaseUrl+'/ad/index_course.png'" fit="fit"></el-image>
<span class="course-type">录播课</span>
</div>
@@ -78,12 +78,11 @@
</div>
</a>
</div>
</div>
<!--内容列表内容-->
<div v-for="course in courseList.list" :key="course.id" class="xrow-course course-index">
<div class="course-card boe-index">
<div v-for="course in courseList.list" :key="course.id" class="xindex-course">
<a :href="toCourseDetail(course)">
<div class="course-image-box">
<div class="xindex-course-image">
<course-image :course="course"></course-image>
<span v-if="course.type == 20 || 10" class="course-type">录播课</span>
</div>
@@ -101,13 +100,12 @@
</div>
</a>
<div class="cor-praises"><interactBar :type="1" :data="course" :comments="false" :praises="false" :shares="false" :views="false"></interactBar></div>
</div>
</div>
</div>
</div>
<div style="margin-top:60px">
<div class="ranking-card portal-right-box course-ran-bg">
<div class="ranking-card xindex-ranking course-ran-bg">
<p class="portal-title-one" style="padding-bottom:12px">课程排行榜</p>
<ul class="course-index-list">
<li class="list-info" v-for="(item, index) in scorelist" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
@@ -139,7 +137,7 @@
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 推荐案例2版 -->
@@ -209,7 +207,7 @@
<a :href="`${webBaseUrl}/article/detail?id=${articleList.first.id}`" style="font-weight: 700;font-size: 20px;">
<div class="article-info-image-box">
<article-image height="100%" width="100%" :article="articleList.first"></article-image>
</div>
</div>
<div class="article-info">
<div class="article-info-title " style="margin-top:10px">
<div class="one-line-ellipsis">
@@ -258,8 +256,8 @@
</div>
</div>
</div>
<!-- <div class="article-info-box">
<div class="article-info">
<div class="article-body" style="display:flex;">
@@ -420,9 +418,9 @@ export default {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
},
},
couname:'',
isNext: true,
pageIndex: 1,
@@ -465,11 +463,11 @@ export default {
this.getQaAnswers();
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
created(){
// undefined
@@ -494,7 +492,7 @@ export default {
this.answersList = res.result;
}
})
},
getAnkingData() {// 文章排行榜
apiIndex.articleViews(7).then(res => {
@@ -525,7 +523,7 @@ export default {
});
},
// bgfun(){
// console.log(this.$refs.bannimg[0]);
// console.log(this.$refs.bannimg[0]);
// this.$nextTick(() => {
// console.log(this.$refs.bannimg[0])
// })
@@ -533,7 +531,7 @@ export default {
couresreso(){
let key = 'index';
apiPlace.detail(key).then(res=>{
let lmj = JSON.parse(res.result.content)
let lmj = JSON.parse(res.result.content)
this.resonimg = lmj
// console.log(this.resonimg)
})
@@ -845,7 +843,7 @@ export default {
color: #6E7B84;
}
}
}
// ::v-deep .course-image-box :hover .el-image{
@@ -856,7 +854,7 @@ export default {
// left: -35px;
// width: 420px !important;
// height: 236px !important;
// }
.course-ran-bg{
background: linear-gradient(180deg, #d7eaff 1%, #FAFAFA 24%);
@@ -915,7 +913,7 @@ export default {
}
}
.personal-ul{
display: flex;
justify-content: space-between;
.label{
@@ -1021,7 +1019,7 @@ export default {
filter:blur(5px);
z-index:-1;
background-size:100% 100%;
}
::v-deep.swiper-slide .games .swiper-slide-active{
@@ -1079,7 +1077,7 @@ export default {
background: linear-gradient(153deg, #A4D3DF 0%, #B4DCE6 100%);
}
margin-right: 0;
}
.case-inter{
position: absolute;
@@ -1132,7 +1130,7 @@ export default {
// height: 60px;
// font-size: 14px;
color: #6E7B84;
// line-height: 20px;
// line-height: 20px;
// margin-bottom: 30px;
}
::v-deep .case-info{
@@ -1227,7 +1225,7 @@ export default {
box-sizing: border-box;
position: relative;
background-color: #ffffff;
::v-deep .cor-praises {
position: absolute;
right: 52px;
@@ -1548,7 +1546,7 @@ export default {
.article-card-left {
// float: left;
.article-card-box {
.article-info-image-box {
.article-info {
height: 400px;