zh_order_food_xcx/components/en-utils/en-blank/en-blank.vue

<template>
	<view class="blank-page" :style="{backgroundColor:navBackgroundColor}" v-if="showBlank">
		<view class="blank-img-box">
			<image src="@/static/img/blank/no-goods.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
			},
			navBackgroundColor: {
				type: String,
				default: '#fff'
			},
			message: {
				type: String,
				default: '暂无数据!'
			},
			buttonText: {
				type: String,
				default: '按钮文字'
			},
			showButton: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {

			}
		},
		methods: {
			btnClick() {
				this.$emit('btnClick')
			}
		},
	}
</script>

<style scoped lang="scss">
  @import url("../../static/css/en-common.css") ;
	.blank-page {
		// width: 100vw;
		padding-top: 200rpx;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.blank-img-box {
		display: flex;
		justify-content: center;
		width: 100%;
		image{
			width: 200rpx;
			height: 200rpx;
		}
	}

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

	.blank-text {
		margin-top: 5px;
		margin-bottom: 32px;
		text{
			font-size: 14px;
			color: #AAAAAA;
		}
	}

	.default-button {
		width: 160px;
		height: 44px;
		background: rgb(52, 137, 255);
		box-shadow: 0px 2px 3px rgba(52, 137, 255, 0.29);
		border-radius: 22px;
		color: #fff;
		line-height: 44px;
		text-align: center;
	}
</style>