deming/pageC/components/merchant/list-item.vue

<template>
    <view class="listItem">
		<view v-if="type == '2'" class="video-container">
			<image :src="url" mode="aspectFill" class="video"></image>
			<view class="backs"></view>
			<image src="/static/videoPlay.png" mode="aspectFill" class="play-video"></image>
		</view>
        <image v-else :src="url" mode="aspectFill"></image>
    </view>
</template>
<style lang="scss" scoped>
.listItem{
    width: 365rpx;
    height: 500rpx;
	overflow: hidden;
    > image {
        width: 100%;
        height: 100%;
		margin-bottom: 20rpx;
    }
	.video-container {
		width: 100%;
        height: 100%;
		margin-bottom: 20rpx;
		position: relative;
		.video {
			width: 100%;
        	height: 100%;
		}
		.backs {
			width: 100%;
        	height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			background-color: rgba($color: #000000, $alpha: 0.35);
			z-index: 9;
		}
		.play-video {
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			z-index: 19;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
}
</style>
<script>
export default {
    name:"listItem",
    data(){
        return {

        }
    },
	props:['url','type'],
}
</script>