for_client/src/components/message/index.vue

<template>
    <div class="hc-message-box">
        <div class="hc-lottie-box delete">
            <HcLottie v-if="isType === 'delete'" type="delete" style="height: 200px" />
            <HcLottie v-if="isType === 'warning'" type="warning" style="height: 140px" />
        </div>
        <div class="title">{{ titles }}</div>
        <div class="text">{{ text }}</div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { HcLottie } from 'hc-vue3-ui'
//参数
const props = defineProps({
    type: {
        type: String,
        default: 'warning',
    },
    title: {
        type: String,
        default: '',
    },
    text: {
        type: String,
        default: '',
    },
})

//监听
watch(() => [
    props.type,
    props.title,
    props.text,
], ([type, title, text]) => {
    isType.value = type
    titles.value = title
    texts.value = text
})

//变量
const isType = ref(props.type)
const titles = ref(props.title)
const texts = ref(props.text)
</script>

<style scoped lang="scss">
.hc-message-box {
    position: relative;
    .hc-lottie-box {
        position: relative;
        height: 200px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .title {
        position: relative;
        font-size: 20px;
        color: var(--hc-text-color);
        margin-bottom: 20px;
    }
    .text {
        color: var(--hc-label-color);
        font-size: 14px;
        margin-bottom: 10px;
    }
}
html.dark {
    .title {
        position: relative;
        font-size: 20px;
        color:white;
        margin-bottom: 20px;
    }
}
</style>