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

<template>
  <div>
    <div class="device" v-for="(i,index) in list" :key="index">
      <div class="device-name">{{i.deviceName}}</div>
      <div class="info">
        <!-- <img class="image" src="../../assets/images/common/bg_kyj.png" /> -->
        <div class="detail">
          <div class="detail-item green">状态：{{ i.isClosed == 1 ? '在线' : '离线' }}</div>
          <div class="detail-item grey">是否启用：{{ i.isEnable == 1 ? '是' : '否' }}</div>
         
          <div class="detail-item orange">安装地址：{{ i.address }}</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>