<template>
	<view class="content">
		<view style="padding-top: 30rpx;">
			<view class="item">
				<video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"  @error="error" controls></video>
				<view class="title">
					<text>[ 样片1 ]</text>
					<u-icon name="share"></u-icon>
				</view>
			</view>
			<view class="item">
				<video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"  @error="error" controls></video>
				<view class="title">
					<text>[ 样片2 ]</text>
					<u-icon name="share"></u-icon>
				</view>
			</view>
		</view>
		<view class="bottom">
			<image src="../../../static/img/vlog/icon/bottom.png"></image>
			<navigator url="../vlogface/vlogface">
				<view class="paizhao">
					<image src="../../../static/img/vlog/icon/icon_scan.png"></image>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			error(e){//视频播放出错触发函数
				uni.showModal({content: e.target.errMsg,showCancel: false})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{padding: 0 20rpx;height: 100%;width: 100%;background-color: #192033;
		.item{box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding: 0 10rpx;border-radius: 10rpx;background-color: #192033;margin-bottom:30rpx;text-align: center;
			.video{height: 350rpx;border-radius: 10rpx;width: 100%;}
			.title{height: 60rpx;display: flex;align-items: center;justify-content: space-between;font-weight:bold;color: #fff;font-size: 32rpx;padding: 0 10rpx;}
		}
	
		.bottom{height: 150rpx;width: 100%;position: relative;position: fixed;bottom: 0;right:0rpx;
			image{width: 100%;height: 100rpx;position: relative;position: fixed;bottom: 0;}
			.paizhao{height: 160rpx;width: 160rpx;z-index: 1;position: absolute;left:50%;top:22%;transform: translate(-50%, -50%);
				image{height: 100%;width: 100%;}
			}
		}
	}

</style>
