hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-10 03:16:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

首页课程适应调整

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

824
src/assets/styles/portal-index.scss
View File

@@ -1,9 +1,246 @@
/**此文件应该只是包含首页的样式*/
.portal-right-box{
width: 410px;
border-radius: 8px;
padding: 30px;
//首页版心内容区域
.xindex-content {
font-family: 'Noto Sans SC';
margin: 26px auto;
}
.xindex-row{
display: inline-block;
}
// 课程卡片
.xindex-course{
display: inline-block;
vertical-align: top;
border:1px solid #efefef;
padding: 20px;
font-size:0;
margin-right: 20px;
margin-bottom: 20px;
box-sizing: border-box;
position: relative;
background-color: #ffffff;
.cor-praises {
position: absolute;
right: 50px;
bottom: 16px;
.interact-bar-btn{
.interact-bar-value{
display: none;
}
}
}
.xindex-course-image{
position: relative;
min-height: 114px;
// width: 350px;
// height: 200px;
// width: 100%;
.course-type {
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;
}
.course-type-title {
position: absolute;
top: 5px;
right: 0px;
width: 90px;
height: 30px;
line-height: 30px;
text-align: center;
color: #ffffff;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.course-flag {
height: 26px;
position: absolute;
top: 15px;
right: 0;
}
.course-tip {
width: 100%;
height: 26px;
position: absolute;
bottom: 0;
padding: 0 10px;
color: #fff;
font-size: 14px;
.course-study-count {
float: left;
}
.course-time {
float: right;
}
}
}
.cor-icon {
position: absolute;
left: 100px;
top: 54px;
border-radius: 50%;
background: rgba(88, 138, 252, 0.37);
.el-icon-caret-right {
font-size: 36px;
color: #588afc;
}
}
.course-title {
margin: 16px 0 16px 0;
height: 44px;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.course-author {
// margin: 5px 15px;
// padding-bottom: 10px;
display: flex;
justify-content: space-between;
.course-author-left {
font-size: 14px;
color: #6E7B84;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
}
.study-num {
font-size: 14px;
color: #6E7B84;
margin-left: 12px;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.course-score {
padding: 10px 15px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
// border-top: 1px solid #ccc;
.course-score-star {
flex: 1;
}
}
}
.course-score-no {
text-align: right;
font-size: 14px;
color: #6B7C85;
line-height: 30px;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.course-score-value {
font-size: 14px;
// margin-top: 5px;
margin-left: 32px;
line-height: 30px;
color: #FA6400;
font-family: 'Arial';
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
// font-size: 30px;
}
.cardmark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(101, 101, 101, 0.8);
pointer-events: none;
border-radius: 5px;
padding: 10px;
opacity: 0;
-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
-ms-transition: all 1.5s;
-o-transition: all 1.5s;
transition: all 1.5s;
.cardmark-name {
font-size: 18px;
line-height: 30px;
font-weight: 600;
color: #fff;
}
.cardmark-info {
color: #fff;
font-size: 14px;
line-height: 20px;
}
}
.xindex-course:hover .cardmark {
opacity: 1;
}
.xindex-ranking{
min-width: 300px;
border-radius: 8px;
padding: 30px;
.xindex-ranking-title{
font-size: 24px;
font-family: FZLTCHJW--GB1-0, FZLTCHJW--GB1;
font-weight: 600;
color: #000000;
line-height: 28px;
}
.course-index-list{
height: 410px;
overflow-y: auto;
}
.case-index-list{
height: 114px;
overflow-y: auto;
}
.anking-index-list{
height: 320px;
overflow-y: auto;
}
.qa-index-qa{
height: 64px;
overflow-y: auto;
}
}
.nav-bottbor{
width: 75%;
height: 4px;
@@ -219,43 +456,26 @@
}
// boe-index
@media screen and (max-width: 1366px){
.xcontent{
// width: 1000px;
// margin: 0px auto;
margin: 0px 5%;
}
.portal-content {
margin: 26px 87px 0px 87px;
// width: 100%;
.breadcrumb-nav {
margin-bottom: 15px;
font-size: 14px;
font-weight: normal;
color: #666666;
.xindex-content{
width: 1100px;
}
//课程卡片样式
.xindex-course{
width: 240px;
padding: 20px;
margin-right: 20px;
margin-bottom: 20px;
.course-image-box{
width: 200px;
height: 114px;
::v-deep .course-image{
height: 100% !important;
}
}
}
.portal-right-box{
width: 344px;
// height: 544px;
// overflow-y: auto;
.course-index-list{
height: 410px;
overflow-y: auto;
}
.case-index-list{
height: 114px;
overflow-y: auto;
}
.anking-index-list{
height: 320px;
overflow-y: auto;
}
.qa-index-qa{
height: 64px;
overflow-y: auto;
}
}
.xindex-ranking{
width: 300px;
}
.boe-index{
width: 235px;
padding: 20px;
@@ -320,7 +540,7 @@
font-size: 12px;
line-height: 14px;
}
}
}
.boe-qa-index{
@@ -351,7 +571,7 @@
::v-deep .item-author div{
width: 30px !important;
height: 30px !important;
}
}
.el-avatar{
width: 26px !important;
height: 26px !important;
@@ -391,7 +611,7 @@
.article-info-image-box{
width: 200px;
height: 112px;
}
.el-avatar{
width: 26px !important;
@@ -444,28 +664,28 @@
display: none;
}
}
}
}
}
}
@media screen and (max-width: 1680px) and (min-width:1367px){
.xcontent{
// width: 1000px;
// margin: 0px auto;
margin: 0px 5%;
@media screen and (max-width: 1680px) and (min-width:1367px){
.xindex-content{
width: 1366px;
}
.portal-content {
margin: 26px 87px 0px 87px;
// width: 100%;
.breadcrumb-nav {
margin-bottom: 15px;
font-size: 14px;
font-weight: normal;
color: #666666;
.xindex-course{
width: 330px;
padding: 25px;
margin-right: 20px;
margin-bottom: 20px;
.course-image-box{
width: 280px;
height: 100px;
::v-deep .course-image{
height: 100% !important;
}
}
}
.portal-right-box{
width: 344px;
.course-index-list{
@@ -543,7 +763,7 @@
line-height: 20px;
margin-bottom: 30px;
}
}
}
.boe-qa-index{
@@ -607,7 +827,7 @@
.article-info-image-box{
width: 250px;
height: 162px;
}
// .el-avatar{
// width: 26px !important;
@@ -659,252 +879,30 @@
}
}
}
}
}
}
}
@media screen and (max-width: 1920px) and (min-width: 1681px){
.xcontent{
// width: 1000px;
// margin: 0px auto;
// margin: 0px 5%;
}
@media screen and (max-width: 1920px) and (min-width: 1681px){
.xindex-content{
width: 1640px;
}
.portal-content {
margin: 26px 87px 0px 87px;
// width: 100%;
.breadcrumb-nav {
margin-bottom: 15px;
font-size: 14px;
font-weight: normal;
color: #666666;
}
}
.portal-right-box{
width: 410px;
.course-index-list{
height: 548px;
overflow-y: auto;
}
.case-index-list{
height: 262px;
overflow-y: auto;
}
.anking-index-list{
height: 425px;
overflow-y: auto;
}
.qa-index-qa{
height: 188px;
overflow-y: auto;
}
}
.boe-index{
width: 410px;
padding: 30px;
margin-right: 36px;
margin-bottom: 36px;
border-radius: 8px;
.course-image-box{
width: 350px;
height: 196x;
::v-deep .course-image{
height: 100% !important;
}
}
}
.case-inter{
left: 20px;
bottom:20px;
// .interact-bar-index{
// display: none !important;
// }
::v-deep .el-avatar--small{
width: 32px;
height: 32px;
}
}
.modules-list{
margin-right: 36px;
}
.boe-case-index{
width: 410px;
height: 396px;
margin-right: 36px;
.case-top{
height: 120px;
}
.case-conent{
.xindex-course{
width: 410px;
padding: 30px;
margin-right: 36px;
margin-bottom: 36px;
border-radius: 8px;
.course-image-box{
width: 350px;
height: 274px;
top:30px;
left:30px;
padding: 30px;
.time-one{
padding:3px 10px;
}
.cast-time{
margin-bottom: 14px;
}
.case-title{
font-size: 16px;
height: 48px;
line-height: 24px;
margin-top: 20px;
}
.case-text{
height: 60px;
font-size: 14px;
line-height: 20px;
margin-bottom: 30px;
}
}
}
.boe-qa-index{
width: 298px;
height: 320px;
margin-right: 36px;
padding: 30px;
.qa-center{
height: 152px;
margin-top: 10px;
padding: 20px;
.portal-index-title{
font-weight: 600;
margin-bottom: 6px;
}
.boe-qa-sum{
font-size: 14px;
line-height: 22px;
margin-top: 4px;
}
.qa-views{
left: 20px;
bottom: 20px;
}
}
.qa-char{
margin-top: 20px;
display: flex;
::v-deep img{
width: 34px;
height: 34px;
}
.info-name{
font-size: 12px;
color: #6E7B84;
margin-left: 10px;
}
height: 196x;
::v-deep .course-image{
height: 100% !important;
}
}
.qa-top{
display: flex;
justify-content: space-between;
& span:first-child{
background: rgba($color: #387DF7, $alpha: 0.05);
padding: 3px 10px;
border-radius: 4px;
font-size: 12px;
color: #387DF7;
}
span{
font-size: 14px;
color: #6E7B84;
}
}
}
.boe-article-index{
padding: 30px;
.article-card-left{
width: 352px;
.article-info-index-summary{
font-size: 14px;
font-weight: 400;
color: #6E7B84;
line-height: 20px;
}
.article-info-image-box{
width: 352px;
height: 196px;
}
.el-avatar{
width: 32px !important;
height: 32px !important;
}
}
.article-card-right{
.article-li{
// height: 160px;
display: flex;
width: 100%;
.article-img{
flex: 43%;
width: 252px;
height: 144px;
border-radius: 4px;
margin-right: 10px;
img{
width: 252px;
height: 144px;
border-radius: 4px;
}
}
.article-right{
flex: 100%;
.article-info-title{
font-size: 16px;
font-weight: 600;
color: #00253E;
margin-bottom: 12px;
margin-top: 10px;
// width: 50%;
}
.article-info-summary{
font-size: 14px;
font-weight: 400;
color: #6E7B84;
// margin-bottom: 15px;
}
.article-bottom{
display: flex;
justify-content: space-between;
::v-deep .uavatar{
width:34px;
height: 34px;
}
.el-avatar{
width: 34px;
height: 34px;
}
}
}
}
}
}
}
@media screen and (min-width: 1921px){
.xcontent{
// width: 1000px;
// margin: 0px auto;
margin: 0px 8%;
}
.portal-content {
// margin: 26px 87px 0px 87px;
width: 1746px;
margin: 0 auto;
.breadcrumb-nav {
margin-bottom: 15px;
font-size: 14px;
font-weight: normal;
color: #666666;
}
}
.portal-right-box{
width: 410px;
@@ -984,7 +982,7 @@
line-height: 20px;
margin-bottom: 30px;
}
}
}
.boe-qa-index{
@@ -1052,7 +1050,7 @@
.article-info-image-box{
width: 352px;
height: 196px;
}
.el-avatar{
width: 32px !important;
@@ -1105,7 +1103,231 @@
}
}
}
}
}
}
}
@media screen and (min-width: 1921px){
.xindex-content{
width: 1880px;
}
.xindex-course{
width: 410px;
padding: 30px;
margin-right: 36px;
margin-bottom: 36px;
border-radius: 8px;
.course-image-box{
width: 350px;
height: 196x;
::v-deep .course-image{
height: 100% !important;
}
}
}
.portal-right-box{
width: 410px;
.course-index-list{
height: 548px;
overflow-y: auto;
}
.case-index-list{
height: 262px;
overflow-y: auto;
}
.anking-index-list{
height: 425px;
overflow-y: auto;
}
.qa-index-qa{
height: 188px;
overflow-y: auto;
}
}
.boe-index{
width: 410px;
padding: 30px;
margin-right: 36px;
margin-bottom: 36px;
border-radius: 8px;
.course-image-box{
width: 350px;
height: 196x;
::v-deep .course-image{
height: 100% !important;
}
}
}
.case-inter{
left: 20px;
bottom:20px;
// .interact-bar-index{
// display: none !important;
// }
::v-deep .el-avatar--small{
width: 32px;
height: 32px;
}
}
.modules-list{
margin-right: 36px;
}
.boe-case-index{
width: 410px;
height: 396px;
margin-right: 36px;
.case-top{
height: 120px;
}
.case-conent{
width: 350px;
height: 274px;
top:30px;
left:30px;
padding: 30px;
.time-one{
padding:3px 10px;
}
.cast-time{
margin-bottom: 14px;
}
.case-title{
font-size: 16px;
height: 48px;
line-height: 24px;
margin-top: 20px;
}
.case-text{
height: 60px;
font-size: 14px;
line-height: 20px;
margin-bottom: 30px;
}
}
}
.boe-qa-index{
width: 298px;
height: 320px;
margin-right: 36px;
padding: 30px;
.qa-center{
height: 152px;
margin-top: 10px;
padding: 20px;
.portal-index-title{
font-weight: 600;
margin-bottom: 6px;
}
.boe-qa-sum{
font-size: 14px;
line-height: 22px;
margin-top: 4px;
}
.qa-views{
left: 20px;
bottom: 20px;
}
}
.qa-char{
margin-top: 20px;
display: flex;
::v-deep img{
width: 34px;
height: 34px;
}
.info-name{
font-size: 12px;
color: #6E7B84;
margin-left: 10px;
}
}
.qa-top{
display: flex;
justify-content: space-between;
& span:first-child{
background: rgba($color: #387DF7, $alpha: 0.05);
padding: 3px 10px;
border-radius: 4px;
font-size: 12px;
color: #387DF7;
}
span{
font-size: 14px;
color: #6E7B84;
}
}
}
.boe-article-index{
padding: 30px;
.article-card-left{
width: 352px;
.article-info-index-summary{
font-size: 14px;
font-weight: 400;
color: #6E7B84;
line-height: 20px;
}
.article-info-image-box{
width: 352px;
height: 196px;
}
.el-avatar{
width: 32px !important;
height: 32px !important;
}
}
.article-card-right{
.article-li{
// height: 160px;
display: flex;
width: 100%;
.article-img{
flex: 43%;
width: 252px;
height: 144px;
border-radius: 4px;
margin-right: 10px;
img{
width: 252px;
height: 144px;
border-radius: 4px;
}
}
.article-right{
flex: 100%;
.article-info-title{
font-size: 16px;
font-weight: 600;
color: #00253E;
margin-bottom: 12px;
margin-top: 10px;
// width: 50%;
}
.article-info-summary{
font-size: 14px;
font-weight: 400;
color: #6E7B84;
// margin-bottom: 15px;
}
.article-bottom{
display: flex;
justify-content: space-between;
::v-deep .uavatar{
width:34px;
height: 34px;
}
.el-avatar{
width: 34px;
height: 34px;
}
}
}
}
}
}

2
src/components/PortalFloatTools.vue
View File

@@ -240,7 +240,7 @@ export default {
// box-shadow:0px 0px 10px #999;
border-radius: 4px;
// border: 1px solid #f0f0f0;
right: 24px;
right: 15px;//由24修改为15
bottom: 126px;
// padding:0 8px;
display: flex;

64
src/views/Index.vue
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;