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

课程列表页

Browse Source
This commit is contained in:
zhaofang
2022-09-01 15:44:42 +08:00
parent 2b178ad183
commit cc8de44f95
3 changed files with 88 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,8 +29,8 @@ body {
} }
.xrow-course{ .xrow-course{
padding-left: 5px; // padding-left: 5px;
padding-right: 5px; // padding-right: 5px;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -56,10 +56,12 @@ body {
// margin: 0px 87px; // margin: 0px 87px;
} }
.index-course{ .index-course{
width: 20%; // width: 20%;
width: 33.3333%;
} }
.course-index{ .course-index{
width: 25%; // width: 25%;
width: 33.3333%;
} }
} }
@@ -71,10 +73,12 @@ body {
// margin: 0px 87px; // margin: 0px 87px;
} }
.index-course{ .index-course{
width: 16.6666666667%; // width: 16.6666666667%;
width: 33.3333%;
} }
.course-index{ .course-index{
width: 20%; // width: 20%;
width: 33.3333%;
} }
} }
@@ -84,10 +88,12 @@ body {
// margin: 0px auto; // margin: 0px auto;
} }
.index-course{ .index-course{
width: 16.6666666667%; // width: 16.6666666667%;
width: 33.3333%;
} }
.course-index{ .course-index{
width: 20%; // width: 20%;
width: 33.3333%;
} }
} }

4
src/components/PortalHeader.vue
View File

@@ -46,7 +46,9 @@
<!-- <el-link type="primary" @click="logout()" icon="el-icon-switch-button" :underline="false">退出</el-link> --> <!-- <el-link type="primary" @click="logout()" icon="el-icon-switch-button" :underline="false">退出</el-link> -->
<el-badge class="person-action-index message-count" :value="userMsg" :hidden="userMsg == 0"> <el-badge class="person-action-index message-count" :value="userMsg" :hidden="userMsg == 0">
<el-tooltip content="消息" placement="bottom" effect="light" :visible-arrow="false" popper-class="text-tooltip"> <el-tooltip content="消息" placement="bottom" effect="light" :visible-arrow="false" popper-class="text-tooltip">
<el-link type="primary" :href="`${webBaseUrl}/message`" icon="el-icon-bell" :underline="false"></el-link> <el-link type="primary" :href="`${webBaseUrl}/message`" :underline="false">
<svg-icon style="margin-right: 0;font-size:26px;" icon-class="message"></svg-icon>
</el-link>
</el-tooltip> </el-tooltip>
</el-badge> </el-badge>
<el-dropdown class="person-action-index"> <el-dropdown class="person-action-index">

166
src/views/portal/course/Index.vue
View File

@@ -9,8 +9,8 @@
</div> --> </div> -->
<div class="xcontent portal-content"> <div class="xcontent portal-content">
<div class="xrow" style="display: flex;justify-content: space-between;"> <div class="xrow" style="display: flex;justify-content: space-between;">
<div style="flex: 1;" class="xcol content-div"> <div style="flex: 1;margin-right:0px" class="xcol content-div">
<el-row class="search-div"> <el-row class="search-div" style="margin-right:0px">
<div class="searchbar" v-if="searchTags.length > 0"> <div class="searchbar" v-if="searchTags.length > 0">
<div style="line-height: 30px;"> <div style="line-height: 30px;">
<span class="item-title"> 搜索条件</span> <span class="item-title"> 搜索条件</span>
@@ -73,38 +73,37 @@
<el-row class="order-div" v-if="listType == 1"> <el-row class="order-div" v-if="listType == 1">
<span class="quyer-tag"> <span class="quyer-tag">
<el-button type="text" class="order-class" @click="orderChange('studys')" :class="{ actice: course.orderField == 'studys' }">最热</el-button> <el-button type="text" class="order-class" @click="orderChange('studys')" :class="{ actice: course.orderField == 'studys' }">最热</el-button>
<el-button type="text" class="order-class" @click="orderChange('publishTime')" :class="{ actice: course.orderField == 'publishTime' }">最新</el-button> <el-button type="text" class="order-class" @click="orderChange('publishTime')" :class="{ actice: course.orderField == 'publishTime' }">最新</el-button>
</span> </span>
</el-row> </el-row>
<div class="xrow data-content" v-if="listType == 1"> <div class="xrow data-content" v-if="listType == 1">
<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="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)">
<el-card class="course-card" :body-style="{padding:'0px'}"> <div class="course-card">
<a :href="toCourseDetail(cinfo)"> <a :href="toCourseDetail(cinfo)">
<div class="course-image-box"> <div class="course-image-box">
<course-image height="146px" :course="cinfo"></course-image> <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 < 21" class="course-type-title course-type">录播课</span>
<span v-if="cinfo.type==30" class="course-type-title course-type">线下课</span> <span v-if="cinfo.type==30" class="course-type-title course-type">线下课</span>
<span v-if="cinfo.type==40" class="course-type-title course-type">学习项目</span> <span v-if="cinfo.type==40" class="course-type-title course-type">学习项目</span>
</div> </div>
<div :title="cinfo.title" class="course-title title-line-ellipsis" v-html="cinfo.name"> <div :title="cinfo.title" class="course-title two-line-ellipsis" v-html="cinfo.name">
</div> </div>
<div class="course-author"> <div class="course-author">
<div class="course-author-left" v-if="cinfo.teacher"> <div class="course-author-left">
{{cinfo.teacher=='BOE教师'? '':cinfo.teacher}} <span v-if="cinfo.teacher">{{cinfo.teacher=='BOE教师'? '':cinfo.teacher}}</span>
</div>
<div style="flex:1;text-align: center;">
<span class="study-num">{{cinfo.studies}}人学习</span> <span class="study-num">{{cinfo.studies}}人学习</span>
</div> </div>
<div style="padding-left:15px"> <div style="display:flex">
<div v-if="cinfo.score"> <div class="cor-praises" v-if="cinfo.source == 2"><interactBar :type="1" :data="cinfo" :comments="false" :praises="false" :shares="false" :views="false"></interactBar> </div>
<span class="course-score-value">{{toScore(cinfo.score)}}</span> <div>
</div> <div v-if="cinfo.score">
<div v-else class="course-score-no">未评分</div> <span class="course-score-value">{{toScore(cinfo.score)}}分</span>
</div>
<div v-else class="course-score-no">未评分</div></div>
</div>
</div> </div>
</div>
</a> </a>
<div class="cor-praises" v-if="cinfo.source == 2"><interactBar :type="1" :data="cinfo" :comments="false" :praises="false" :shares="false" :views="false"></interactBar> </div> </div>
</el-card>
</div> </div>
</div> </div>
<!-- 分页 --> <!-- 分页 -->
@@ -132,48 +131,6 @@
</li> </li>
</ul> </ul>
</div> </div>
<!-- <el-card class="ranking-card" >
<div slot="header">
<span style="font-size: 14px;font-weight: 600;color: #333333;">好评榜</span>
</div>
<div style="padding-bottom:10px">
<el-row class="ranking-title">
</el-row>
<el-row class="ranking-title bacolor" v-for="(item, index) in scorelist" :key="index" >
<el-col :span="6" style="height:34px">
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
</el-col>
<div v-bind:title="item.name" @click="jumpRouter(item)">
<el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.name }}</el-col>
</div>
</el-row>
</div>
</el-card> -->
<!-- <div style="height: 10px;"></div> -->
<!-- <el-card class="ranking-card">
<div slot="header">
<span style="font-size: 14px;font-weight: 600;color: #333333;">人气榜</span>
</div>
<div style="padding-bottom:10px">
<el-row class="ranking-title">
</el-row>
<el-row class="ranking-title bacolor" v-for="(item, index) in ankingList" :key="index">
<el-col :span="6" style="height:34px">
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
</el-col>
<div :title="item.name" @click="jumpRouter(item)">
<el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.name }}</el-col>
</div>
</el-row>
</div>
</el-card> -->
<div style="margin-top:26px" class="ranking-card portal-right-box list-bg1"> <div style="margin-top:26px" class="ranking-card portal-right-box list-bg1">
<p class="portal-title-one" style="padding-bottom:12px">人气榜</p> <p class="portal-title-one" style="padding-bottom:12px">人气榜</p>
<ul> <ul>
@@ -309,10 +266,10 @@ export default {
this.columns = 3; this.columns = 3;
} else if (screenWidth < 1600) { } else if (screenWidth < 1600) {
this.course.pageSize = 12; this.course.pageSize = 12;
this.columns = 4; this.columns = 3;
} else if (screenWidth >= 1600) { } else if (screenWidth >= 1600) {
this.course.pageSize = 15; this.course.pageSize = 15;
this.columns = 5; this.columns = 3;
} }
let el_top = document.querySelector("#searchbar"); let el_top = document.querySelector("#searchbar");
@@ -827,22 +784,36 @@ export default {
background: #ddd; background: #ddd;
} }
.course-card { .course-card {
// width: 290px; padding: 30px;
margin-bottom: 15px; padding-bottom: 14px;
position: relative; margin-bottom: 36px;
background: #fff;
border-radius: 8px;
margin-right: 35px;
::v-deep .cor-praises { ::v-deep .cor-praises {
position: absolute; // position: absolute;
left: 0;
top: 0;
-moz-user-select: none; /*火狐*/ -moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/ -webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/ -ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/ -khtml-user-select: none; /*早期浏览器*/
user-select: none; user-select: none;
.interact-bar-btn { .interact-bar-btn {
margin-top: -2px;
min-width: 26px !important;
width: 32px;
height: 20px;
background:rgba(237, 239, 240,0.5);
border-radius: 20px;
margin-top: 4px;
margin-right: 12px;
.interact-bar-value { .interact-bar-value {
display: none; display: none;
} }
.svg-icon{
font-size: 12px !important;
margin-left: 10px;
margin-bottom: 6px;
}
} }
} }
.cor-icon { .cor-icon {
@@ -859,8 +830,10 @@ export default {
} }
.course-image-box { .course-image-box {
position: relative; position: relative;
height: 148px; // height: 196px;
// width: 350px;
width: 100%; width: 100%;
height: 100%;
.course-image { .course-image {
width: 100%; width: 100%;
height: 148px; height: 148px;
@@ -922,12 +895,13 @@ export default {
} }
} }
.course-title { .course-title {
// height: 70px; height: 44px;
margin: 10px 0; // margin: 10px 0;
padding: 0px 15px; margin: 12px 0 16px 0px;
font-size: 18px; line-height: 24px;
font-size: 16px;
font-weight: 600; font-weight: 600;
color: #343434; color: #333333;
-moz-user-select: none; /*火狐*/ -moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/ -webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/ -ms-user-select: none; /*IE10*/
@@ -935,21 +909,18 @@ export default {
user-select: none; user-select: none;
} }
.course-author { .course-author {
margin: 5px 15px; // margin: 5px 15px;
padding-bottom: 10px; // padding-bottom: 10px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.course-author-left { .course-author-left {
font-size: 12px; font-size: 14px;
line-height: 30px; line-height: 30px;
color: #666; color: #6E7B84;
} }
// .course-author-right{
// padding-top: 5px;
// }
} }
.course-score { .course-score {
padding: 5px 15px; // padding: 5px 15px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -981,22 +952,23 @@ export default {
} }
.course-score-no { .course-score-no {
text-align: right; text-align: right;
font-size: 12px; font-size: 14px;
color: #ffb30f; color: #6B7C85;
line-height: 30px; line-height: 30px;
} }
.course-score-value { .course-score-value {
font-size: 14px; font-size: 14px;
color: #ffb30f; color: #FA6400;
margin-left: 32px; // margin-left: 32px;
line-height: 30px; line-height: 30px;
font-family: "Arial"; font-family: "Arial";
// font-size: 30px; // font-size: 30px;
} }
.study-num { .study-num {
line-height: 30px; line-height: 30px;
font-size: 12px; font-size: 14px;
color: #8590a6; margin-left: 12px;
color: #6E7B84;
-moz-user-select: none; /*火狐*/ -moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/ -webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/ -ms-user-select: none; /*IE10*/
@@ -1044,16 +1016,20 @@ export default {
height: 50px; height: 50px;
} }
.content-div { .content-div {
.quyer-tag { .quyer-tag {
// margin-left: 10px; // margin-left: 10px;
.order-class { .order-class {
color: #666666; margin: 30px 0;
color: #6E7B84;
text-align: left; text-align: left;
border: 1px solid #dfdfdf; font-size: 14px;
padding: 10px 20px; padding: 4px 8px;
margin-right: 30px;
} }
.actice { .actice {
background: #3e7fff; background: #387DF7;
color: #fff; color: #fff;
} }
} }
@@ -1137,13 +1113,13 @@ export default {
} }
.order-div { .order-div {
padding: 10px 15px 0 0px; padding: 0px 15px 0 0px;
} }
.data-content { .data-content {
padding: 5px 0px; // padding: 5px 0px;
.course-card { .course-card {
// width: 290px; // width: 290px;
margin-bottom: 15px; margin-bottom: 36px;
position: relative; position: relative;
.course-image-box { .course-image-box {
position: relative; position: relative;