iot-front-ui/src/components/security/device/securityDeviceItem.vue

<template>
  <div class="securityDeviceItem">
    <a-row>
      <a-col>
        <div class="securityDeviceItem-line">
          <span class="securityDeviceItem-line-label">设备名称：</span>
          门禁设备1#
        </div>
      </a-col>
      <a-col :span="18">
        <div class="securityDeviceItem-line">
          <span class="securityDeviceItem-line-label">设备状态：</span>
          在线
        </div>
        <div class="securityDeviceItem-line">
          <span class="securityDeviceItem-line-label">功能交互：</span>
        </div>
      </a-col>
      <a-col :span="6">
        <div >
          <img height="60" :src="requireImg('security/devices/device-door.png')" />
        </div>
      </a-col>

      <a-col>

      </a-col>
    </a-row>
  </div>
</template>

<script>
import {requireImg} from "@/utils/requireImg";

export default {
  methods: {requireImg}
}
</script>

<style lang="less" scoped>
.securityDeviceItem {
  display: inline-block;
  margin: 15px 20px;
  width: 300px;
  height: 150px;
  background-color: #F7FBFF;
  .securityDeviceItem-line {
    line-height: 25px;
    margin: 12px 12px 0;
    .securityDeviceItem-line-label {
      color: #B2B2B2;
    }
  }
}
</style>