fix: 二期需求

zhengyiming

2025-03-11 5a5af7e63a639541db5121d9fa30775b6d500108

 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>