<template>
  <div class="generator">
    <div class="info-panel base-info">
      <div class="panel-title gary-l">
        <div class="title">遥测值</div>
      </div>
      <div class="panel-body">
        <table class="table-form">
          <tr>
            <td class="text gray">U1绕组温度</td>
            <td class="value green">90.5</td>
            <td class="unit gray">℃</td>
            <td class="text gray">轴承A温度</td>
            <td class="value green">31.7</td>
            <td class="unit gray">℃</td>
          </tr>
          <tr>
            <td class="text gray">V1绕组温度</td>
            <td class="value green">89.5</td>
            <td class="unit gray">℃</td>
            <td class="text gray">轴承B温度</td>
            <td class="value green">49.9</td>
            <td class="unit gray">℃</td>
          </tr>
          <tr>
            <td class="text gray">W1绕组温度</td>
            <td class="value green">87.3</td>
            <td class="unit gray">℃</td>
            <td class="text gray"></td>
            <td class="value green"></td>
            <td class="unit gray"></td>
          </tr>
        </table>
      </div>
    </div>
    <div class="info-panel base-info">
      <div class="panel-title gary-l">
        <div class="title">遥测值</div>
      </div>
      <div class="panel-body">
        <table class="table-form">
          <tr>
            <td class="dot">空冷风扇保护1</td>
            <td class="dot">空冷风扇保护1</td>
            <td class="dot">空冷风扇保护1</td>
            <td class="dot">空冷风扇保护1</td>
            <td class="dot">空冷风扇保护1</td>
          </tr>
          <tr>
            <td class="dot ">空冷风扇保护1</td>
            <td class="dot ">空冷风扇保护1</td>
            <td class="dot ">空冷风扇保护1</td>
            <td class="dot red">空冷风扇保护1</td>
            <td class="dot red">空冷风扇保护1</td>
          </tr>
          <tr>
            <td class="dot ">空冷风扇保护1</td>
            <td class="dot ">空冷风扇保护1</td>
            <td class="dot ">空冷风扇保护1</td>
            <td class="dot red">空冷风扇保护1</td>
            <td class="dot">空冷风扇保护1</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 名称
  name: "generator",
  // 使用组件
  components: {},
  // 数据
  data() {
    return {};
  },
  // 函数
  methods: {},
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
};
</script>

<style lang="less" scoped>
.generator {
  .info-panel {
    flex: 1 0 auto;
    width: 100%;
    .panel-title {
      display: flex;
      width: 100%;
      background: fade(@darkgray, 20);
      padding: 1.37vh;
      padding-left: 2.222vh;
      align-items: center;
      font-size: @fontsize-s;
      color: #b2bdc0;

      svg {
        .svg-use path {
          fill: @gray;
        }

        width: 2.222vh;
        height: 2.222vh;
      }
    }

    .panel-body {
      border: 1px solid fade(@darkgray, 40);
      border-top: 0px;
    }

    & + .info-panel {
      margin-top: 1.481vh;
    }

    .table-form {
      .dot {
        color: @gray;

        &.red {
          color: @red;

          &::before {
            background: @red;
          }
        }

        &::before {
          content: " ";
          display: inline-block;
          width: 8px;
          height: 8px;
          background: @green;
          margin-right: 8px;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
