jpcj-xcx/src/components/m-video-topbottom/m-video-topbottom.vue

<template>
	<view class="video-item" :style="{width: `${(750-30*column-30)/column}rpx`}"
		@click="gotoPaly">
		<view class="image-box">
			<view class="img-box">
				<image class="image" :src="carVideoItem.cover" mode="aspectFill"></image>
			</view>
			<text>{{carVideoItem.duration}}</text>
			<m-icon class="icon" type="bofangshipin"></m-icon>
		</view>
		<text>{{carVideoItem.title}}</text>
	</view>
</template>

<script>
	export default {
		props: {
			carVideoItem: {
				type: Object,
				default: {}
			},
			column: {
				type: Number,
				default: 2
			},
			palyObj: {
				type: Object,
				default: null
			}
		},
		name: "m-video-topbottom",
		methods:{
			gotoPaly(){
				if(!this.palyObj){
					this.$utils.route.goPage('/pages/carVideo/play',null,{carVideoItem:this.carVideoItem})
				}else{
					this.$emit('click')
				}
			}
		}
	}
</script>

<style lang="scss">
	.video-item {
		margin-right: 30rpx;
		margin-top: 30rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;

		.image-box {
			position: relative;

			.img-box {
				width: 100%;
				padding-bottom: 64%;
				position: relative;

				.image {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
			}


			text {
				position: absolute;
				color: #8A9099;
				right: 2rpx;
				bottom: 2rpx;

			}

			.icon {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		text {
			font-size: 30rpx;
			font-weight: 400;
			line-height: 39rpx;
			color: #0F0404;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
</style>