k_online_ui/src/components/VEmpty/src/VEmpty.vue

<script setup lang="ts"></script>

<template>
  <div class="v-empty">
    <div class="empty-img">
      <img src="./images/default_image.png" alt="" />
    </div>
    <p class="title">
      <slot name="title">No Results Found</slot>
    </p>
    <slot name="result">
      <p class="light">We didn't find any search results,</p>
      <p class="light">please try to adjust your search keywords.</p>
    </slot>
    <div class="suggestion">
      <slot name="suggestion"></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.v-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  .empty-img {
    margin-bottom: 16px;
  }
  .title {
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-neutral-2);
  }
  .light {
    font-size: 12px;
    line-height: 18px;
    color: var(--color-neutral-3);
  }
  .suggestion {
    margin-top: 16px;
    padding: 8px;
    font-size: 12px;
    line-height: 18px;
    border-radius: 6px;
    text-align: left;
    background-color: var(--color-table-header-bg);
    :deep(p) {
      margin: 0;
      color: var(--color-neutral-3);
    }
  }
}
</style>