mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-16 14:26:43 +08:00
119 lines
3.7 KiB
Vue
119 lines
3.7 KiB
Vue
<template>
|
||
<div style="">
|
||
<div class="uc-course" v-for="(item,idx) in items" :key="idx">
|
||
<div class="uc-course-img" style="width: 160px;height:90px">
|
||
<course-image :course="item"></course-image>
|
||
</div>
|
||
<div class="uc-course-info">
|
||
<div class="uc-course-name" @click="jumpRouter(item)" style="cursor: pointer;">
|
||
<span v-if="item.courseType==10" class="uc-course-type2">录播</span>
|
||
<span v-if="item.courseType==20" class="uc-course-type2">录播</span>
|
||
<!-- <a :href="`${webBaseUrl}/course/detail?id=`" target="_blank"> {{item.name}}</a> -->
|
||
{{item.courseName}}
|
||
</div>
|
||
<div style="width: 80%;"><el-progress :percentage="item.progress"></el-progress></div>
|
||
<div class="uc-course-text">报名时间：{{item.addTime}}</div>
|
||
<div class="uc-course-text">来源：<span>{{item.source == 1?'内部':'外部'}}</span></div>
|
||
</div>
|
||
<div class="uc-course-btns">
|
||
<!-- :href="item.courseType==10 ?`/course/micro?id=${item.id}`:`/course/studyindex?id=${item.id}`" target="_blank" -->
|
||
<span @click="jumpRouter(item)">
|
||
<el-button v-if="item.progress==0" type="primary" size="small">开始学习</el-button>
|
||
<el-button v-if="item.progress>0 && item.progress<100" type="primary" size="small">继续学习</el-button>
|
||
<el-button v-if="item.progress==100" type="primary" size="small">回顾</el-button>
|
||
<el-button v-if="item.progress==100" type="primary" size="small">重新学习</el-button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import courseImage from "@/components/Course/courseImage.vue"
|
||
export default {
|
||
name: 'comStudyItem',
|
||
components: { courseImage },
|
||
props: {
|
||
items: { //name,
|
||
type: Array,
|
||
default:()=>[]
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
fileUrl:process.env.VUE_APP_FILE_BASE_URL,//文章的url路径
|
||
}
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
methods:{
|
||
toStudy(item){
|
||
this.$router.push({path:'/uc/study/index?id='+item.courseId});
|
||
},
|
||
jumpRouter(item){
|
||
// if(item.courseType==10){
|
||
// let routeData = this.$router.resolve({ path: '/course/micro?id='+item.courseId}); // , query: { id: 1 }
|
||
// window.open(this.webBaseUrl+routeData.href, '_blank');
|
||
// }
|
||
// if(item.courseType==20){
|
||
if(item.progress>0 && item.progress<100) {
|
||
let routeData = this.$router.resolve({ path: '/course/studyindex?id='+item.courseId}); // , query: { id: 1 }
|
||
window.open(this.webBaseUrl+routeData.href, '_blank');
|
||
} else {
|
||
let routeData = this.$router.resolve({ path: '/course/detail?id='+item.courseId}); // , query: { id: 1 }
|
||
window.open(this.webBaseUrl+routeData.href, '_blank');
|
||
}
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// .uc-course-type1{
|
||
// padding: 3px;
|
||
// border: 1px dotted #1EA0FA;
|
||
// color:#1EA0FA;
|
||
// }
|
||
// .uc-course-type2{
|
||
// padding: 3px;
|
||
// border: 1px dotted #ffaa00;
|
||
// color:#ffaa00;
|
||
// }
|
||
.uc-course{
|
||
display: flex;
|
||
justify-content: space-around;
|
||
border: 1px solid #F0F0F0;
|
||
padding: 10px;
|
||
margin-bottom: 10px;
|
||
.uc-course-img{
|
||
width: 200px;
|
||
img{
|
||
width: 200px;
|
||
border: 1px solid #F4F4F5;
|
||
}
|
||
}
|
||
.uc-course-info{
|
||
flex: 1;
|
||
line-height: 28px;
|
||
padding: 0px 10px;
|
||
.uc-course-name{
|
||
font-size: 16px;
|
||
// font-weight: 700;
|
||
}
|
||
.uc-course-text{
|
||
// line-height: 40px;
|
||
color: #747474;
|
||
span{
|
||
color: #ffaa00;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
}
|
||
.uc-course-btns{
|
||
width: 150px;
|
||
}
|
||
}
|
||
</style>
|