<template>
  <div class="finetriangle">
    <div class="sanjiao">
      <!-- 金字塔 -->
      <div class="sj sj1"></div>
      <div class="sj sj2"></div>
      <div class="sj sj3"></div>
      <!-- 右侧数据填入 -->
      <div class="comarow descsj1">
        <span class="line"></span>
        <span class="value" id="hgwvalue">0</span>
      </div>
      <div class="comarow descsj2">
        <span class="line"></span>
        <span class="value" id="gwvalue">0</span>
      </div>
      <div class="comarow descsj3">
        <span class="line"></span>
        <span class="value" id="zgwvalue">0</span>
      </div>
      <!-- 中间文字 -->
      <div class="describe describe1">设备异常</div>
      <div class="describe describe2">设备正常</div>
      <div class="describe describe3">设备运作</div>
    </div>
  </div>
</template>
<script>
  export default {
    name:'finetriangle',
    data(){
      return{

      }
    }
  }
</script>

// css
<style>
  body {
    width: 100%;
    height: 100%;
  }

  .finetriangle {
    width: 300px;
    height: 200px;
    /*background: #082449;*/
  }

  .finetriangle .sanjiao {
    width: 308px;
    margin: 0 auto;
    position: relative;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    top: 46%;
    padding-right: 30px;
    padding-top: 70px;
  }

  .finetriangle .sj {
    margin: 0 auto;
    height: 0;
    border-top: 0 solid transparent;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom-width: 30px;
    border-bottom-style: solid;
    box-sizing: content-box;
    margin-bottom: 9px;
  }

  .finetriangle .sj1 {
    width: 0;
    border-bottom-color: #e84249;
    box-shadow: 0 10px 0 0 #e84249;
  }

  .finetriangle .sj2 {
    width: 40px;
    border-bottom-color: #f7af43;
    box-shadow: 0 10px 0 0 #fbb244;
  }

  .finetriangle .sj3 {
    width: 80px;
    border-bottom-color: #06b8fe;
    box-shadow: 0 10px 0 0 #0698d1;
  }

  /*.finetriangle .sj4 {*/
  /*  width: 120px;*/
  /*  border-bottom-color: #ffc94d;*/
  /*  box-shadow: 0 10px 0 0 #e5912e;*/
  /*}*/

  /*.finetriangle .sj5 {*/
  /*  width: 160px;*/
  /*  border-bottom-color: #67ce67;*/
  /*  box-shadow: 0 10px 0 0 #499c49;*/
  /*}*/

  .finetriangle .comarow {
    font-size: 12px;
    position: absolute;
  }

  .finetriangle .line {
    display: inline-block;
    height: 1px;
    margin-bottom: 5px;
  }

  .finetriangle .value {
    font-size: 16px;
  }

  .finetriangle .descsj1 {
    top: 75px;
    margin-left: 146px;
    color: #e84249;
  }

  .finetriangle .descsj1 .line {
    width: 100px;
    background: #e84249;
  }

  .finetriangle .descsj2 {
    top: 111px;
    margin-left: 166px;
    color: #f7af43;
  }

  .finetriangle .descsj2 .line {
    width: 80px;
    background: #f7af43;
  }

  .finetriangle .descsj3 {
    top: 151px;
    margin-left: 186px;
    color: #0698d1;
  }

  .finetriangle .descsj3 .line {
    width: 60px;
    background: #0698d1;
  }

  /*.finetriangle .descsj4 {*/
  /*  top: 119px;*/
  /*  margin-left: 206px;*/
  /*  color: #ffc94d;*/
  /*}*/

  /*.finetriangle .descsj4 .line {*/
  /*  width: 40px;*/
  /*  background: #ffc94d;*/
  /*}*/

  /*.finetriangle .descsj5 {*/
  /*  top: 159px;*/
  /*  margin-left: 226px;*/
  /*  color: #67ce67;*/
  /*}*/

  /*.finetriangle .descsj5 .line {*/
  /*  width: 20px;*/
  /*  background: #67ce67;*/
  /*}*/

  .finetriangle .describe {
    position: absolute;
    margin-left: 135px;
    font-size: 12px;
    color: #ffffff;
  }

  .finetriangle .describe1 {
    top: 80px;
  }

  .finetriangle .describe2 {
    top: 116px;
  }

  .finetriangle .describe3 {
    top: 156px;
  }

  .finetriangle .describe4 {
    top: 124px;
  }

  .finetriangle .describe5 {
    top: 163px;
  }
</style>

