hb_sis_zhfx/src/views/WindSite/pages/Home/light-matrix.vue

<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: {},
  // 数据
  data() {
    return {
      // 数据结构
      list: [
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
        {
          tag: "A01",
          color: "gray",
        },
      ],
    };
  },
  // 函数
  methods: {},
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
};
</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>