<!--
 * @Author: ch
 * @Date: 2022-03-20 13:11:55
 * @LastEditors: ch
 * @LastEditTime: 2022-04-22 11:37:16
 * @Description: file content
-->
<template>
	<view class="empty">
		<slot name="icon">
			<image class="empty--icon" :src="icon" mode="widthFix"></image>
		</slot>
		<view class="empty--tips">{{ tips }}</view>
		<slot name="btn"></slot>
	</view>
</template>

<script>
export default {
	data(){
		return {
		}
	},
	/**
	 * 组件的属性列表
	 * 用于组件自定义设置
	 */
	props: {
		icon : {
			type : String,
			default : require('@/static/message/empty.png')
		},
		// 提示的问题
		tips: {
			type: String,
			default: "亲，暂无相关数据",
		}
	},
	mounted(){
	},

	methods: {},
};
</script>

<style lang="scss" scoped>
.empty {
	box-sizing: border-box;
	padding: 50rpx;
	text-align: center;
	background: $color-grey0;
	margin: 20rpx 30rpx;
	border-radius: 16rpx;

	&--tips {
		font-size: 26rpx;
		color: $color-grey4;
		margin: 30rpx 0 50rpx;
	}

	&--icon {
		width: 380rpx;
		height: 240rpx;
	}
}
</style>
