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: {},
  // 数据
  props: {
    list: {
      type: Array,
      default: () => [
        // {
        //   tag: "A01",
        //   color: "gray",
        // },
      ],
    },
  },
  // 函数
  methods: {
    calculateWidth() {
      if (this.list.length > 60 && this.list.length <= 72) {
        this.$el.style.width = "440px";
      } else if (this.list.length > 72 && this.list.length <= 88) {
        this.$el.style.width = "540px";
      } else if (this.list.length > 88 && this.list.length <= 96) {
        this.$el.style.width = "600px";
      } else if (this.list.length > 97 && this.list.length <= 112) {
        this.$el.style.width = "680px";
      } else if (this.list.length > 113 && this.list.length <= 128) {
        this.$el.style.width = "780px";
      } else if (this.list.length > 129 && this.list.length <= 144) {
        this.$el.style.width = "880px";
      } else if (this.list.length > 144 && this.list.length <= 168) {
        this.$el.style.width = "1000px";
      } else if (this.list.length > 168) {
        this.$el.style.width = "1168px";
      }
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
    this.$nextTick(() => {
      this.calculateWidth();
    });
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
    this.$nextTick(() => {
      this.calculateWidth();
    });
  },
};
</script>

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

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

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;

  .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;
    }

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

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

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

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

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