front-end/mallApp/src/components/app-wrapper-empty.vue

<template>
	<div class="app-empty">
		<div class="app-empty-center">
			<div class="app_empty_img">
				<image :src="emptyImgUrl" mode="widthFix"></image>
			</div>
			<div class="app-empty-title">
				<span class="empty_noData">{{ title }}</span>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'AppWrapperEmpty',
	props: {
		type: {
			type: String,
			default: 'noData'
		},
		pictureHeight: {
			type: String,
			default: ''
		},
		title: {
			type: String,
			default: '暂无数据'
		},
		content: {
			type: String,
			default: ''
		},
		isEmpty: {
			type: Boolean,
			default: false
		},
		isLoading: {
			type: Boolean,
			default: false
		},
		finished: {
			type: Boolean,
			default: false
		},
		isTitle: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		/** 空状态图：优先 imgUrl，避免 hostUrl 未配置时路径变成 undefined/... */
		emptyImgUrl() {
			const imgHost = (this.constant && this.constant.imgUrl) || (this.constant && this.constant.hostUrl) || ''
			return `${imgHost}/image/common/no_data_hua.png`
		}
	},
	data() {
		return {}
	}
}
</script>
<style lang="scss" scoped>
.app-empty {
	width: 100%;
	display: flex;
	align-items: center;
	& .app-empty-center {
		width: 100%;
	}
	& .app_empty_img {
		width: 100%;
		margin-top:100upx;
		text-align: center;
		& image {
			margin:0 auto;
			width:260upx;
		}
	}
	& .app-empty-title {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 32upx;
		color: #cccccc;
		margin-top:30upx;
		& span {
			font-weight: 400;
			& + span {
				font-weight: initial;
				margin-top: 10upx;
				font-size: 26upx;
			}
		}
		& .empty_noData {
			font-size: 26upx;
		}
	}
}
</style>