xmhjc-applet/pages/components/videoList.vue

<template>
    <view class="content">
        <view @click="linkDetails(item)" v-for="(item,index) in newsList" :key="index" class="box" >
            <view class="box_img">
                <u--image radius='16rpx' class="" width="90vw" height="395rpx" :src="item.coverList[0].fileUrl" ></u--image>
                <view class="iconm_play">
                    <u--image  width="128rpx" height="128rpx" v-if="item.videoUrl" src="/static/index/iconm_play.png" ></u--image>
                </view>
            </view>
            <view class="box_title">
                {{item.title}}
            </view>
            <view class="box_bottom">
                <view class="box_type">
                    <view class="flex">
                        <u--image width="40rpx" height="40rpx" src="/static/index/iconm_shitu.png" ></u--image>
                        <view style="margin-left:8rpx">{{ item.views || 0}}</view> 
                    </view>
                    <view class="flex" style="margin-left:10rpx">
                        <u--image width="40rpx" height="40rpx" src="/static/index/iconm_message.png" ></u--image>
                        <view style="margin-left:8rpx">{{ item.num || 0}}</view> 
                    </view>
                </view>
                <view class="box_type">
                    <view class="flex">{{item.subIdName}}</view>
                    <!-- <view class="flex" style="margin-left:24rpx">{{ computerTime(item) }}</view> -->
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
    listdata: {
        type: Array,
        default: [],
    },
},
watch:{
    listdata: {
        immediate: true,
        handler(val) {
           console.log(val);
           this.newsList = val
        },
    }
},
data() {
    return {
        newsList:[]
    }
},
onLoad() {

},
methods: {
    computerTime(data){
        let time = data?.time || data?.createTime
        if (time) {
            return time.slice(5,10)
        }else{
            return ''
        }
    },
    linkDetails(e){
        uni.navigateTo({
             url: '/pages/home/ArticleDetails?id=' + e.id
        });
    }
}
}
</script>

<style>
.content{
    width: 100vw;
    background-color: #FFFFFF;
    padding: 30rpx 0 30rpx 0;
}
.title{
    display: flex;
    width: 90vw;
    justify-content: space-between;
    margin: 0 auto;
}
.title_text{
    width: 128rpx;
    height: 45rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    line-height: 45rpx;
}
.title_more{
    width: 80rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 40rpx;
}
.box{
    display: flex;
    margin: 20rpx auto;
    justify-content: flex-start;
    width: 90vw;
    flex-direction: column;
    align-items: center;
    height: 510rpx;
}
.box_img{
    width: 100%;
    height: 395rpx;
    border-radius: 16rpx;
    background-color: #999999;
}
.box_right{
    margin-left: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.box_title{
    margin-top: 24rpx;

    width: 100%;
    height: 45rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    line-height: 45rpx;

    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
}
.box_bottom{
    margin-top: 16rpx;
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.box_type{
    display: flex;
    justify-content: space-between;

    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 40rpx;
}
.iconm_play{
    position: relative;
    left: 40%;
    top: -260rpx;
    z-index: 150;
    width: 128rpx;
}
</style>