<template>
  <div class="left-content-monitoring">
    <div v-for="imgUrl in images" :key="imgUrl" class="monitor-pic" :style="{ backgroundImage: `url(${imgUrl})` }" />
  </div>
</template>

<script>
import { default as pic1 } from './assets/monitor/1.png'
import { default as pic2 } from './assets/monitor/2.png'
// import { default as pic3 } from './assets/monitor/3.png'

export default {
  name: '',

  data() {
    return {
      images: [pic1, pic2]
    }
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped>
.left-content-monitoring {
  flex: 1;
  width: 100%;
  height: calc(100% - 32px);
  display: flex;
  gap: calc(100vw / 1920 * 16);
}

.monitor-pic {
  height: 100%;
  flex: 1;
  background-position: 100% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
</style>