'init'

src/views/3DOverview/components/LeftContentMonitor.vue

@@ -0,0 +1,41 @@
+<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, pic3]
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+.left-content-monitoring {
+  width: 100%;
+  /* height: calc(100% - 48px); */
+  display: flex;
+  gap: calc(100vw / 1920 * 16);
+}
+
+.monitor-pic {
+  flex: 1;
+  height: 128px;
+  background-position: 100% 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+</style>