clientManageSystem/src/baseComponents/HeaderSmallTips.vue

<template>
    <div class="self_alert_tips" style="flex-shrink: 0;" v-if="visible">
        <div class="msg">
            <i class="hjx-dui iconfont"></i>
            <div  class="tips_title">
                <template v-for="(item,index) in props.messageTipList" :key="item.title">
                {{item.title}}{{item.colon === false ? '' : '：'}} {{item.num}}{{ item.unit }}
                {{ index ==( props.messageTipList.length - 1) ? `` : `&nbsp; &nbsp; &nbsp;` }}
                </template>
            </div>
        </div>
         <i @click="visible = false" class="hjx-guanbi iconfont"></i>
    </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'

interface messageItem {
    title:string,
    unit:string,
    num:string,
    colon?:Boolean

}

const props = defineProps({
    messageTipList:{
        required:true,
        type:Array<messageItem>,
        default:()=>[]
    }
})

const visible = ref(true)


</script>


<style lang="scss" scoped>
.hjx-dui{
    color: #FB9F34;
}
.hjx-guanbi{
    color: #F1DABF;
    &:hover{
        cursor: pointer;
    }
}

.self_alert_tips{
    border:solid rgba(251, 159, 52,0.1) 1px;
    border-radius: 4px;
    padding: 10px 12px;
    background-color: #fff6eb;
    font-size: 14px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    .msg{
        display: flex;  
        align-items: center;
        gap: 10px;
        .tips_title{
            color:#666666;
        }
    }
}
</style>