mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-19 07:46:43 +08:00
91 lines
2.0 KiB
Vue
91 lines
2.0 KiB
Vue
<template>
|
||
<div style="">
|
||
<div class="uc-course" v-for="(item,idx) in items" :key="idx">
|
||
<div class="uc-course-img" style="width: 200px;">
|
||
<img :src="`${webBaseUrl}/images/course.png`">
|
||
</div>
|
||
<div class="uc-course-info">
|
||
<div class="uc-course-name">
|
||
<span v-if="item.type==1" class="uc-course-type2">录播</span>
|
||
<span v-if="item.type==2" class="uc-course-type2">录播</span>
|
||
<a :href="`${webBaseUrl}/course/detail?id=`" target="_blank"> {{item.name}}</a>
|
||
</div>
|
||
<div style="width: 80%;"><el-progress :percentage="item.percentage"></el-progress></div>
|
||
<div class="uc-course-text">来源：自主学习</div>
|
||
<!-- <div class="uc-course-text">截至日期：2022-03-30</div> -->
|
||
</div>
|
||
<div class="uc-course-btns">
|
||
<el-button type="primary" >继续制作</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
name: 'comStudyItem',
|
||
props: {
|
||
items: { //name,
|
||
type: Array,
|
||
default:()=>[]
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
|
||
}
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
methods:{
|
||
toStudy(item){
|
||
this.$router.push({path:'/uc/study/index',params:{id:item.id}});
|
||
}
|
||
}
|
||
}
|
||
</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: 18px;
|
||
font-weight: 700;
|
||
}
|
||
.uc-course-text{
|
||
color: #747474;
|
||
}
|
||
}
|
||
.uc-course-btns{
|
||
width: 150px;
|
||
}
|
||
}
|
||
</style>
|