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

提交

Browse Source
This commit is contained in:
zhaofang
2022-09-27 13:46:41 +08:00
parent 041c7ab7bd
commit 2c2505087c
2 changed files with 173 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/styles/portal.scss
View File

@@ -13,7 +13,7 @@ body {
}
.course-index{
width: 33.34%;
// width: 33.34%;
}
.xrow{
@@ -57,11 +57,11 @@ body {
}
.index-course{
// width: 20%;
width: 33.3333%;
// width: 33.3333%;
}
.course-index{
// width: 25%;
width: 33.3333%;
// width: 33.3333%;
}
}

250
src/views/Index.vue
View File

@@ -55,7 +55,7 @@
<router-link to="/course">查看更多</router-link>
</span>
</div>
<div class="modules-list xrow" style="height: 485px;overflow: hidden;">
<div class="modules-list xrow" style="margin-right:0px">
<!--一个固定内容-->
<div class="xrow-course index-course">
<div class="course-card">
@@ -64,10 +64,10 @@
<el-image class="course-image" style="height: 200px;" :src="this.webBaseUrl+'/ad/index_course.png'" fit="fit"></el-image>
<span class="course-type">录播课</span>
</div>
<div title="高效谈判系列课" class="course-title one-line-ellipsis">高效谈判系列课</div>
<div title="高效谈判系列课" class="course-title portal-title-tow two-line-ellipsis">高效谈判系列课</div>
<div class="course-author">
<div class="course-author-left" > </div>
<div style="flex:1; text-align: center; ">
<!-- <div class="course-author-left" > </div> -->
<div>
<span class="study-num">2581人学习</span>
</div>
<div style="padding-left:15px">
@@ -87,13 +87,10 @@
<course-image height="200px" :course="course"></course-image>
<span v-if="course.type == 20 || 10" class="course-type">录播课</span>
</div>
<div :title="course.name" class="course-title one-line-ellipsis" >{{ course.name }}</div>
<div :title="course.name" class="course-title portal-title-tow two-line-ellipsis" >{{ course.name }}</div>
<div class="course-author">
<div class="course-author-left" >
{{ course.authorInfo.name }}
</div>
<div style="flex:1; text-align: center; ">
<span class="study-num">{{ course.studys }}人学习</span>
{{ course.authorInfo.name }} <span class="study-num">{{ course.studys }}人学习</span>
</div>
<div style="padding-left:15px">
<div v-if="course.score">
@@ -109,8 +106,8 @@
</div>
</div>
<div>
<div class="ranking-card portal-right-box list-bg">
<div style="margin-top:60px">
<div class="ranking-card portal-right-box course-ran-bg">
<p class="portal-title-one" style="padding-bottom:12px">课程排行榜</p>
<ul>
<li class="list-info" v-for="(item, index) in scorelist" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
@@ -162,7 +159,7 @@
<div class="case-conent">
<p class="cast-time">
<span class="time-one" v-if="caseList.orderType==2"><svg-icon style="margin-right: 0;font-size:16px;" icon-class="crown"></svg-icon>人气榜NO.{{ind+1}}</span>
<span style="float: right;">2022-05-19</span>
<span style="float: right;">{{ca.sysCreateTime.substring(0, 10)}}</span>
</p>
<p :title="ca.title" class="two-line-ellipsis case-title">{{ca.title}}</p>
<p class="case-text three-line-ellipsis">{{ca.summary}}</p>
@@ -177,7 +174,7 @@
</div>
</div>
<div>
<div style="margin-top:46px" class="ranking-card portal-right-box list-bg">
<div style="margin-top:60px" class="ranking-card portal-right-box list-bg">
<p class="portal-title-one" style="padding-bottom:12px">案例排行榜</p>
<ul>
<li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis" style="cursor: pointer;margin-top:30px;line-height: 22px;">
@@ -216,7 +213,7 @@
<span style="font-weight: 600;font-size: 16px;word-break:break-all;color: #00253E;">{{ articleList.first.title }}</span>
</div>
</div>
<div class="article-info-summary two-line-ellipsis" style="margin-top:14px;word-break:break-all;">{{ articleList.first.summary }}</div>
<div class="article-info-summary two-line-ellipsis" style="font-weight: 400;margin-top:14px;word-break:break-all;">{{ articleList.first.summary }}</div>
</div>
</div>
</a>
@@ -235,39 +232,62 @@
<!--内容列表内容-->
<div class="article-card-right" style="flex: 1;">
<div class="article-card-box" v-for="article in articleList.list" :key="article.id">
<div class="article-info-box">
<div class="article-li">
<div class="article-img" v-if="article.coverurl != ''">
<a :href="`${webBaseUrl}/article/detail?id=${article.id}`" style="font-weight: 700;font-size: 20px;">
<el-image style="width:100%;height:100%" :src="fileBaseUrl + article.coverurl"></el-image>
</a>
</div>
<div class="article-right">
<a :href="`${webBaseUrl}/article/detail?id=${article.id}`" style="font-weight: 700;font-size: 20px;">
<p class="article-info-title one-line-ellipsis">{{ article.title }}</p>
<p class="article-info-summary two-line-ellipsis">{{ article.summary }}</p>
</a>
<div class="article-bottom">
<div style="display:flex">
<author-img :avatar="article.authorInfo.avatar" :aid="article.authorInfo.aid" :sex="article.authorInfo.sex"></author-img>
<span style="color: #6E7B84;font-size: 14px;margin:6px 13px 0 10px;">{{article.authorInfo.name}}</span>
<interactBar :type="2" :readonly="true" :data="article" :views="false"></interactBar>
</div>
<div><span class="article-info-time">{{ article.sysCreateTime.substring(0, 10) }}</span></div>
</div>
</div>
</div>
<!-- <div class="article-info-box">
<div class="article-info">
<div class="article-body" style="display:flex;">
<div style="flex: 1;">
<a :href="`${webBaseUrl}/article/detail?id=${article.id}`" style="font-weight: 700;font-size: 20px;">
<div class="article-info-title" style="display:flex">
<div class="two-line-ellipsis" style="flex:1;">
<span style="font-weight: 700;font-size: 20px;">{{ article.title }}</span>
</div>
<div>
<span class="article-info-time">{{ article.sysCreateTime.substring(0, 10) }}</span>
</div>
<div class="article-info-title">
<div class="two-line-ellipsis">
<span style="font-weight: 600;font-size: 16px;word-break:break-all;color: #00253E;">{{ article.title }}</span>
</div> -->
<!-- <div> -->
<!-- <span class="article-info-time">{{ article.sysCreateTime.substring(0, 10) }}</span> -->
<!-- </div> -->
<!-- </div>
<div>
<div class="two-line-ellipsis" style="font-weight: 400;font-size: 14px;color: #6E7B84;word-break:break-all;">{{ article.summary }}</div>
</div>
<div style="display:flex;justify-content: space-between;">
<div class="article-info-summary two-line-ellipsis">{{ article.summary }}</div>
</div>
</a>
<div class="article-other-info">
</a> -->
<!-- <div class="article-other-info" style="margin-top:15px">
<div><authorInfo :avatar="article.authorInfo.avatar" :name="article.authorInfo.name" :sex="article.authorInfo.sex"></authorInfo></div>
<div><interactBar :type="2" :readonly="true" :data="article" :views="false"></interactBar></div>
</div>
</div>
<div v-if="article.coverurl != ''" class="article-image"><el-image style="width:100%;height:100%" :src="fileBaseUrl + article.coverurl"></el-image></div>
</div>
</div>
</div>
</div> -->
<!-- <div v-if="article.coverurl != ''" class="article-image"><el-image style="width:100%;height:100%" :src="fileBaseUrl + article.coverurl"></el-image></div>
</div> -->
<!-- </div> -->
<!-- </div> -->
</div>
</div>
</div>
</div>
</div>
<!--内容块-->
<div style="margin-top:46px">
<div style="margin-top:60px">
<!-- 排行榜位置 -->
<div class="portal-right-box art-bgimg" style="background-color:#fff;" >
<p class="portal-title-one" style="padding-bottom:12px" >文章排行榜</p>
@@ -316,7 +336,7 @@
</ul>
</el-row>
</div>
<div style="margin-top:60px">
<div style="margin-top:74px">
<!-- 排行榜 -->
<div class="portal-right-box list-bg">
<p class="portal-title-one" style="padding-bottom:12px">问答排行榜</p>
@@ -539,7 +559,7 @@ export default {
this.isNext = false;
let { orderType, num } = this.courseList;
let course = {
pageSize: num,
pageSize: 5,
device:1,
orderField: orderType == 1 ? '' : 'studys',
orderAsc: false,
@@ -776,6 +796,66 @@ export default {
</script>
<style scoped lang="scss">
.article-li{
display: flex;
width: 100%;
.article-img{
// flex: 1;
width: 252px;
height: 142px;
border-radius: 4px;
margin-right: 20px;
img{
width: 252px;
height: 142px;
border-radius: 4px;
}
}
.article-right{
// width: 100%;
.article-info-title{
font-size: 16px;
font-weight: 600;
color: #00253E;
margin-bottom: 9px;
}
.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: 32px;
height: 32px;
}
}
.article-info-time{
font-size: 12px;
font-weight: 400;
color: #6E7B84;
}
}
}
::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;
}
.course-ran-bg{
background: linear-gradient(180deg, #d7eaff 1%, #FAFAFA 24%);
}
.personal-panel{
position: absolute;
right: 172px;
@@ -884,7 +964,7 @@ export default {
font-size: 12px;
color: #FFFFFF;
padding: 0px 8px;
background: #387DF7;
background: #f99000;
border-radius: 0px 12px 0px 0px;
}
}
@@ -975,6 +1055,7 @@ export default {
}
.case-box{
display: flex;
.case-index{
position: relative;
width: 408px;
@@ -983,7 +1064,15 @@ export default {
border-radius: 8px;
box-sizing: border-box;
margin-right: 36px;
&:nth-child(2){
.case-top{
background: linear-gradient(333deg, #D2DEF3 0%, #B4C4E0 100%);
}
}
&:last-child{
.case-top{
background: linear-gradient(153deg, #A4D3DF 0%, #B4DCE6 100%);
}
margin-right: 0;
}
@@ -999,7 +1088,7 @@ export default {
}
.case-top{
height: 120px;
background: linear-gradient(70deg, #82A8D1 20%, #A4C5E8 60%);
background: linear-gradient(153deg, #82A8D1 0%, #A4C5E8 100%);
border-radius: 8px 8px 0px 0px;
}
.case-conent{
@@ -1035,6 +1124,7 @@ export default {
line-height: 24px;
}
.case-text{
height: 60px;
font-size: 14px;
color: #6E7B84;
line-height: 20px;
@@ -1124,21 +1214,23 @@ export default {
}
.course-card {
padding: 30px;
// width: 290px;
padding-bottom: 22px;
width: 410px;
margin-bottom: 30px;
margin-right: 36px;
box-sizing: border-box;
position: relative;
background-color: #ffffff;
::v-deep .cor-praises {
position: absolute;
left: 0;
top: 0;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
right: 52px;
bottom: 24px;
// -moz-user-select: none; /*火狐*/
// -webkit-user-select: none; /*webkit浏览器*/
// -ms-user-select: none; /*IE10*/
// -khtml-user-select: none; /*早期浏览器*/
// user-select: none;
.interact-bar-btn{
.interact-bar-value{
display: none;
@@ -1170,16 +1262,15 @@ export default {
}
.course-type {
position: absolute;
top: 5px;
top: 0px;
right: 0px;
width: 90px;
height: 30px;
line-height: 30px;
width: 60px;
height: 24px;
line-height: 24px;
text-align: center;
background-color: #292828;
opacity: 0.4;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
background-color: #f99000;
border-radius: 2px 4px 2px 14px;
font-size: 12px;
color: #ffffff;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
@@ -1225,10 +1316,8 @@ export default {
}
}
.course-title {
padding: 10px 15px;
font-size: 18px;
font-weight: 600;
color: #343434;
margin: 16px 0 16px 0;
height: 44px;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
@@ -1236,28 +1325,26 @@ export default {
user-select: none;
}
.course-author {
margin: 5px 15px;
padding-bottom: 10px;
// margin: 5px 15px;
// padding-bottom: 10px;
display: flex;
justify-content: space-between;
.course-author-left {
font-size: 12px;
line-height: 30px;
color: #666;
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;
// flex: 1;
}
}
.study-num {
line-height: 30px;
font-size: 12px;
color: #8590a6;
font-size: 14px;
color: #6E7B84;
margin-left: 12px;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
@@ -1279,8 +1366,8 @@ export default {
}
.course-score-no {
text-align: right;
font-size: 12px;
color: #ffb30f;
font-size: 14px;
color: #6B7C85;
line-height: 30px;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
@@ -1293,7 +1380,7 @@ export default {
// margin-top: 5px;
margin-left: 32px;
line-height: 30px;
color: #ffb30f;
color: #FA6400;
font-family: 'Arial';
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
@@ -1387,8 +1474,8 @@ export default {
}
.modules-list {
margin-top: 15px;
margin-bottom: 15px;
margin-top: 30px;
// margin-bottom: 15px;
margin-right: 36px;
.case-card {
// width: 593px;
@@ -1460,22 +1547,21 @@ export default {
.article-card-left {
float: left;
.article-card-box {
.article-info-image-box {
.article-info {
.article-info-title {
font-size: 20px;
color: #343434;
font-size: 16px;
color: #00253E;
font-weight: 500;
margin-bottom: 5px;
margin-top: 5px;
}
.article-info-summary {
font-size: 14px;
color: #6E7B84;
height: 160px;
line-height: 20px;
font-weight: 400;
line-height: 22px;
}
}
img {
@@ -1492,11 +1578,15 @@ export default {
// float: right;
// width: 68%;
flex: 1;
margin-left: 20px;
margin-left: 28px;
.article-card-box {
// height: 160px;
margin-bottom: 8px;
padding-bottom: 8px;
margin-bottom: 16px;
padding-bottom: 16px;
&:last-child{
margin-bottom: 0px;
padding-bottom: 0px;
}
.article-info-box {
.article-info {
display: flex;