<template>
	<view class="noData hideToShow" :style="{ backgroundColor: bgColor }">
		<view class="image">
			<image :src="noDataImg"></image>
		</view>
		<!-- 网络连接失败默认显示内容 -->
		<view class="content">
			<text class="title" :style="{ color: mainColor }">不存在的内容</text>
			<text class="desc" :style="{ color: viceColor }">没有找到您想要的东西</text>
		</view>
		<!-- 自定义内容 -->
		<slot />
	</view>
</template>

<script>
	export default {
		name: "NotFound",
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			/* 背景颜色自定义 */
			bgColor: {
				type: String,
				default: '#ffffff'
			},
			/* 标题颜色自定义 */
			mainColor: {
				type: String,
				default: '#373a40'
			},
			/* 描述颜色自定义 */
			viceColor: {
				type: String,
				default: '#8b8b8b'
			},
			// 是否开启自定义
			custom: {
				type: false,
				default: false
			}
		},
		data() {
			return {
				type: '',
				netType: "",
				mainText: '网络居然崩溃了',
				viceText: '别紧张,去检测一下网络设置',
				netWorkImg: '/static/images/noNetWork.png',
				noDataImg: '/static/images/notFound.png'
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.noData {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		
		padding-top: 400rpx;

		.image {
			width: 187upx;
			height: 144upx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.content {
			width: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			letter-spacing: 1upx;

			.title {
				font-size: 36upx;
			}

			.desc {
				font-size: 28upx;
				margin-top: 6upx;
			}

			.btn {
				width: 160upx;
				height: 65upx;
				color: #868d91;
				font-size: 24upx;
				margin-top: 34upx;
				border-radius: 36upx;
				border: 1upx solid #d4d4d4;
			}

			.btn::after {
				border: none;
			}
		}
	}
</style>
