mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-22 09:16:44 +08:00
2022年5月29日从svn移到git
This commit is contained in:
daihh
222
src/components/Portal/course/courseItem.vue
Normal file
222
src/components/Portal/course/courseItem.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<el-card class="course-card" :body-style="{ padding: '0px' }">
|
||||
<router-link :to="jumpRouter(item)">
|
||||
<div class="course-image-box">
|
||||
<img :src="baseUrl+item.coverImg" style="width: 100%;height: 100%;" />
|
||||
<img :src="jumpPicture(item)" class="course-flag" />
|
||||
<div class="course-tip">
|
||||
<!-- <span class="course-study-count" ><i class="el-icon-view"></i> 499人在学</span> -->
|
||||
<!-- <span class="course-time">{{item.timeLength}}</span> -->
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
<div class="course-info-box">
|
||||
<div class="course-info-title">
|
||||
<router-link class="one-line-ellipsis" :to="jumpRouter(item)"><span v-html="item.name"></span></router-link>
|
||||
<div class="course-other-info">
|
||||
<div class="course-author">
|
||||
<img :src="item.avater"/>
|
||||
<!--这里应该是教师-->
|
||||
<!-- 这里需要调整 -->
|
||||
<div class="one-line-ellipsis" style="width:100%">{{item.sysCreateBy}}({{item.position}})</div>
|
||||
<!-- <authorInfo :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo"></authorInfo> -->
|
||||
<!-- <div>
|
||||
<svg-icon icon-class="viewsTwo"></svg-icon><span style="color:#444444">{{item.studys}}</span>
|
||||
<svg-icon icon-class="like"></svg-icon><span style="color:#444444">{{item.praises}}</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <div class="course-score-info">
|
||||
<span class="course-score">{{item.gradeScore}}</span>
|
||||
<span class="course-score-title">分</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="course-other-detail">
|
||||
<span>{{item.studys}}人学习</span>
|
||||
<div class="course-score-info">
|
||||
<el-rate disabled v-model="item.score"></el-rate>
|
||||
<span class="course-score">{{item.score}}</span>
|
||||
<!-- <span class="course-score-title">分</span> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cardmark">
|
||||
<div class="cardmark-name">目标学员</div>
|
||||
<div class="cardmark-info">{{item.forUsers}}</div>
|
||||
<div class="cardmark-name">课程价值</div>
|
||||
<div class="cardmark-info">{{item.value}}</div>
|
||||
<div class="cardmark-name">课程介绍</div>
|
||||
<div class="cardmark-info">{{item.summary}}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
props:{
|
||||
course:Object
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
baseUrl:process.env.VUE_APP_FILE_BASE_URL
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
item(){
|
||||
return this.course;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
jumpRouter(c){
|
||||
if(c.type==20){
|
||||
return '/course/detail?id='+c.id
|
||||
}else if(c.type==10){
|
||||
return '/course/micro?id='+c.id
|
||||
}
|
||||
},
|
||||
jumpPicture(c){
|
||||
if(c.type==20){
|
||||
return '/images/loglu.png'
|
||||
}else{
|
||||
return '/images/flag_wk.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.course-card {
|
||||
width: 290px;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
.course-image-box {
|
||||
position: relative;
|
||||
height: 165px;
|
||||
.course-image {
|
||||
width: 288px;
|
||||
height: 165px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.course-info-box {
|
||||
font-size: 14px;
|
||||
padding: 15px;
|
||||
.course-info-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #343434;
|
||||
// height: 58px;
|
||||
}
|
||||
.course-other-detail{
|
||||
margin:2px 0;
|
||||
font-size:12px;
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
span{
|
||||
color: #787878;
|
||||
}
|
||||
}
|
||||
.course-other-info {
|
||||
height: 40px;
|
||||
// margin-top: 10px;
|
||||
.course-author {
|
||||
float: left;
|
||||
height: 40px;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-bottom:1px solid #e4e4e4;
|
||||
img {
|
||||
margin-right: 5px;
|
||||
width: 30px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
>div:last-of-type{
|
||||
margin-left: auto;
|
||||
.svg-icon:last-of-type{
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.course-score-info {
|
||||
// float: right;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
// height: 40px;
|
||||
// line-height: 40px;
|
||||
.course-score {
|
||||
color: #f8a114;
|
||||
font-family: "Arial";
|
||||
font-size: 36px;
|
||||
}
|
||||
// .course-score-title {
|
||||
// font-size: 14px;
|
||||
// color: #787878;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.course-card:hover .cardmark{
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user