subject_gxj/xj_project_app_2024_2_18/components/empty-show/empty-show.vue

<template>
	<view class="empty-main" :style="{'height':heightPrecent}">
		<view class="empty-image" v-if="!onlyText">
			<image src="@/static/list-emptys.png" mode=""></image>
		</view>
		<text :style="`font-size: ${size}`">{{showText}}</text>
	</view>
</template>

<script setup>
	const props = defineProps({
		onlyText: {
			type: Boolean,
			default: false
		},
		heightPrecent: {
			type: String,
			default: "100%"
		},
		showText: {
			type: String,
			default: "列表为空"
		},
		size:{
			type: String,
			default: '36rpx'
		}
	})
</script>

<style lang="scss" scoped>
	.empty-main {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		// height: 100%;
		text-align: center;
		font-weight: 700;
		color: #8798B6;

		.empty-image {
			width: 378rpx;
			height: 292rpx;
			margin: 0 auto;

			image {
				width: 100%;
				height: 100%
			}
		}
	}
</style>