diff --git a/src/views/target/components/video.mp4 b/src/views/target/components/video.mp4
new file mode 100644
index 0000000..aaea4e3
--- /dev/null
+++ b/src/views/target/components/video.mp4
Binary files differ

diff --git a/src/views/target/components/video.mp4 b/src/views/target/components/video.mp4
new file mode 100644
index 0000000..aaea4e3
--- /dev/null
+++ b/src/views/target/components/video.mp4
Binary files differ
diff --git a/src/views/target/components/video.vue b/src/views/target/components/video.vue
new file mode 100644
index 0000000..a449a29
--- /dev/null
+++ b/src/views/target/components/video.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup name="VideoContainer">
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+})
+// 页面高度
+const mainHeight = ref(document.body.clientHeight - 50)
+// 高度随页面resize变化
+window.addEventListener('resize', () => {
+  const bodyHeight = document.body.clientHeight - 50
+  mainHeight.value = bodyHeight
+  console.log(mainHeight.value, 'bodyHeight')
+})
+</script>
+
+<template>
+  <div class="container" :style="{ height: `${mainHeight / 2}px` }">
+    <video :id="id" src="./video.mp4" autoplay class="video" :height="`${mainHeight / 2}`"></video>
+    <div class="list" :style="{ height: `${mainHeight / 2}px` }">
+      <div class="alarm">
+        <div class="info">
+          <img src="../img/person.png" width="36" height="36" />
+          <span class="count">0</span>
+        </div>
+        <div class="info">
+          <img src="../img/alarm.png" width="36" height="36" />
+          <span class="count"> 2</span>
+        </div>
+      </div>
+      <el-scrollbar :max-height="`${mainHeight / 2 - 36}`" style="width: 100%;">
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="1" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img2.baidu.com/it/u=2691184556,3408947513&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img2.baidu.com/it/u=2433680170,1835310732&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img0.baidu.com/it/u=3557509433,3888044753&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img1.baidu.com/it/u=21314006,2917950596&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+.container {
+  border: 1px solid #000;
+  width: 50%;
+  display: flex;
+  justify-content: space-between;
+
+  .video {
+    width: 75%;
+    object-fit: cover;
+  }
+
+  .list {
+    // background-color: antiquewhite;
+    width: 25%;
+
+    .alarm {
+      display: flex;
+      justify-content: space-around;
+
+      .info {
+        width: 40%;
+        display: flex;
+        align-items: center;
+
+        .count {
+          font-size: 18px;
+          font-weight: 700;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  .alarmimg {
+    width: 100%;
+    height: 80px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

diff --git a/src/views/target/components/video.mp4 b/src/views/target/components/video.mp4
new file mode 100644
index 0000000..aaea4e3
--- /dev/null
+++ b/src/views/target/components/video.mp4
Binary files differ
diff --git a/src/views/target/components/video.vue b/src/views/target/components/video.vue
new file mode 100644
index 0000000..a449a29
--- /dev/null
+++ b/src/views/target/components/video.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup name="VideoContainer">
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+})
+// 页面高度
+const mainHeight = ref(document.body.clientHeight - 50)
+// 高度随页面resize变化
+window.addEventListener('resize', () => {
+  const bodyHeight = document.body.clientHeight - 50
+  mainHeight.value = bodyHeight
+  console.log(mainHeight.value, 'bodyHeight')
+})
+</script>
+
+<template>
+  <div class="container" :style="{ height: `${mainHeight / 2}px` }">
+    <video :id="id" src="./video.mp4" autoplay class="video" :height="`${mainHeight / 2}`"></video>
+    <div class="list" :style="{ height: `${mainHeight / 2}px` }">
+      <div class="alarm">
+        <div class="info">
+          <img src="../img/person.png" width="36" height="36" />
+          <span class="count">0</span>
+        </div>
+        <div class="info">
+          <img src="../img/alarm.png" width="36" height="36" />
+          <span class="count"> 2</span>
+        </div>
+      </div>
+      <el-scrollbar :max-height="`${mainHeight / 2 - 36}`" style="width: 100%;">
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="1" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img2.baidu.com/it/u=2691184556,3408947513&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img2.baidu.com/it/u=2433680170,1835310732&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img0.baidu.com/it/u=3557509433,3888044753&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img1.baidu.com/it/u=21314006,2917950596&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+.container {
+  border: 1px solid #000;
+  width: 50%;
+  display: flex;
+  justify-content: space-between;
+
+  .video {
+    width: 75%;
+    object-fit: cover;
+  }
+
+  .list {
+    // background-color: antiquewhite;
+    width: 25%;
+
+    .alarm {
+      display: flex;
+      justify-content: space-around;
+
+      .info {
+        width: 40%;
+        display: flex;
+        align-items: center;
+
+        .count {
+          font-size: 18px;
+          font-weight: 700;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  .alarmimg {
+    width: 100%;
+    height: 80px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/target/img/1.jpg b/src/views/target/img/1.jpg
new file mode 100644
index 0000000..ee83610
--- /dev/null
+++ b/src/views/target/img/1.jpg
Binary files differ

diff --git a/src/views/target/components/video.mp4 b/src/views/target/components/video.mp4
new file mode 100644
index 0000000..aaea4e3
--- /dev/null
+++ b/src/views/target/components/video.mp4
Binary files differ
diff --git a/src/views/target/components/video.vue b/src/views/target/components/video.vue
new file mode 100644
index 0000000..a449a29
--- /dev/null
+++ b/src/views/target/components/video.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup name="VideoContainer">
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+})
+// 页面高度
+const mainHeight = ref(document.body.clientHeight - 50)
+// 高度随页面resize变化
+window.addEventListener('resize', () => {
+  const bodyHeight = document.body.clientHeight - 50
+  mainHeight.value = bodyHeight
+  console.log(mainHeight.value, 'bodyHeight')
+})
+</script>
+
+<template>
+  <div class="container" :style="{ height: `${mainHeight / 2}px` }">
+    <video :id="id" src="./video.mp4" autoplay class="video" :height="`${mainHeight / 2}`"></video>
+    <div class="list" :style="{ height: `${mainHeight / 2}px` }">
+      <div class="alarm">
+        <div class="info">
+          <img src="../img/person.png" width="36" height="36" />
+          <span class="count">0</span>
+        </div>
+        <div class="info">
+          <img src="../img/alarm.png" width="36" height="36" />
+          <span class="count"> 2</span>
+        </div>
+      </div>
+      <el-scrollbar :max-height="`${mainHeight / 2 - 36}`" style="width: 100%;">
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="1" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img2.baidu.com/it/u=2691184556,3408947513&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img2.baidu.com/it/u=2433680170,1835310732&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img0.baidu.com/it/u=3557509433,3888044753&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img1.baidu.com/it/u=21314006,2917950596&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+.container {
+  border: 1px solid #000;
+  width: 50%;
+  display: flex;
+  justify-content: space-between;
+
+  .video {
+    width: 75%;
+    object-fit: cover;
+  }
+
+  .list {
+    // background-color: antiquewhite;
+    width: 25%;
+
+    .alarm {
+      display: flex;
+      justify-content: space-around;
+
+      .info {
+        width: 40%;
+        display: flex;
+        align-items: center;
+
+        .count {
+          font-size: 18px;
+          font-weight: 700;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  .alarmimg {
+    width: 100%;
+    height: 80px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/target/img/1.jpg b/src/views/target/img/1.jpg
new file mode 100644
index 0000000..ee83610
--- /dev/null
+++ b/src/views/target/img/1.jpg
Binary files differ
diff --git a/src/views/target/img/alarm.png b/src/views/target/img/alarm.png
new file mode 100644
index 0000000..31cf8f7
--- /dev/null
+++ b/src/views/target/img/alarm.png
Binary files differ

diff --git a/src/views/target/components/video.mp4 b/src/views/target/components/video.mp4
new file mode 100644
index 0000000..aaea4e3
--- /dev/null
+++ b/src/views/target/components/video.mp4
Binary files differ
diff --git a/src/views/target/components/video.vue b/src/views/target/components/video.vue
new file mode 100644
index 0000000..a449a29
--- /dev/null
+++ b/src/views/target/components/video.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup name="VideoContainer">
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+})
+// 页面高度
+const mainHeight = ref(document.body.clientHeight - 50)
+// 高度随页面resize变化
+window.addEventListener('resize', () => {
+  const bodyHeight = document.body.clientHeight - 50
+  mainHeight.value = bodyHeight
+  console.log(mainHeight.value, 'bodyHeight')
+})
+</script>
+
+<template>
+  <div class="container" :style="{ height: `${mainHeight / 2}px` }">
+    <video :id="id" src="./video.mp4" autoplay class="video" :height="`${mainHeight / 2}`"></video>
+    <div class="list" :style="{ height: `${mainHeight / 2}px` }">
+      <div class="alarm">
+        <div class="info">
+          <img src="../img/person.png" width="36" height="36" />
+          <span class="count">0</span>
+        </div>
+        <div class="info">
+          <img src="../img/alarm.png" width="36" height="36" />
+          <span class="count"> 2</span>
+        </div>
+      </div>
+      <el-scrollbar :max-height="`${mainHeight / 2 - 36}`" style="width: 100%;">
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="1" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img2.baidu.com/it/u=2691184556,3408947513&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img2.baidu.com/it/u=2433680170,1835310732&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img0.baidu.com/it/u=3557509433,3888044753&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img1.baidu.com/it/u=21314006,2917950596&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+.container {
+  border: 1px solid #000;
+  width: 50%;
+  display: flex;
+  justify-content: space-between;
+
+  .video {
+    width: 75%;
+    object-fit: cover;
+  }
+
+  .list {
+    // background-color: antiquewhite;
+    width: 25%;
+
+    .alarm {
+      display: flex;
+      justify-content: space-around;
+
+      .info {
+        width: 40%;
+        display: flex;
+        align-items: center;
+
+        .count {
+          font-size: 18px;
+          font-weight: 700;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  .alarmimg {
+    width: 100%;
+    height: 80px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/target/img/1.jpg b/src/views/target/img/1.jpg
new file mode 100644
index 0000000..ee83610
--- /dev/null
+++ b/src/views/target/img/1.jpg
Binary files differ
diff --git a/src/views/target/img/alarm.png b/src/views/target/img/alarm.png
new file mode 100644
index 0000000..31cf8f7
--- /dev/null
+++ b/src/views/target/img/alarm.png
Binary files differ
diff --git a/src/views/target/img/person.png b/src/views/target/img/person.png
new file mode 100644
index 0000000..fac184d
--- /dev/null
+++ b/src/views/target/img/person.png
Binary files differ

diff --git a/src/views/target/components/video.mp4 b/src/views/target/components/video.mp4
new file mode 100644
index 0000000..aaea4e3
--- /dev/null
+++ b/src/views/target/components/video.mp4
Binary files differ
diff --git a/src/views/target/components/video.vue b/src/views/target/components/video.vue
new file mode 100644
index 0000000..a449a29
--- /dev/null
+++ b/src/views/target/components/video.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup name="VideoContainer">
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+})
+// 页面高度
+const mainHeight = ref(document.body.clientHeight - 50)
+// 高度随页面resize变化
+window.addEventListener('resize', () => {
+  const bodyHeight = document.body.clientHeight - 50
+  mainHeight.value = bodyHeight
+  console.log(mainHeight.value, 'bodyHeight')
+})
+</script>
+
+<template>
+  <div class="container" :style="{ height: `${mainHeight / 2}px` }">
+    <video :id="id" src="./video.mp4" autoplay class="video" :height="`${mainHeight / 2}`"></video>
+    <div class="list" :style="{ height: `${mainHeight / 2}px` }">
+      <div class="alarm">
+        <div class="info">
+          <img src="../img/person.png" width="36" height="36" />
+          <span class="count">0</span>
+        </div>
+        <div class="info">
+          <img src="../img/alarm.png" width="36" height="36" />
+          <span class="count"> 2</span>
+        </div>
+      </div>
+      <el-scrollbar :max-height="`${mainHeight / 2 - 36}`" style="width: 100%;">
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="1" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img2.baidu.com/it/u=2691184556,3408947513&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img2.baidu.com/it/u=2433680170,1835310732&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img0.baidu.com/it/u=3557509433,3888044753&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+        <div class="alarmimg">
+          <el-image style="width: 100%; height: 100%" src="https://img1.baidu.com/it/u=21314006,2917950596&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800" :preview-src-list="['1']"
+            :initial-index="4" fit="cover" />
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+.container {
+  border: 1px solid #000;
+  width: 50%;
+  display: flex;
+  justify-content: space-between;
+
+  .video {
+    width: 75%;
+    object-fit: cover;
+  }
+
+  .list {
+    // background-color: antiquewhite;
+    width: 25%;
+
+    .alarm {
+      display: flex;
+      justify-content: space-around;
+
+      .info {
+        width: 40%;
+        display: flex;
+        align-items: center;
+
+        .count {
+          font-size: 18px;
+          font-weight: 700;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  .alarmimg {
+    width: 100%;
+    height: 80px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/target/img/1.jpg b/src/views/target/img/1.jpg
new file mode 100644
index 0000000..ee83610
--- /dev/null
+++ b/src/views/target/img/1.jpg
Binary files differ
diff --git a/src/views/target/img/alarm.png b/src/views/target/img/alarm.png
new file mode 100644
index 0000000..31cf8f7
--- /dev/null
+++ b/src/views/target/img/alarm.png
Binary files differ
diff --git a/src/views/target/img/person.png b/src/views/target/img/person.png
new file mode 100644
index 0000000..fac184d
--- /dev/null
+++ b/src/views/target/img/person.png
Binary files differ
diff --git a/src/views/target/index.vue b/src/views/target/index.vue
index 8c55750..99ace9c 100644
--- a/src/views/target/index.vue
+++ b/src/views/target/index.vue
@@ -1,3 +1,19 @@
+<script lang="ts" setup name="TargetMonitor">
+import videoPlay from './components/video.vue'
+</script>
+
 <template>
-  目标监测
+  <div class="container">
+    <video-play v-for="item in 1" :key="item" id="video" />
+  </div>
 </template>
+
+<style lang="scss" scoped>
+// 样式
+.container{
+  display: flex;
+  flex-wrap: wrap;
+  overflow-y: hidden;
+  margin-top: -1px;
+}
+</style>