You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

124 lines
2.7 KiB

<template>
<view class="recommend-list-box acea-row row-between">
<view class="recommend-item" v-for="(item,index) in list" :key="index" @click="toCourseDetail(item.id)">
<view class="img-box"><image :src="item.coverImg" mode="aspectFill"></image></view>
<view class="course-content">
<view class="course-title line1">{{item.courseName}}</view>
<view class="course-tips-box acea-row">
<view class="course-tip-item blue">{{item.categoryName}}</view>
</view>
<!-- <view class="price" v-if="item.level > 2">{{item.level}}级课程</view>
<view class="price" v-if="item.level == 2">¥{{item.courseCharge}}</view>
<view class="price colG" v-if="item.chargeType == 0 || item.level == 1">免费</view> -->
<view class="course-address acea-row row-between-wrapper">
<view class="address">{{item.coursePlace}}</view>
<view class="course-time">{{item.enterStartTime}}-{{item.enterEndTime}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default{
props: {
list: {
type: Array,
default: []
}
},
data(){
return {
titImg: '../../../static/tit1.png',
titleWord: '查看更多课程'
}
},
methods:{
toCourseDetail(id){
this.$yrouter.push({
path: '/pages/course/detail',
query: {
id:id,
},
})
},
seeMoreClick(){
uni.switchTab({
url: "/pages/course/index"
})
},
}
}
</script>
<style lang="less">
.recommend-list-box{
width: 100%;
.recommend-item{
width: 334rpx;
background: #fff;
border-radius: 10rpx;
font-size: 28rpx;
color: #333;
margin-right: 22rpx;
margin-bottom: 22rpx;
box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.16);
image{
width: 334rpx;
height: 216rpx;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
}
.course-content{
width: 100%;
box-sizing: border-box;
padding:0 10rpx 20rpx;
}
.course-title{
line-height: 40rpx;
}
.course-tips-box{
margin: 12rpx 0 24rpx;
font-size: 24rpx;
color: #999;
.course-tip-item{
min-width: 60rpx;
height: 34rpx;
line-height: 32rpx;
text-align: center;
background: #EDEFF8;
border-radius: 4rpx;
border: 1px solid #6E85EB;
padding: 0 6rpx;
font-size: 22rpx;
margin-right: 20rpx;
box-sizing: border-box;
margin-right: 10rpx;
}
.blue{
color: #6E85EB;
background: #EDEFF8;
border-color: #6E85EB;
}
.yellow{
color: #F99C10;
background: #FFEDCC;
border-color: #F99C10;
}
}
.price{
font-size: 32rpx;
color: #EA533E;
font-weight: 500;
margin: 16rpx 0;
}
.course-address{
font-size: 24rpx;
color: #999999;
}
}
.recommend-item:nth-child(2n){
margin-right: 0;
}
}
</style>