<template>
  <div class="title layout1">
    <span class="warn-title">{{ title }}：</span>
    <span class="jump-icon">>></span>
  </div>
  <div class="content">
    <div class="item" v-for="item in listInfo" :key="item">
        <img src="@/assets/icons/notice.png" alt="">{{item}}
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  listInfo: {
    type: Array,
    default: () => [],
  },
  title: {
    type: String,
    default: "告警",
  }
});
</script>
<style scoped lang="scss">
.title {
 height: 20px;
 .warn-title {
  font-weight: bold;
  color: rgb(217, 10, 10);
 }
 .jump-icon {
    font-weight: bold;
    color: #018796;
    cursor: pointer;
 }
}
.content {
    width: 100%;
    height: calc(15vh - 30px);
    padding: 10px 0px 10px 30px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    .item {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        padding: 4px 0px 4px 2px;
        box-shadow: rgba(53,58,62,0.08) 0px 1px 10px 0px,rgba(53,58,62,0.08) 0px 2px 4px 0px;
        img {
          width: 20px;
          height: auto;
        }
    }
}

.content::-webkit-scrollbar {
  width: 0px;
  background-color: rgba(13, 15, 18, 0.1);
}
 
.layout1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>