<template>
	<view class="xt-video-error">
		<text class="xt-video-error-text">视频不见啦</text>
		<view class="xt-video-reload" @click="xtVideoReload">
			<text>点击重新加载</text>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			xtVideoReload() {
				this.$emit('onReload')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xt-video-error {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 6;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		&-text {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.8);
		}
		.xt-video-reload {
			height: 36rpx;
			border: 1px solid rgba(255, 255, 255, 0.5);
			border-radius: 18rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 12rpx;
			margin-top: 20rpx;
			> text {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.9);
			}
		}
	}
</style>