64 lines
1.0 KiB
Plaintext
64 lines
1.0 KiB
Plaintext
<template>
|
|
<view class="video-list">
|
|
<waterfall
|
|
class="waterfall"
|
|
column-count="2"
|
|
column-gap="10"
|
|
left-gap="10"
|
|
right-gap="10"
|
|
>
|
|
<cell
|
|
class="cell"
|
|
:key="item.videoId"
|
|
v-for="item in lists">
|
|
<navigator
|
|
class="video-item"
|
|
hover-class="navigator-hover"
|
|
:url="`/pages/detail/detail?videoId=${item.videoId}&userId=${item.userId}`">
|
|
<image class="video-cover" :src="item.videoCover"></image>
|
|
<text class="video-title">{{ item.videoTitle }}</text>
|
|
</navigator>
|
|
</cell>
|
|
</waterfall>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"VideoList",
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
props: {
|
|
lists: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
column: {
|
|
type: Number,
|
|
default: 1
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.video-list
|
|
flex 1
|
|
.waterfall
|
|
flex 1
|
|
.video-cover
|
|
width 350rpx
|
|
height 196rpx
|
|
border-radius 10rpx
|
|
.video-title
|
|
margin 20rpx 0
|
|
font-size 28rpx
|
|
color #333333
|
|
text-overflow ellipsis
|
|
lines 1
|
|
|
|
</style>
|