From ddddcf83e7deb9d0a674d2bbead300089530d87e Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期三, 21 五月 2025 13:24:07 +0800
Subject: [PATCH] feat: UI
---
apps/h5/src/components/NoData/NoData.vue | 77 +++++++++++++++++++++++++++-----------
1 files changed, 54 insertions(+), 23 deletions(-)
diff --git a/apps/h5/src/components/NoData/NoData.vue b/apps/h5/src/components/NoData/NoData.vue
index 5f5401e..3930e5e 100644
--- a/apps/h5/src/components/NoData/NoData.vue
+++ b/apps/h5/src/components/NoData/NoData.vue
@@ -1,44 +1,75 @@
<template>
- <div class="no-data-wrapper">
- <img class="no-data-img" :src="NoDataImage" alt="" />
- <span class="no-data-text">鏆傛棤鏁版嵁</span>
+ <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: '鏆傛棤缃戠粶',
+};
-<script lang="ts">
-import { defineComponent } from 'vue';
+type Props = {
+ type?: keyof typeof NoDataText;
+ text?: string;
+ isDesktop?: boolean;
+};
-import { NoDataImage } from '@life-payment/constants';
+const props = withDefaults(defineProps<Props>(), {
+ type: 'data',
+ text: '',
+ isDesktop: false,
+});
-export default defineComponent({
- name: 'NoData',
-
- setup() {
- return {
- NoDataImage,
- };
- },
+const noDataText = computed(() => {
+ return props.text ? props.text : NoDataText[props.type];
});
</script>
-<style lang="scss">
-.no-data-wrapper {
+<style lang="scss" scoped>
+.no-data {
display: flex;
- width: 100%;
- height: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
+ // margin-top: 10vh;
+ flex: 1;
- .no-data-img {
- width: 284px;
- height: 202px;
+ 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;
- color: #333333;
- line-height: 2.4;
+ text-align: center;
+ color: #67666e;
}
}
</style>
--
Gitblit v1.9.1