<template>
|
<view class="item-box" @click="openCourse">
|
<u-time-line>
|
<u-time-line-item nodeTop="2">
|
<template v-slot:node>
|
<view class="u-node">
|
<u-icon name="tags-fill" color="rgb(255,33,91)" :size="24"></u-icon>
|
</view>
|
</template>
|
<template v-slot:content>
|
<view>
|
<view class="course-time">{{item.publish_date.replace(/-/g, "/")|date('mm-dd hh:MM')}}</view>
|
<view class="course-item">
|
<image class="picture" :src="item.avatar+'?x-oss-process=image/resize,m_fill,h_278,w_156'" mode="aspectFill">
|
</image>
|
<view class="detail">
|
<view>
|
<view class="u-line-2 u-font-32 course-name">
|
{{item.title}}
|
</view>
|
<view class="u-line-4 u-font-20 course-desc">
|
{{item.excerpt}}
|
</view>
|
</view>
|
|
|
<view class="go-learn">
|
<view class="button">
|
立即报名
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
</u-time-line-item>
|
</u-time-line>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: "free-live-course-item",
|
props: ['item', 'hasBuy'],
|
data() {
|
return {
|
|
};
|
},
|
methods: {
|
openCourse() {
|
uni.vk.navigateTo('/uni_modules/uce-free-live-course/pages/detail?_id=' + this.item._id, false);
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.item-box{
|
margin: 0 auto;
|
padding: 0 40rpx;
|
}
|
.course-time{
|
color: #333333;
|
font-weight: bold;
|
}
|
.course-item {
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 320rpx;
|
width: 616rpx;
|
// border-bottom: 2px solid #f5f5f5;
|
// padding: 20rpx 0;
|
|
.picture {
|
width: 156rpx;
|
height: 278rpx;
|
border-radius: 15rpx;
|
overflow: hidden;
|
}
|
|
.detail {
|
height: 100%;
|
margin-left: 30rpx;
|
flex: 1;
|
position: relative;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
padding: 20rpx 0;
|
|
.course-name {
|
font-weight: bold;
|
color: #303030;
|
}
|
|
.course-desc {
|
margin-top: 8rpx;
|
// font-weight: bold;
|
color: #C5C5C5;
|
}
|
|
.go-learn {
|
display: flex;
|
margin-top: 8rpx;
|
|
.button {
|
background: #1663FF;
|
color: #FFFFFF;
|
font-size: 26rpx;
|
text-align: center;
|
height: 60rpx;
|
line-height: 60rpx;
|
padding: 0 20rpx;
|
border-radius: 5rpx;
|
}
|
}
|
|
.course-price {
|
display: flex;
|
margin-top: 8rpx;
|
align-items: flex-end;
|
|
.tip {
|
color: #303030;
|
}
|
|
.tip-1 {
|
color: #FF724E;
|
}
|
|
.price {
|
color: #FF724E;
|
}
|
|
.price-discount {
|
color: #C5C5C5;
|
margin-left: 10rpx;
|
text-decoration: line-through;
|
}
|
}
|
}
|
}
|
</style>
|
