<template>
  <div class="light-matrix-small">
    <div class="card" v-for="(item, i) of list" :key="i" :class="item.color">
      {{ item.tag }}
    </div>
    <!-- 站位用 保证卡片布局最后一行不会有问题 -->
    <i class="blank" v-for="i in list.length" :key="i"></i>
  </div>
</template>

<script>
import util from "@/helper/util.js";
export default {
  // 名称
  name: "LightMatrix1",
  // 使用组件
  components: {},

  props: {
    list: {
      type: Array,
      default: [
        // {
        //   tag: "A01",
        //   color: "gray",
        // }
      ]
    }
  },
  // 数据
  data () {
    return {

    };
  },
  methods: {

  }
};
</script>

<style lang="less">
@panelHeight: 6.481vh;
@titleHeight: 3.704vh;

.light-matrix-small {
  padding: 8px;
  background: fade(@gray, 20);

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;

  .blank {
    margin-right: 4px;
    flex: 1 0 4.4444vh;
  }

  .card {
    margin-right: 4px;
    margin-top: 4px;
    flex: 1 0 4.4444vh;
  }

  .card {
    border-radius: 0.37vh;
    padding: 0.185vh 0.3704vh;
    text-align: center;
    border: 0.093vh solid;
    font-size: 14px;

    &.write {
      color: @black;
      border-color: @write;
      background-color: @write;
    }

    &.green {
      color: @green;
      border-color: @green;
    }

    &.blue {
      color: @darkBlue;
      border-color: @darkBlue;
    }

    &.pink {
      color: @pink;
      border-color: @pink;
    }

    &.red {
      color: @write;
      border-color: @red;
      background-color: @red;
    }

    &.orange {
      color: @orange;
      border-color: @orange;
    }

    &.gray {
      color: @write;
      border-color: @darkgray;
      background-color: @darkgray;
    }
  }
}
</style>
