mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-16 22:36:43 +08:00
2022年5月29日从svn移到git
This commit is contained in:
118
src/components/Course/studyItem.vue
Normal file
118
src/components/Course/studyItem.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user