index.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <div class="hc-message-box">
  3. <div class="hc-lottie-box delete">
  4. <HcLottie v-if="isType === 'delete'" type="delete" style="height: 200px" />
  5. <HcLottie v-if="isType === 'warning'" type="warning" style="height: 140px" />
  6. </div>
  7. <div class="title">{{ titles }}</div>
  8. <div class="text">{{ text }}</div>
  9. </div>
  10. </template>
  11. <script setup>
  12. import { ref, watch } from 'vue'
  13. import { HcLottie } from 'hc-vue3-ui'
  14. //参数
  15. const props = defineProps({
  16. type: {
  17. type: String,
  18. default: 'warning',
  19. },
  20. title: {
  21. type: String,
  22. default: '',
  23. },
  24. text: {
  25. type: String,
  26. default: '',
  27. },
  28. })
  29. //监听
  30. watch(() => [
  31. props.type,
  32. props.title,
  33. props.text,
  34. ], ([type, title, text]) => {
  35. isType.value = type
  36. titles.value = title
  37. texts.value = text
  38. })
  39. //变量
  40. const isType = ref(props.type)
  41. const titles = ref(props.title)
  42. const texts = ref(props.text)
  43. </script>
  44. <style scoped lang="scss">
  45. .hc-message-box {
  46. position: relative;
  47. .hc-lottie-box {
  48. position: relative;
  49. height: 200px;
  50. overflow: hidden;
  51. display: flex;
  52. align-items: center;
  53. justify-content: center;
  54. }
  55. .title {
  56. position: relative;
  57. font-size: 20px;
  58. color: var(--hc-text-color);
  59. margin-bottom: 20px;
  60. }
  61. .text {
  62. color: var(--hc-label-color);
  63. font-size: 14px;
  64. margin-bottom: 10px;
  65. }
  66. }
  67. html.dark {
  68. .title {
  69. position: relative;
  70. font-size: 20px;
  71. color:white;
  72. margin-bottom: 20px;
  73. }
  74. .text {
  75. color: white;
  76. font-size: 14px;
  77. margin-bottom: 10px;
  78. }
  79. }
  80. </style>