yizhizan-h5/components/empty.vue

<template>
	<view class="page-box" :style="isShow?'height:50vh':''">
		<view class="centre">
			<image :class="size" src="../static/images/index/empty.png" mode=""></image>
			<view class="tips">
				{{content}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			content: {
				type: String,
				default: '暂无内容'
			},
			size:{
				type: String,
				default: 'large'
			},
			isShow:{
				type:Boolean,
				default:true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-box {
		position: relative;
		left: 0;
		// height: 50vh;
		
	}

	.centre {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		height: 0rpx;
		text-align: center;
		// padding: 200rpx auto;
		font-size: 32rpx;

		image {
			// width: 387rpx;
			// height: 341rpx;
			width: 340rpx;
			height: 340rpx;
			// margin-bottom: 20rpx;
			margin: 0 auto 20rpx;
			// border: 1px dotted #000000;
		}
		.large{
			width: 340rpx;
			height: 340rpx;
		}
		.medium{
			width: 240rpx;
			height: 240rpx;
		}
		.mini{
			width: 140rpx;
			height: 140rpx;
			margin-top: 40rpx;
		}

		.tips {
			color: rgba(200, 201, 204, 1);
			font-family: DM Sans;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 20px;
			letter-spacing: 0px;
			text-align: center;
		}

		.btn {
			margin: 80rpx auto;
			width: 600rpx;
			border-radius: 32rpx;
			line-height: 90rpx;
			color: #ffffff;
			font-size: 34rpx;
			background: #5074FF;
		}
	}
</style>