<template>
	<view class="content":style="aa===1?'background-color: #192033':''">
		<view v-if="1" 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="btnn">分享下载</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="btnn">分享下载</view>
			</view>
		</view>
		<view v-else class="empty">
			<view class="empty1" >
				<text>啊哦。。。没找到呢</text>
				<image src="../../../static/img/vlog/icon/icon_thereisnovideo.png"></image>
			</view>
			<navigator url="../vlogface/vlogface" class="btnn">
				<view>点击获取我的Vlog</view>
			</navigator>
		</view>
	</view>
</template>

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

<style lang="scss" scoped>
	.content{padding: 0 20rpx;height: 100%;width: 100%;text-align: center;
		.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;}
			.btnn{display: inline-block;font-size:28rpx;border-radius:40rpx;text-align: center;background-color: #FFE600;padding: 20rpx 40rpx;margin: 30rpx 0;font-weight: bold;}
		}
		.empty{text-align: center;padding-top: 30rpx;
			.empty1{height: 200rpx;background:linear-gradient(90deg, #ECF5FF 0%, #CEE5FF 100%);line-height: 200rpx;border-radius: 10rpx;margin-bottom: 300rpx;
				text{font-weight: bold;font-size: 32rpx;float: left;margin-left: 120rpx;}
				image{height: 180rpx;width: 200rpx;float: right;margin-right: 50rpx;}
			}
			.btnn{display: inline-block;font-size:28rpx;border-radius:40rpx;text-align: center;background-color: #FFE600;padding: 20rpx 40rpx;margin: 30rpx 0;font-weight: bold;}
		}
	}

</style>
