<template>
  <div class="title layout1">
    <span>告警：</span>
    <span class="jump-icon">>></span>
  </div>
  <div class="content">
    <div class="item" v-for="item in listInfo" :key="item.id">
        {{item.info}}
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  listInfo: {
    type: Array,
    default: () => [],
  },
});
</script>
<style scoped lang="scss">
.title {
 height: 20px;
 .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-y: auto;
    .item {
        width: 100%;
    }
}

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