securityHtml/src/views/index/components/alarming.vue

<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>