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.
zhishifufei_uniapp/components/Course/squareStyleCourse.vue

104 lines
2.1 KiB

9 months ago
<template>
<view class="flex" style="flex-wrap: wrap;">
<view v-for="item in specialList" :key="item.id" class="square-special-item" @click="$emit('detail', item)">
<view class="image">
<image :src="item.image" mode="aspectFill" :alt="item.title" />
</view>
<view class="text">
<view class="special-title">{{ item.title }}</view>
<view class="special-info">
9 months ago
<view v-if="item.type == 3" class="type">视频</view>
<view v-else class="type">直播</view>
9 months ago
<view class="count">{{ item.count }}人已学</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
specialList: {
type: Array,
default: [],
}
},
methods: {
getJumpUrl(item) {
return item.is_light ? this.singleDetailsURL : this.detailsURL + "?id=" + item.id;
},
},
};
</script>
<style lang="scss" scoped>
.square-special-item {
margin-bottom: 19rpx;
background: #fff;
width: 334rpx;
&:nth-child(2n+1) {
margin-right: 20rpx;
}
}
.square-special-item .title {
padding: 20rpx 0;
font-weight: bold;
font-size: 28rpx;
line-height: 40rpx;
color: #282828;
}
.square-special-item .image {
position: relative;
width: 334rpx;
height: 174rpx;
}
.square-special-item image {
display: block;
width: 100%;
height: 100%;
border-radius: 10rpx;
object-fit: cover;
}
.square-special-item .text {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
padding: 20rpx 16rpx;
}
.square-special-item .special-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 28rpx;
line-height: 28rpx;
color: #333333;
}
.square-special-item .special-info {
display: flex;
margin-top: 25rpx;
.type {
height: 32rpx;
padding: 0 11rpx;
border-radius: 3rpx;
background-color: rgba(229, 192, 18, 0.14);
font-size: 20rpx;
line-height: 32rpx;
color: #f8bb18;
}
.count {
color: #bfbfbf;
font-size: 20rpx;
margin-left: auto;
}
}
</style>