<template>
	<view class="empty" :style="{ background: bgcolor, marginTop: mrTop + 'rpx' }">
		<view class="ty_content" :style="{ paddingTop: pdTop + 'rpx' }">
			<view class="content_top" :style="{ width: width + 'rpx', height: height + 'rpx' }">
				<image :src="pictrue || Empty" style="width: 100%;" mode=""></image>
			</view>
			<view class="content_c color_666666">{{ content }}</view>
			<button class="content_btn" v-if="showButton" hover-class="active">重新加载</button>
		</view>
	</view>
</template>

<script>
        let Empty = require('../../static/img/Empty.png');
export default {
	name: 'empty',
	data() {
		return {
            Empty   
		}
	},
	props: {
		content: {
			type: String,
			required: false,
			default: '网络加载失败'
		},
		bgcolor: {
			type: String,
			required: false,
			default: 'transparent'
		},
		width: {
			type: String,
			required: false,
			default: '504'
		},
		height: {
			type: String,
			required: false,
			default: '504'
		},
		pdTop: {
			type: String,
			required: false,
			default: '20'
		},
		mrTop: {
			type: String,
			required: false,
			default: '0'
		},
		pictrue: {
			type: String,
			required: false,
			default: ''
		},
		showButton: {
			type: Boolean,
			required: false,
			default: false
		}
	},
	methods: {

	}
}
</script>

<style lang="scss" scoped>
    
.empty {
	width: 100%;
	position: relative;
	height: 100%;
	overflow: hidden;

	.ty_content {
		// position: absolute;
		// left: 50%;
		// top: 0;
		// transform: translate(-50%, 0);
		display: flex;
		width: 100%;
		height: max-content;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 20rpx;

		.content_top {
			// width: 504rpx;
			// height: 504rpx;
		}

		.content_c {
			width: 100%;
			margin-top: 20rpx;
			color: #6A707C;
			font-size: 28rpx;
			text-align: center;
		}

		.content_btn {
			margin-top: 37rpx;
			width: fit-content;
			height: 45rpx;
			border-radius: 5rpx;
			border: 1rpx solid #643CB6;
			font-size: 24rpx;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			font-weight: 400;
			color: #643CB6;
			line-height: 45rpx;
		}

		.active {
			border: 1rpx solid #666666;
			color: #666666;
		}
	}
}
</style>