From 703c46d17731d1b437509f326c050d1d36838f74 Mon Sep 17 00:00:00 2001 From: zhengyiming <540361168@qq.com> Date: 星期四, 20 二月 2025 11:07:38 +0800 Subject: [PATCH] refactor: taro --- apps/h5/src/components/NoData/NoData.vue | 75 +++++++++++++++++++++++++++++++++++++ 1 files changed, 75 insertions(+), 0 deletions(-) diff --git a/apps/h5/src/components/NoData/NoData.vue b/apps/h5/src/components/NoData/NoData.vue new file mode 100644 index 0000000..3930e5e --- /dev/null +++ b/apps/h5/src/components/NoData/NoData.vue @@ -0,0 +1,75 @@ +<template> + <div :class="isDesktop ? 'desktop-no-data' : 'no-data'"> + <img v-if="type == 'content'" :src="noContent" /> + <img v-else-if="type == 'network'" :src="noNetwork" /> + <img v-else :src="noData" /> + <slot name="no-data-text"> + <div class="no-data-text">{{ noDataText }}</div> + </slot> + </div> +</template> +<script setup lang="ts"> +import noContent from '@/assets/components/icon-no-data.png'; +import noNetwork from '@/assets/components/icon-no-net.png'; +import noData from '@/assets/components/icon-no-data.png'; +const NoDataText = { + content: '鏆傛棤鍐呭', + data: '鏆傛棤鏁版嵁', + network: '鏆傛棤缃戠粶', +}; + +type Props = { + type?: keyof typeof NoDataText; + text?: string; + isDesktop?: boolean; +}; + +const props = withDefaults(defineProps<Props>(), { + type: 'data', + text: '', + isDesktop: false, +}); + +const noDataText = computed(() => { + return props.text ? props.text : NoDataText[props.type]; +}); +</script> + +<style lang="scss" scoped> +.no-data { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + // margin-top: 10vh; + flex: 1; + + img { + display: block; + margin: 0 auto; + } + + .no-data-text { + margin-top: 20px; + font-size: 22px; + text-align: center; + color: #67666e; + } +} + +.desktop-no-data { + padding-bottom: 16px; + + img { + display: block; + margin: 0 auto; + width: 14%; + } + + .no-data-text { + font-size: 20px; + text-align: center; + color: #67666e; + } +} +</style> -- Gitblit v1.9.1