zhgdyun/src/views/projectAdmin/fourEngin/security/rightTopComponents/aiDevList.vue

<template>
  <div>
    <div class="device" v-for="(i,index) in list" :key="index">
      <div class="device-name">{{i.hardwareName}}</div>
      <div class="info">
        
        <div class="detail">
          <div class="detail-item green">状态：{{(i.deviceState==1?'在线':'离线')}}</div>
          <div class="detail-item grey">标识：{{i.hardwareId}}</div>
          
        </div>
      </div>
    </div>
    <div v-if="(list.length==0)" style="font-size: 14px;color: #999;text-align: center;margin-top: 120px;">暂无数据</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      
    }
  },
  props: {
    list: {
      type: Array,
      default: function(){
        return []
      }
    }
  },
  methods: {

  },
  created() {

  },
}
</script>
<style lang="less" scoped>
.devices {
  padding-left: 20px;
  height: 100%;
  color: #fff;

  .device {
    width: 100%;
    // margin-top: 12px;

    .device-name {
      // margin-top: 20px;
      height: 40px;
      line-height: 40px;
      font-size: 12px;
    }

    .info {
     
      line-height: 22px;
      font-size: 12px;
      color: #68d8e4;
      display: flex;

      .image {
        margin-right: 20px;
        width: 170px;
        height: 140px;
      }
    }
  }

  .green {
    color: #46d7b6;
  }

  .grey {
    color: #9da1aa;
  }

  .orange {
    color: #e7622a;
  }
}
</style>