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.
125 lines
2.7 KiB
125 lines
2.7 KiB
3 years ago
|
<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>
|