ucard-person-app-front/components/cwg-empty-state.vue

<template>
  <view class="empty-state">
    <image class="img" src="/static/images/undraw.png" alt="" />
    <view class="r">
      <view class="title">{{ t('Documentary.tradingCenter.item131') }}</view>
      <view class="text">{{ text || t('Documentary.tradingCenter.item131') }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
withDefaults(
  defineProps<{
    text?: string;
  }>(),
  {
    text: "",
  }
);
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.empty-state {
  display: flex;
  padding: px2rpx(31) px2rpx(24);
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  gap: px2rpx(24);

  .img {
    width: px2rpx(100) !important;
    height: px2rpx(98) !important;
    flex-shrink: 0;
  }

  .title {

    color: #1a1a1a;
    font-family: Roboto;
    font-size: px2rpx(31);
    font-style: normal;
    font-weight: 600;
    line-height: px2rpx(44);
    margin-bottom: px2rpx(8);
  }

  .text {
    color: #474747;
    font-family: Roboto;
    font-size: px2rpx(14);
    font-style: normal;
    font-weight: 400;
    line-height: px2rpx(20);
    letter-spacing: px2rpx(0.07);
  }
}
</style>