<template>
  <div class="content-box task-monitor">
    <div class="imgBox">
      <div
        v-for="(item, index) in list"
        :key="index"
        @click="gotopag(item.url)"
      >
        <img :src="`imgs/${item.src}`" alt="" />
      </div>
      <div
        v-for="(item, index) in new Array(6 - (list.length % 6)).fill('')"
        :key="index"
      ></div>
    </div>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      list: []
    };
  },
  computed: {},
  watch: {},
  created() {
    this.list = window.list;
    // console.log(new Array(6 - (window.list.length % 6)).fill(""));
    this.setBreadcrumb([{ label: "大屏展示", path: "/task-monitor" }]);
  },
  methods: {
    ...mapMutations(["setBreadcrumb"]),
    gotopag(url) {
      window.open(url);
    }
  }
};
</script>
<style lang="scss" scoped>
.task-monitor {
  .header_box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
  }
  .imgBox {
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    flex-wrap: wrap;
    // position: relative;
    div {
      width: 15%;
      height: 250px;
      border-radius: 4px;
      margin-bottom: 16px;
      overflow: hidden;
      cursor: pointer;
      transition: 0.2s;

      // &:hover {
      //   position: relative;
      //   top: -10px;
      // }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
