VEmpty.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <script setup lang="ts"></script>
  2. <template>
  3. <div class="v-empty">
  4. <div class="empty-img">
  5. <img src="./images/default_image.png" alt="" />
  6. </div>
  7. <p class="title">
  8. <slot name="title">No Results Found</slot>
  9. </p>
  10. <slot name="result">
  11. <p class="light">We didn't find any search results,</p>
  12. <p class="light">please try to adjust your search keywords.</p>
  13. </slot>
  14. <div class="suggestion">
  15. <slot name="suggestion"></slot>
  16. </div>
  17. </div>
  18. </template>
  19. <style lang="scss" scoped>
  20. .v-empty {
  21. display: flex;
  22. flex-direction: column;
  23. align-items: center;
  24. .empty-img {
  25. margin-bottom: 16px;
  26. }
  27. .title {
  28. margin-bottom: 8px;
  29. font-weight: 600;
  30. color: var(--color-neutral-2);
  31. }
  32. .light {
  33. font-size: 12px;
  34. line-height: 18px;
  35. color: var(--color-neutral-3);
  36. }
  37. .suggestion {
  38. margin-top: 16px;
  39. padding: 8px;
  40. font-size: 12px;
  41. line-height: 18px;
  42. border-radius: 6px;
  43. text-align: left;
  44. background-color: var(--color-table-header-bg);
  45. :deep(p) {
  46. margin: 0;
  47. color: var(--color-neutral-3);
  48. }
  49. }
  50. }
  51. </style>