zouma-video/src/components/VideoLine.vue

<template>
    <div class="video-info flex" @click="goDetail">
        <van-image width="110" height="70" fit="cover" radius="12" :src="info.cover" />

        <div class="content">
            <div class="title text-white van-multi-ellipsis--l2 text-sm">{{ info.title }}</div>
            <div class="text-[#00FFE4] text-xs" v-if="history">观看至第1集</div>
            <div class="text text-xs text-[#61657A] flex justify-between">
                <span>虐恋·{{ info.totalEpisodes }}集</span>
                <span> {{ info.playCount }}播放</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const props = defineProps({
    history: {
        type: Boolean,
        default: false
    },
    info: {
        type: Object,
        default: () => {
            return {}
        }
    }
})
const router = useRouter()
function goDetail() {
    router.push({
        name: 'video',
        query: {
            id: props.info.id
        }
    })
}
</script>

<style lang="less" scoped>
.video-info {
    .content {
        flex-grow: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 12px;
    }
}
</style>