emsfront/src/views/ems/dzjk/sbjk/yl/index.vue

<template>
    <div>
      <div class="yl-item-container">
        <div class="header">
          <div class="header-title">1#液冷</div>
          <div>工作模式：<span class="header-values">运行</span></div>
          <div>当前温度：<span class="header-values">12&#8451;</span></div>
        </div>
        <div class="content">
          <el-row>
            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
          </el-row>
        </div>
      </div>

      <div class="yl-item-container yl-warn-item-container">
        <div class="header">
          <div class="header-title">2#液冷</div>
          <div>工作模式：<span class="header-values">运行</span></div>
          <div>当前温度：<span class="header-values">12&#8451;</span></div>
        </div>
        <div class="content">
          <el-row>
            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
          </el-row>
        </div>
      </div>
      <div class="yl-item-container">
        <div class="header">
          <div class="header-title">3#液冷</div>
          <div>工作模式：<span class="header-values">运行</span></div>
          <div>当前温度：<span class="header-values">12&#8451;</span></div>
        </div>
        <div class="content">
          <el-row>
            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
          </el-row>
        </div>
      </div>

      <div class="yl-item-container yl-warn-item-container">
        <div class="header">
          <div class="header-title">4#液冷</div>
          <div>工作模式：<span class="header-values">运行</span></div>
          <div>当前温度：<span class="header-values">12&#8451;</span></div>
        </div>
        <div class="content">
          <el-row>
            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
          </el-row>
        </div>
      </div>
  </div>
</template>


<script>
export default {
  name:'DzjkSbjkYl',
  data() {
    return {
      tempData:[
        {title:'制热开启点',value:12,attr:''},
        {title:'制冷开启点',value:23,attr:''},
        {title:'高温告警点',value:30,attr:''},
        {title:'制热停止点',value:24,attr:''},
        {title:'制冷停止点',value:21,attr:''},
        {title:'低温告警点',value:10,attr:''},

      ]
    }
  },
  methods:{

  },
  mounted(){

  }
}
</script>

<style scoped lang="scss">
.yl-item-container{
  border-radius: 5px;
  background-color: #EBF6F6;
  &:not(:last-child){
    margin-bottom: 25px;
  }
  .header{
    line-height: 40px;
    font-size: 14px;
    >div{
      display: inline-block;
      margin-right: 40px;
    }
    .header-title{
      border-radius:  5px 0 5px 0;
      color:#ffffff;
      width: 120px;
      height: 40px;
      font-size: 16px;
      background-color: #05AEA3;
      text-align: center;
    }
    .header-values{
      color: #05AEA3;
      font-weight: 500;
    }
  }
  .content{
    padding:25px;
    .el-row{
      background-color: #ffffff;
      border:1px solid #eeeeee;
      line-height: 14px;
      color: #333333;
      font-size: 12px;
      .el-col{
        padding:10px 0;
        text-align: center;
      }
      .el-col:nth-child(-n+3){
        border-bottom: 1px solid #eeeeee;
      }
      .el-col:not(:nth-child(3n)){
        border-right: 1px solid #eeeeee;
      }
    }
  }
}
.yl-warn-item-container{
  background-color: #FFF1F0;
  .header{
    .header-title{
      background-color: #FC6B69;
    }
    .header-values{
      color: #FC6B69;
    }
  }
}

</style>