assess-app/components/en-utils/en-blank/en-blank.vue

<template>
	<view class="blank-page  animate__animated animate__fadeIn" v-if="showBlank">
		<view class="blank-img-box">
			<image class="image"
				src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/public/task-empty.png" mode="">
			</image>
		</view>
		<view class="blank-text">
			<text>{{message}}</text>
		</view>
		<view class="blank-button" @click="btnClick" v-if="showButton">
			<slot name="button">
				<view class="default-button">
					{{buttonText}}
				</view>
			</slot>
		</view>
	</view>
</template>

<script>
	/**
	 * 组件根据文档定位至最中部分，层级为 2
	 * 背景并非全部覆盖，请根据需求显示隐藏
	 * 自定义图片的时候需要自己写尺寸
	 * */
	export default {
		props: {
			showBlank: {
				type: Boolean,
				default: true
			},
			message: {
				type: String,
				default: '暂无数据!'
			},
			buttonText: {
				type: String,
				default: '按钮文字'
			},
			showButton: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				imageList: ['']
			}
		},
		methods: {
			btnClick() {
				this.$emit('btnClick')
			}
		},
	}
</script>

<style scoped lang="scss">
	// @import url("/static/css/en-common.css") ;
	.blank-page {
		padding: 120rpx 0;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 20rpx;
	}

	.blank-img-box {
		display: flex;
		justify-content: center;
		width: 100%;

		.image {
			width: 300rpx;
			height: 160rpx;
		}
	}

	.blank-img {
		display: block;
		width: 193px;
		height: 131px;
	}

	.blank-text {
		margin-top: 5px;

		text {
			font-size: 28rpx;
			color: #AAAAAA;
		}
	}

	.default-button {
		margin-bottom: 50rpx;
		width: 220rpx;
		height: 70rpx;
		background: #0FB160;
		box-shadow: 0px 2px 3px rgba(52, 137, 255, 0.29);
		border-radius: 22px;
		color: #fff;
		line-height: 70rpx;
		text-align: center;
		font-size: 30rpx
	}
</style>