157 lines
3.3 KiB
Vue
157 lines
3.3 KiB
Vue
<template>
|
|
<view>
|
|
<view class="list flex align-center justify-center">
|
|
<view class="list-box">
|
|
<view class="list-box-title flex align-center justify-between">
|
|
<view class="list-box-title-name">
|
|
{{title}}
|
|
</view>
|
|
<view @click="clickItem('more')" class="list-box-title-more flex align-center">
|
|
查看更多
|
|
<u-icon name="arrow-right" color="#666666" size="24"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="list-box-video flex justify-between">
|
|
<view @click="clickItem('video',item)" class="list-box-video-item" v-for="(item,index) in list"
|
|
:key="index">
|
|
<view class="list-box-video-item-img">
|
|
<u-image width="100%" height="100%" border-radius="24rpx" mode="aspectFill"
|
|
:src="item.titleImg"></u-image>
|
|
<view class="list-box-video-item-img-txt" v-if="item.over == 1">
|
|
共{{item.courseDetailsCount?item.courseDetailsCount:0}}集
|
|
</view>
|
|
<view class="list-box-video-item-img-txt" v-else>
|
|
更新至{{item.courseDetailsCount?item.courseDetailsCount:0}}集
|
|
</view>
|
|
</view>
|
|
<view class="list-box-video-item-videoTitle">
|
|
{{item.title}}
|
|
</view>
|
|
<view class="list-box-video-item-tips" v-if="item.courseLabel">
|
|
{{item.courseLabel.split(',')[0]}}
|
|
</view>
|
|
</view>
|
|
<view v-if="list.length==2" class="list-box-video-item" style="height: 0;"></view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "recommendVideo",
|
|
props: {
|
|
//视频数组
|
|
list: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
//模块标题
|
|
title: {
|
|
type: String,
|
|
default: '本周热门'
|
|
},
|
|
//模块类型
|
|
typeId: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* @param {string} type 点击类型 more:更多 video:视频
|
|
* @param {Object} item 参数
|
|
* 点击事件
|
|
*/
|
|
clickItem(type, item) {
|
|
if (type == 'more') { //查看更多
|
|
this.$emit(type, this.typeId)
|
|
} else { //查看视频
|
|
this.$emit(type, item)
|
|
}
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.list {
|
|
width: 100%;
|
|
height: auto;
|
|
margin-top: 30rpx;
|
|
|
|
.list-box {
|
|
width: 686rpx;
|
|
height: 100%;
|
|
background-color: #ffffff;
|
|
|
|
}
|
|
|
|
.list-box-title-name {
|
|
color: #333333;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.list-box-title-more {
|
|
color: #666666;
|
|
font-size: 24rpx;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.list-box-video {
|
|
width: 100%;
|
|
margin-top: 20rpx;
|
|
|
|
.list-box-video-item {
|
|
width: 220rpx;
|
|
height: auto;
|
|
}
|
|
|
|
.list-box-video-item-img {
|
|
width: 100%;
|
|
height: 280rpx;
|
|
position: relative;
|
|
|
|
.list-box-video-item-img-txt {
|
|
position: absolute;
|
|
bottom: 10rpx;
|
|
right: 10rpx;
|
|
color: #FFFFFF;
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
|
|
.list-box-video-item-videoTitle {
|
|
margin-top: 18rpx;
|
|
width: 100%;
|
|
color: #333333;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
-o-text-overflow: ellipsis;
|
|
}
|
|
|
|
.list-box-video-item-tips {
|
|
width: fit-content;
|
|
color: #666666;
|
|
font-size: 22rpx;
|
|
background-color: #F2F5FF;
|
|
border-radius: 6rpx;
|
|
margin-top: 6rpx;
|
|
padding: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |