<template>
  <div class="body">
    <img class="logo" src="../../assets/img/logo.png" alt="" />
    <div class="title">
      告警区
      <i
        class="icon el-icon-bell"
        title="点击播放测试音频"
        style="color: rgb(219, 215, 0)"
        @click="playSound"
      ></i>
    </div>
    <div class="record" @click="showRecord">告警记录</div>
    <div style="margin-top: 50px; margin-left: 10px; height: 19vh">
      <!-- <el-scrollbar>
                <div class="scoll" style="margin-left: 5px;">
                    <WarningCard></WarningCard>
                </div>
            </el-scrollbar> -->
      <WarningCard></WarningCard>
    </div>
  </div>
  <WarningRecords v-model="display"></WarningRecords>
</template>
<script>
import WarningCard from "./warningCard.vue";
import WarningRecords from "./warningRecords.vue";
export default {
  components: {
    WarningCard,
    WarningRecords,
  },
  data() {
    return {
      display: false,
    };
  },
  methods: {
    showRecord() {
      this.display = true;
    },
    playSound() {
      this.audio = new Audio("./static/sound/track.mp3");
      this.audio.play();
    },
  },
};
</script>
<style scoped>
.body {
  border: 1px solid #373737;
  width: 100%;
  margin-left: 15px;
  margin-top: 10px;
  height: 25vh;
}

.body .scoll {
  height: 91%;
}

.title {
  color: #ffffff;
  font-size: 14px;
  margin-left: 32px;
  /* margin-top: 12px; */
  margin-bottom: 10px;
  /* width: 570px; */
  width: 29vw;
  height: 50px;
  display: flex;
  align-items: center;
  position: absolute;
  background-color: #000000;
}

.title .icon {
  position: absolute;
  font-size: 20px;
  left: 50px;
  top: calc(50% - 10px);
  cursor: pointer;
}

.title::before {
  z-index: 1;
  content: "";
  position: absolute;
  left: -18px !important;
  /* top: 30px !important; */
  width: 5px;
  height: 5px;
  background-color: rgba(230, 191, 65, 1);
  border-radius: 50%;
}
.record {
  position: absolute;
  color: #ffffff;
  font-size: 14px;
  right: 0;
  top: 23px;
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(37, 116, 219, 1);
}

.logo {
  position: absolute;
  top: 2px;
  left: 12px;
}
</style>