hyyfClient/src/views/DeviceMana/device/ManageItem.vue

<!--
 * @Author: East
 * @Date: 2021-12-08 08:39:57
 * @LastEditTime: 2021-12-08 09:04:13
 * @LastEditors: Please set LastEditors
 * @Description: 上面的一项
 * @FilePath: \hyyfClient\src\views\DeviceMana\device\ManageItem.vue
-->
<template>
  <div class="manage-item">
    <div class="icon">
      <slot name="icon"></slot>
    </div>
    <div class="data">
      <div class="title">{{ title }}</div>
      <div class="num">{{ num }}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    num: {
      type: String,
      default: "暂无数据",
    },
  },
};
</script>
<style scoped>
.manage-item {
  border: 1px solid #ddd;
  height: 100px;
  width: 18%;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.icon {
  margin: 0 10px 0 30px;
}
.title {
  font-size: 1rem;
}
</style>