<template>
    <view class="videoTop">
		  <image :src="url" mode="aspectFill" class="video"></image>
		  <view class="backs"></view>
		  <image src="/static/videoPlay.png" mode="aspectFill" class="play-video"></image>
    </view>
</template>
<style lang="scss" scoped>
.videoTop{
    width: 100%;
    height: 284rpx;
    margin-bottom: 20rpx;
	position: relative;
    .video{
		position: absolute;
        width: 100%;
        height: 100%;
		z-index: 9;
    }
	.backs {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 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:"videoTop",
    data(){
        return {
        }
    },
	props:['url'],
}
</script>