<template>
	<view class="no-data-body">
		<view class="no-data-content">
			<theme-image class="no-data-image" src="@/static/rank/image_phb_qxy.png"></theme-image>
			<text class="no-data-text" :style="{ color: themeStore.rule.textColor }">{{ text }}</text>
		</view>
	</view>
</template>

<script setup>
import { useThemeStore } from '@/store/useThemeStore';
const themeStore = useThemeStore().theme.promo;
const props = defineProps({
	text: String
});
</script>

<style lang="scss" scoped>
.no-data-body {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 119rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.no-data-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		.no-data-image {
			width: 300rpx;
			height: 298rpx;
		}
		.no-data-text {
			width: 100%;
			font-weight: 500;
			font-size: 24rpx;
			line-height: 44rpx;
			color: #fff;
			text-align: center;
			margin-top: 81rpx;
		}
	}
}
</style>
