neic-hefeng/src/components/area/windturbine/YawDetail.vue

<template>
    <div class="firstdiv">
    <img
      style="float: left; margin-left: 40px; margin-top: 90px;width:50vh;height:25vh;"
      src="../../../assets/img/WindturbineDetailPages/变桨.png"
      object-fit="fill"
    />
    <div class="twodiv">
    <table>
        <tr>
            <th>状态信息</th>
        </tr>
        <tr>
            <td>左极限位置</td>
            <td><green></green></td>
        </tr>
        <tr>
            <td>右极限位置</td>
            <td><red></red></td>
        </tr>
    </table>
        <table>
        <tr>
            <th>状态信息</th>
        </tr>
        <tr>
            <td>电机1保护OK</td>
            <td><green></green></td>
        </tr>
        <tr>
            <td>电机2保护OK</td>
            <td><green></green></td>
        </tr>
    </table>
        <table>
        <tr>
            <th>数值信息</th>
        </tr>
        <tr>
            <td>对风偏差</td>
            <td>28.07</td>
            <td>度</td>
        </tr>
        <tr>
            <td>对风偏差角度</td>
            <td>710.07</td>
            <td>度</td>
        </tr>
    </table>
    </div>
  </div>
</template>
<script>

export default{
    components: {
        
    }
}
</script>

<style scoped>
.firstdiv {
  height: 50vh;
}
.onediv {
  float: right;
  margin-right: 30px;
}
.twodiv {
  float: right;
  margin-right: 30px;
}
td:nth-child(1) {
  height: 25px;
  width: 130px;
  text-align: right;
}
td:nth-child(2) {
  width: 78px;
  text-align: right;
  color: rgb(5, 176, 71);
}
td:nth-child(3) {
  text-align: center;
  width: 30px;
}
tr:nth-child(1) {
  font-size: 20px;
  width: 90px;
  text-align: right;
}
th {
  height: 40px;
}
table{
  margin-top: 30px;
}
</style>