From 1ba3a11308cf59c513d70fbc3608961f19a02621 Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期三, 14 五月 2025 17:41:50 +0800
Subject: [PATCH] fix: ui
---
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