EquipmentListChart.vue 2.36 KB
<template>
  <div class="Dashboard-Equipment">
    <div
      v-for="(item, index) in data.slice(0, 5)"
      :key="index"
      class="Dashboard-Equipment-item"
    >
      <div class="Dashboard-Equipment-icon" v-if="index === 0">
        <img src="@/assets/images/dashboard/icon_no.1@2x.png" />
      </div>
      <div class="Dashboard-Equipment-icon" v-else-if="index === 1">
        <img src="@/assets/images/dashboard/icon_no.2@2x.png" />
      </div>
      <div class="Dashboard-Equipment-icon" v-else-if="index === 2">
        <img src="@/assets/images/dashboard/icon_no.3@2x.png" />
      </div>
      <div class="Dashboard-Equipment-icon" v-else>NO.{{ index + 1 }}</div>
      <div class="Dashboard-Equipment-name">{{ item.equipmentNumber }}</div>
      <div class="Dashboard-Equipment-location">
        {{ item.equipmentPosition }}
      </div>
      <div class="Dashboard-Equipment-money">{{ item.money.toFixed(2) }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EquipmentList',
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss">
@import '@/assets/styles/variables.scss';

.Dashboard-Equipment {
  .Dashboard-Equipment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #333;
    text-align: center;
    height: 35px;
    margin: 0 10px;
    border-bottom: 1px solid #f1f1f1;
    &:last-child {
      border-bottom: 0;
    }
    .Dashboard-Equipment-icon {
      width: 20px;
      img {
        width: 16px;
        height: 20px;
        margin: 0 auto;
      }
    }
    .Dashboard-Equipment-name {
      width: 64px;
    }
    .Dashboard-Equipment-location {
      width: 200px;
    }
    .Dashboard-Equipment-money {
      font-size: 16px;
      text-align: right;
      width: 116px;
    }
  }
}
@media screen and (min-width: $bigScreenWidth) {
  .Dashboard-Equipment {
    .Dashboard-Equipment-item {
      font-size: 16px;
      height: 70px;
      margin: 0 20px;
    }
    .Dashboard-Equipment-icon {
      width: 40px;
      img {
        width: 32px;
        height: 40px;
        margin: 0 auto;
      }
    }
    .Dashboard-Equipment-name {
      width: 128px;
    }
    .Dashboard-Equipment-location {
      width: 200px;
    }
    .Dashboard-Equipment-money {
      font-size: 20px;
      width: 116px;
    }
  }
}
</style>