<template>
  <el-row class="mianBox-af">
    <el-row class="headerBox">
      <el-col class="title">
        <img src="../../../assets/image-af/title6.png" alt="" />
        异常监控信息
      </el-col>
    </el-row>
    <el-row class="contentBox" :gutter="10">
      <el-col v-for="item in imageList" :key="item">
        <img :src="item" alt="" />
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
export default {
  props: ["imageList"],
  data() {
    return {
      checkList: [],
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.mianBox-af {
  .contentBox {
    width: 100%;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    padding: 10px 15px;
    font-size: 16px;
    overflow: auto;
    flex-wrap: wrap;
    scrollbar-width: none;
    /* firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
      // opacity: 0;
      /* Chrome Safari */
    }
    .el-col {
      width: 50%;
      height: 100%;
      &:nth-child(n + 3) {
        margin-top: 10px;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>