gypsy-crm-frontend-vu/components/cwg-empty-state.vue

<template>
  <view class="empty-state">
    <image class="img" src="/static/images/no-data.png" alt="" />
    <view class="r">
      <view class="title" v-if="title" v-t="title" />
      <view class="title" v-else v-t="'Documentary.tradingCenter.item143'" />
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  title: { type: String, default: '' }
});
</script>

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

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

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

  .title {
    color: var(--bs-emphasis-color);
    font-family: Roboto;
    font-size: px2rpx(26);
    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>