siyu_app/components/es-course-item/es-course-item.vue

<template>
	<view class="video-item es-mt-20  es-pb-10" @tap="goToInfo(data)">
		<view class="es-block es-br-10 es-oh">
			<view class="" style="padding-top: 55.87%;"></view>
			<view class="es-icon-auto">
				<image :src="data.imgUrl"  mode="aspectFill"></image>
				<view class="play es es-ac es-pc">
					<view class="es-icon-58 es-icon-play"></view>
				</view>
				<view class="vip es-w-44 es-h-20 es es-ac es-pc es-fw es-fs-16">VIP</view>
			</view>
		</view>
		<view class="es-omit es-fs-26 es-mt-10 title ellipsis2">{{data.courseName}}</view>
	</view>
</template>

<script>
	export default {
		name:"es-course-item",
		props: {
			
			data: {
				type: Object,
				default() {
					return { };
				}
			},
			
		},
		data() {
			return {
				
			};
		},
		methods:{
			goToInfo(item){
			    this.$navTo('./info?courseId='+item.courseId);	
			},
		}
	}
</script>

<style>
	.video-item{
		width:330rpx;
	}
	.video-item .play{
		width: 100%;
		height: 100%;
		position: absolute;
		left:0;top:0;
		z-index: 2;
	}
	.vip{
		background: linear-gradient(90deg, #EBC19A 0%, #FFEEDD 100%);
		border-radius: 5rpx;
		position: absolute;
		right:14rpx;
		top:8rpx;
	}
	
	.title{
		/* min-height: 44px; */
	}
	
</style>