159 lines
3.4 KiB
Vue
159 lines
3.4 KiB
Vue
<template>
|
||
<view class="course-item-box" @click="clickItem">
|
||
<view class="img-box-view">
|
||
<ImagePreview class="img-box" :imgId="itemInfo.imgId" :isCache="true" width="225" height="170" mode="scaleToFill"></ImagePreview>
|
||
<view class="item-grade">{{itemInfo.evalGrade}}</view>
|
||
<!-- <image class="item-grade" mode="aspectFill"></view> -->
|
||
</view>
|
||
<view class="cont-box">
|
||
<view class="item-title">{{itemInfo.crsName}}</view>
|
||
<scroll-view class="item-tags" :scroll-x="true">
|
||
<view class="item-tag-view">
|
||
<view :class="['item-tag', this.activeTag.includes(item.tagId)?'active-tag':'']" v-for="item in tagsShowList">{{item.tagName}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="item-publish">更新：{{itemInfo.mtTime}}</view>
|
||
<view class="item-num">已学：{{itemInfo.accmStdyCnt}}人次</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script >
|
||
import ImagePreview from '@/components/image-preview/image-preview.vue'
|
||
export default {
|
||
name:"course-item",
|
||
components:{
|
||
ImagePreview
|
||
},
|
||
props:{
|
||
itemInfo:{
|
||
type: Object,
|
||
default:()=>({
|
||
crsName: '',
|
||
tagCataList:[],
|
||
publicTime:"",
|
||
learnedNum:''
|
||
})
|
||
},
|
||
activeTag:{
|
||
default: () => [],
|
||
type: Array
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
},
|
||
watch:{
|
||
activeTag:{
|
||
handler(){},
|
||
deep: true,
|
||
immediate: true
|
||
}
|
||
},
|
||
computed:{
|
||
tagsShowList(){
|
||
if(!this.activeTag) return this.itemInfo.tagCataList||[]
|
||
let _arr = (this.itemInfo.tagCataList||[]).filter(t=> this.activeTag.includes(t.tagId))
|
||
let _arr1 = (this.itemInfo.tagCataList||[]).filter(t=> !this.activeTag.includes(t.tagId))
|
||
return _arr.concat(_arr1)
|
||
}
|
||
},
|
||
methods:{
|
||
clickItem(){
|
||
this.$emit('clickItem', this.itemInfo)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.course-item-box{
|
||
padding: 15rpx;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
.img-box-view{
|
||
width: 225rpx;
|
||
height: 170rpx;
|
||
float: left;
|
||
position: relative;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 0 10rpx #c3c3c3;
|
||
.img-box{
|
||
width: 225rpx;
|
||
height: 170rpx;
|
||
}
|
||
.item-grade{
|
||
position: absolute;
|
||
right: 0;
|
||
width: 60rpx;
|
||
height: 46rpx;
|
||
background-color: #ff581c;
|
||
top:20rpx;
|
||
border-radius: 8rpx 0 0 8rpx;
|
||
color:#fff;
|
||
text-align: center;
|
||
// padding-right: 10rpx;
|
||
font-size: 28rpx;
|
||
line-height: 46rpx;
|
||
}
|
||
}
|
||
.cont-box{
|
||
width: calc(100% - 225rpx);
|
||
box-sizing: border-box;
|
||
padding: 0 10rpx 0 20rpx;
|
||
float: left;
|
||
.item-title{
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
line-height: 44rpx;
|
||
font-size: 29rpx;
|
||
font-weight: 500;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.item-tags{
|
||
.item-tag-view{
|
||
white-space: nowrap;
|
||
height: 44rpx;
|
||
.item-tag{
|
||
height: 38rpx;
|
||
line-height: 34rpx;
|
||
box-sizing: border-box;
|
||
font-size: 20rpx;
|
||
background-color: #fff;
|
||
color: #ffa150;
|
||
border: 2rpx solid #ffa150;
|
||
padding: 0 20rpx;
|
||
border-radius: 8rpx;
|
||
margin-right: 20rpx;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: 200rpx;
|
||
box-sizing: border-box;
|
||
&.active-tag{
|
||
background-color: #ffa150;
|
||
color: #fff;
|
||
border: 2rpx solid #ffa150;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.item-publish,
|
||
.item-num{
|
||
height: 32rpx;
|
||
line-height: 32rpx;
|
||
font-size: 20rpx;
|
||
color: rgb(102,102,102);
|
||
margin-top: 6rpx;
|
||
}
|
||
.item-publish{
|
||
margin-top: 0rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |