<template>
  <div class="panel alarming">
    <div class="panel-tit">告警信息</div>
   
    <table class="alarm-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>报警时间</th>
          <th>报警事件</th>
        </tr>
      </thead>
    </table>
    <div class="scroll">
      <table class="alarm-table">
        <tbody>
         
          <tr>
            <td>1</td>
            <td class="online">2020-09-22 15:00:00</td>
            <td>事件11111</td>
          </tr>
          <tr>
            <td>1</td>
            <td class="online">2020-09-22 15:00:00</td>
            <td>事件11111</td>
          </tr>
          <tr>
            <td>1</td>
            <td class="online">2020-09-22 15:00:00</td>
            <td>事件11111</td>
          </tr>
          <tr>
            <td>1</td>
            <td class="online">2020-09-22 15:00:00</td>
            <td>事件11111</td>
          </tr>
          <tr>
            <td>1</td>
            <td class="online">2020-09-22 15:00:00</td>
            <td>事件11111</td>
          </tr>
        </tbody>
      </table>
    </div>
     <div class="panel-footer"></div>
  </div>
</template>
<script>
export default {
  name: "alarming",

  methods: {},
};
</script>
<style lang="scss" scoped>
.panel.alarming {
 margin-top:2rem;
  z-index: 3;
  box-sizing:border-box;
  table{
      padding:0 1rem;
    
        border-spacing: 0;
    
  }

  tr td,
  tr th {
    font-size: 1.4rem;
    line-height: 3.6rem;
     text-align:left;
    // padding: 0 1rem;
    padding:0;
    margin:0;
    // background:pink;
    border-bottom:1px solid #1c5899;
    border-left:0px solid red;
    border-right:0px solid red;
    border-top:0px solid red

  }
  .alarm-table tr td:first-child,
  .alarm-table tr th:first-child {
    width:12%;
  }

  .alarm-table tr td:nth-child(2),
  .alarm-table tr th:nth-child(2) {
  width:60%;
  }

  .alarm-table tr td:nth-child(3),
  .alarm-table tr th:nth-child(3) {
     width: 100px;
  }
}
</style>
<style lang="scss">
</style>