<template>
    <div class="index-notice">
  <div v-for="(it,idx) in noticeList" :key="idx" class="notice-item">
    <div style="font-size: 12px;color: #333;">
    <svg-icon class="icon-info" icon-class="info" v-if="it.type=='info'" color="orange"></svg-icon>
    <svg-icon class="icon-warn" icon-class="warn" v-if="it.type=='warn'" color="red"></svg-icon>
    {{ it.type=="info"?"系统信息":"告警信息" }}
    </div>
    <div style="color: #666;padding: 0px 12px;">
        {{ it.msg }}
    </div>
    <div style="text-align: right;color: #666;padding:0px 12px;border-bottom: solid 1px #eee;">
        {{ it.date }}
        </div>
  </div>
</div>
</template>

<script lang='ts' setup>
import {reactive} from 'vue'
let noticeList=reactive([
    { type:'info',msg:'测试消息1',date:'2024-05-12'},
    { type:'info',msg:'测试消息2',date:'2024-05-12'},
    { type:'warn',msg:'测试告警3',date:'2024-05-12'},
    { type:'warn',msg:'测试告警4',date:'2024-05-12'},
    { type:'info',msg:'测试消息5',date:'2024-05-12'},
    { type:'warn',msg:'测试告警3',date:'2024-05-12'},
    { type:'warn',msg:'测试告警4',date:'2024-05-12'},
    { type:'info',msg:'测试消息5',date:'2024-05-12'},
])
</script>
<style  lang='scss'>
.index-notice{
.notice-item{
   font-size: 12px;
   line-height: 30px;}
}
</style>