diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",

diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
diff --git a/src/api/person.js b/src/api/person.js
index 9a40c3d..62f301f 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -132,3 +132,13 @@
     data
   })
 }
+
+// 人员下拉列表
+export function userList(data) {
+  return request({
+    // url: `propertyManage/person/list?keywords=${data}`,
+    url: `propertyManage/person/list`,
+    method: 'post',
+    data
+  })
+}

diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
diff --git a/src/api/person.js b/src/api/person.js
index 9a40c3d..62f301f 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -132,3 +132,13 @@
     data
   })
 }
+
+// 人员下拉列表
+export function userList(data) {
+  return request({
+    // url: `propertyManage/person/list?keywords=${data}`,
+    url: `propertyManage/person/list`,
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/date.png b/src/assets/global_images/date.png
new file mode 100644
index 0000000..6623230
--- /dev/null
+++ b/src/assets/global_images/date.png
Binary files differ

diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
diff --git a/src/api/person.js b/src/api/person.js
index 9a40c3d..62f301f 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -132,3 +132,13 @@
     data
   })
 }
+
+// 人员下拉列表
+export function userList(data) {
+  return request({
+    // url: `propertyManage/person/list?keywords=${data}`,
+    url: `propertyManage/person/list`,
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/date.png b/src/assets/global_images/date.png
new file mode 100644
index 0000000..6623230
--- /dev/null
+++ b/src/assets/global_images/date.png
Binary files differ
diff --git a/src/assets/global_images/monitor.png b/src/assets/global_images/monitor.png
new file mode 100644
index 0000000..b164841
--- /dev/null
+++ b/src/assets/global_images/monitor.png
Binary files differ

diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
diff --git a/src/api/person.js b/src/api/person.js
index 9a40c3d..62f301f 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -132,3 +132,13 @@
     data
   })
 }
+
+// 人员下拉列表
+export function userList(data) {
+  return request({
+    // url: `propertyManage/person/list?keywords=${data}`,
+    url: `propertyManage/person/list`,
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/date.png b/src/assets/global_images/date.png
new file mode 100644
index 0000000..6623230
--- /dev/null
+++ b/src/assets/global_images/date.png
Binary files differ
diff --git a/src/assets/global_images/monitor.png b/src/assets/global_images/monitor.png
new file mode 100644
index 0000000..b164841
--- /dev/null
+++ b/src/assets/global_images/monitor.png
Binary files differ
diff --git a/src/assets/global_images/right.png b/src/assets/global_images/right.png
new file mode 100644
index 0000000..7f164cd
--- /dev/null
+++ b/src/assets/global_images/right.png
Binary files differ

diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
diff --git a/src/api/person.js b/src/api/person.js
index 9a40c3d..62f301f 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -132,3 +132,13 @@
     data
   })
 }
+
+// 人员下拉列表
+export function userList(data) {
+  return request({
+    // url: `propertyManage/person/list?keywords=${data}`,
+    url: `propertyManage/person/list`,
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/date.png b/src/assets/global_images/date.png
new file mode 100644
index 0000000..6623230
--- /dev/null
+++ b/src/assets/global_images/date.png
Binary files differ
diff --git a/src/assets/global_images/monitor.png b/src/assets/global_images/monitor.png
new file mode 100644
index 0000000..b164841
--- /dev/null
+++ b/src/assets/global_images/monitor.png
Binary files differ
diff --git a/src/assets/global_images/right.png b/src/assets/global_images/right.png
new file mode 100644
index 0000000..7f164cd
--- /dev/null
+++ b/src/assets/global_images/right.png
Binary files differ
diff --git a/src/assets/global_images/search.png b/src/assets/global_images/search.png
new file mode 100644
index 0000000..005a20d
--- /dev/null
+++ b/src/assets/global_images/search.png
Binary files differ

diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
diff --git a/src/api/person.js b/src/api/person.js
index 9a40c3d..62f301f 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -132,3 +132,13 @@
     data
   })
 }
+
+// 人员下拉列表
+export function userList(data) {
+  return request({
+    // url: `propertyManage/person/list?keywords=${data}`,
+    url: `propertyManage/person/list`,
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/date.png b/src/assets/global_images/date.png
new file mode 100644
index 0000000..6623230
--- /dev/null
+++ b/src/assets/global_images/date.png
Binary files differ
diff --git a/src/assets/global_images/monitor.png b/src/assets/global_images/monitor.png
new file mode 100644
index 0000000..b164841
--- /dev/null
+++ b/src/assets/global_images/monitor.png
Binary files differ
diff --git a/src/assets/global_images/right.png b/src/assets/global_images/right.png
new file mode 100644
index 0000000..7f164cd
--- /dev/null
+++ b/src/assets/global_images/right.png
Binary files differ
diff --git a/src/assets/global_images/search.png b/src/assets/global_images/search.png
new file mode 100644
index 0000000..005a20d
--- /dev/null
+++ b/src/assets/global_images/search.png
Binary files differ
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index f36bdd5..1554578 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -25,6 +25,7 @@
     <el-input
       slot="reference"
       ref="input"
+      :size="inputSize"
       v-model="labelModel"
       :style="`width: ${width}px`"
       :class="{ 'rotate': showStatus }"
@@ -45,6 +46,11 @@
     event: 'selected'
   },
   props: {
+    // 输入框尺寸
+    inputSize: {
+      type: String,
+      default: ''
+    },
     // 接收绑定参数
     value: {
       type: String,
@@ -109,6 +115,7 @@
   },
   watch: {
     labelModel(val) {
+      console.log(val)
       if (!val) {
         if (val === '') {
           this.valueModel = ''

diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
diff --git a/src/api/person.js b/src/api/person.js
index 9a40c3d..62f301f 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -132,3 +132,13 @@
     data
   })
 }
+
+// 人员下拉列表
+export function userList(data) {
+  return request({
+    // url: `propertyManage/person/list?keywords=${data}`,
+    url: `propertyManage/person/list`,
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/date.png b/src/assets/global_images/date.png
new file mode 100644
index 0000000..6623230
--- /dev/null
+++ b/src/assets/global_images/date.png
Binary files differ
diff --git a/src/assets/global_images/monitor.png b/src/assets/global_images/monitor.png
new file mode 100644
index 0000000..b164841
--- /dev/null
+++ b/src/assets/global_images/monitor.png
Binary files differ
diff --git a/src/assets/global_images/right.png b/src/assets/global_images/right.png
new file mode 100644
index 0000000..7f164cd
--- /dev/null
+++ b/src/assets/global_images/right.png
Binary files differ
diff --git a/src/assets/global_images/search.png b/src/assets/global_images/search.png
new file mode 100644
index 0000000..005a20d
--- /dev/null
+++ b/src/assets/global_images/search.png
Binary files differ
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index f36bdd5..1554578 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -25,6 +25,7 @@
     <el-input
       slot="reference"
       ref="input"
+      :size="inputSize"
       v-model="labelModel"
       :style="`width: ${width}px`"
       :class="{ 'rotate': showStatus }"
@@ -45,6 +46,11 @@
     event: 'selected'
   },
   props: {
+    // 输入框尺寸
+    inputSize: {
+      type: String,
+      default: ''
+    },
     // 接收绑定参数
     value: {
       type: String,
@@ -109,6 +115,7 @@
   },
   watch: {
     labelModel(val) {
+      console.log(val)
       if (!val) {
         if (val === '') {
           this.valueModel = ''
diff --git a/src/router/index.js b/src/router/index.js
index d164acf..dbbc1a1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -44,6 +44,7 @@
   { path: '/right', component: () => import('@/views/popup/right'), hidden: true },
   { path: '/bottom', component: () => import('@/views/popup/bottom'), hidden: true },
   { path: '/floor', component: () => import('@/views/popup/floor'), hidden: true },
+  { path: '/board', component: () => import('@/views/common/board'), hidden: true },
 
   { path: '/device/pop', component: () => import('@/views/popup/device'), hidden: true },
 
@@ -53,6 +54,7 @@
 
   // 登录页面
   { path: '/login', component: () => import('@/views/login/index_2'), hidden: true },
+
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面

diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
diff --git a/src/api/person.js b/src/api/person.js
index 9a40c3d..62f301f 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -132,3 +132,13 @@
     data
   })
 }
+
+// 人员下拉列表
+export function userList(data) {
+  return request({
+    // url: `propertyManage/person/list?keywords=${data}`,
+    url: `propertyManage/person/list`,
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/date.png b/src/assets/global_images/date.png
new file mode 100644
index 0000000..6623230
--- /dev/null
+++ b/src/assets/global_images/date.png
Binary files differ
diff --git a/src/assets/global_images/monitor.png b/src/assets/global_images/monitor.png
new file mode 100644
index 0000000..b164841
--- /dev/null
+++ b/src/assets/global_images/monitor.png
Binary files differ
diff --git a/src/assets/global_images/right.png b/src/assets/global_images/right.png
new file mode 100644
index 0000000..7f164cd
--- /dev/null
+++ b/src/assets/global_images/right.png
Binary files differ
diff --git a/src/assets/global_images/search.png b/src/assets/global_images/search.png
new file mode 100644
index 0000000..005a20d
--- /dev/null
+++ b/src/assets/global_images/search.png
Binary files differ
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index f36bdd5..1554578 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -25,6 +25,7 @@
     <el-input
       slot="reference"
       ref="input"
+      :size="inputSize"
       v-model="labelModel"
       :style="`width: ${width}px`"
       :class="{ 'rotate': showStatus }"
@@ -45,6 +46,11 @@
     event: 'selected'
   },
   props: {
+    // 输入框尺寸
+    inputSize: {
+      type: String,
+      default: ''
+    },
     // 接收绑定参数
     value: {
       type: String,
@@ -109,6 +115,7 @@
   },
   watch: {
     labelModel(val) {
+      console.log(val)
       if (!val) {
         if (val === '') {
           this.valueModel = ''
diff --git a/src/router/index.js b/src/router/index.js
index d164acf..dbbc1a1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -44,6 +44,7 @@
   { path: '/right', component: () => import('@/views/popup/right'), hidden: true },
   { path: '/bottom', component: () => import('@/views/popup/bottom'), hidden: true },
   { path: '/floor', component: () => import('@/views/popup/floor'), hidden: true },
+  { path: '/board', component: () => import('@/views/common/board'), hidden: true },
 
   { path: '/device/pop', component: () => import('@/views/popup/device'), hidden: true },
 
@@ -53,6 +54,7 @@
 
   // 登录页面
   { path: '/login', component: () => import('@/views/login/index_2'), hidden: true },
+
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
diff --git a/src/views/common/board.vue b/src/views/common/board.vue
new file mode 100644
index 0000000..43416ea
--- /dev/null
+++ b/src/views/common/board.vue
@@ -0,0 +1,455 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      巡视人员轨迹处理
+    </div>
+    <el-form ref="form" :model="listQuery" label-width="80px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="人员信息" prop="personName">
+            <el-select v-model="listQuery.personName" filterable size="small" placeholder="请输入人员姓名/身份证">
+              <el-option
+                v-for="item in personNameList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="6">
+          <el-form-item label="监控点位" prop="point">
+            <select-tree v-model="listQuery.point" placeholder="请输入摄像头监控点位" input-size="small" :options="resourceTreeList" :props="defaultProps" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="最小相似度" label-width="120px" prop="minSimilarity">
+            <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间1-100" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" style="margin-top:4px;display:flex;justify-content: end;padding-right: 25px;">
+          <el-button type="primary" size="small" style="margin-right:20px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:20px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" @click="draw">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img src="../../assets/404_images/404.png" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              摄像头摄像头摄像头摄像头摄像头摄像头摄像头摄像头00{{ child }}
+            </div>
+            <div class="desc text-over">
+              这是详情描述这是详情描述这是详情描述这是详情描述这是详情描述
+            </div>
+            <div class="date">
+              2023-1-1 12:00:32
+            </div>
+            <div class="ratio">
+              50%
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import { getDate } from '@/utils/calendarUtil'
+import SelectTree from '@/components/SelectTree/singleSelect'
+
+export default {
+  name: 'TrailDialog',
+  components: { SelectTree },
+  data() {
+    return {
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        point: 'IP CAMERA', // 点位
+        minSimilarity: '' // 相似度
+      },
+      timeRange: [], // 时间范围
+      personNameList: [],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
+      rules: {
+        point: [
+          { required: true, message: '请填写监控点位', trigger: 'blur' }
+        ],
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: 'blur' }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    timeRange(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      } else {
+        this.listQuery.startTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  },
+  created() {
+    this.list = this.handleListOrder(this.list) // 测试列表数据
+    this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList() {
+      userList({ keywords: '' }).then(res => {
+        console.log(res)
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      hikPic(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.list = response.data
+        }
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.listQuery.personName = ''
+      this.listQuery.point = ''
+      this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
+      this.listQuery.endTime = getDate(0, 'SECOND')
+      this.listQuery.minSimilarity = ''
+      this.timeRange = [getDate(0, 'DATE') + ' 00:00:00', getDate(0, 'SECOND')]
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      // 取消校验
+      // if (this.listQuery.personName === '') {
+      //   this.$message.warning('请输入人员姓名!')
+      //   return
+      // }
+      // this.$refs.form.validate((valid) => {
+      //   if (valid) {
+      //     this.fetchData()
+      //   } else {
+      //     this.$message.warning('请检查输入信息!')
+      //   }
+      // })
+      this.fetchData()
+    },
+    // 驾驶舱点击上图
+    draw() {
+      console.log('上图')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  ::v-deep(.el-input__inner){
+    border:1px solid #40C3F1 !important;
+    background: transparent !important;
+  }
+  ::v-deep(.el-range-input){
+    background: transparent !important;
+  }
+  ::v-deep(.el-form-item__label){
+    color:#f1f1f1 !important;
+    font-weight: 400 !important;
+  }
+  ::v-deep(.el-range-separator){
+    color:#f1f1f1 !important;
+    font-weight: 400 !important;
+  }
+  ::-webkit-scrollbar {
+      z-index: 11;
+      width: 6px;
+    }
+    ::-webkit-scrollbar-track,
+    ::-webkit-scrollbar-corner {
+      border-radius: 5px;
+      background: #fff;
+    }
+    ::-webkit-scrollbar-thumb {
+      border-radius: 5px; // 滚动条
+      width: 6px;
+      background-color: #ccc;
+      :hover {
+        background-color: #ccc;
+      }
+    }
+    ::-webkit-scrollbar-track-piece {
+      border-radius: 5px; // 轨道
+      background: #fff;
+      width: 6px;
+    }
+  .text-over{
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .wrap{
+    width:100%;
+    height: 100%;
+    background: #5F8EB9;
+    position: relative;
+    overflow: hidden;
+    .header{
+      position: relative;
+      width: 98%;
+      margin-left:20px;
+      border-top: 10px solid #5F8EB9;
+      border-bottom: 10px solid #5F8EB9;
+      padding:5px 0 5px 20px;
+      color:#f1f1f1;
+      background: #30486C;
+      font-size: 16px;
+    }
+  }
+  .el-select{
+    width: 100%;
+  }
+  .header::after{
+      content:"";
+      display: inline-block;
+      position: absolute;
+      top:0;
+      left: -8px;
+      width:4px;
+      height:100%;
+      background: #40C3F1;
+    }
+    .list-wrap{
+      width:100%;
+      height: calc(100% - 175px); // 去除头部区域
+      overflow-y: auto;
+      .main{
+        width:99%;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        .row {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 40px;
+        }
+        .row:nth-child(2n) {
+          flex-direction: row-reverse;
+        }
+        .row:nth-child(2n):last-child .item {
+          margin-right: auto;
+        }
+        .list-item{
+          position: relative;
+          width: 48%;
+          height: 240px;
+          background-image: url("../../assets/global_images/monitor.png");
+          background-repeat: no-repeat;
+          // background-size: cover;
+          background-size: 100% 100%;
+          margin-left: 20px;
+          .img-wrap{
+            position: absolute;
+            left:35px;
+            top:40px;
+            width:236px;
+            height:138px;
+            overflow: hidden;
+          }
+          .title{
+            width:200px;
+            position: absolute;
+            left:42%;
+            top: 40px;
+            font-size: 20px;
+            color:#40C3F1;
+          }
+          .desc{
+            width:300px;
+            position: absolute;
+            left:42%;
+            top: 75px;
+            font-size: 16px;
+            color:#f1f1f1;
+          }
+          .date{
+            position: absolute;
+            left:50%;
+            transform: translateX(-50%);
+            bottom:70px;
+            font-size: 14px;
+            color:#c1c1c1;
+            margin-left:25px;
+          }
+          .date::after{
+            position: absolute;
+            top:0;
+            left:-20px;
+            content:"";
+            display: inline-block;
+            width: 15px;
+            height: 15px;
+            background-image: url("../../assets/global_images/date.png");
+            background-repeat: no-repeat;
+            background-size: cover;
+          }
+          .ratio{
+            width:100px;
+            position: absolute;
+            left:50%;
+            transform: translateX(-50%);
+            bottom:40px;
+            font-size: 14px;
+            color:#c1c1c1;
+            margin-left:18px;
+          }
+          .ratio::after{
+            position: absolute;
+            top:0;
+            left:-20px;
+            content:"";
+            display: inline-block;
+            width: 15px;
+            height: 15px;
+            background-image: url("../../assets/global_images/search.png");
+            background-repeat: no-repeat;
+            background-size: cover;
+          }
+        }
+      }
+    }
+    .main .row:nth-child(odd){
+      .list-item:nth-child(odd)::after{
+        content:"";
+        display: inline-block;
+        width:30px;
+        height: 30px;
+        position: absolute;
+        top:50%;
+        transform: translate(-50%);
+        right:-52px;
+        background-image: url("../../assets/global_images/right.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+      }
+    }
+    .main .row:nth-child(odd){
+      .list-item:nth-child(even)::after{
+        content:"";
+        display: inline-block;
+        width:30px;
+        height: 30px;
+        position: absolute;
+        right:50%;
+        transform: translate(-50%);
+        bottom:-35px;
+        background-image: url("../../assets/global_images/right.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+        transform: rotate(90deg);
+      }
+    }
+    .main .row:nth-child(even){
+      .list-item:nth-child(odd)::after{
+        content:"";
+        display: inline-block;
+        width:30px;
+        height: 30px;
+        position: absolute;
+        top:50%;
+        transform: translate(-50%);
+        left:-35px;
+        background-image: url("../../assets/global_images/right.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+        transform: rotate(180deg);
+      }
+    }
+    .main .row:nth-child(even){
+      .list-item:nth-child(even)::after{
+        content:"";
+        display: inline-block;
+        width:30px;
+        height: 30px;
+        position: absolute;
+        left:50%;
+        transform: translate(-50%);
+        bottom:-35px;
+        background-image: url("../../assets/global_images/right.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+        transform: rotate(-270deg);
+      }
+    }
+    // 如果是最后一个元素不显示箭头
+    .main .row:last-child{
+      .list-item:last-child::after{
+        display: none;
+      }
+    }
+</style>

diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
diff --git a/src/api/person.js b/src/api/person.js
index 9a40c3d..62f301f 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -132,3 +132,13 @@
     data
   })
 }
+
+// 人员下拉列表
+export function userList(data) {
+  return request({
+    // url: `propertyManage/person/list?keywords=${data}`,
+    url: `propertyManage/person/list`,
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/global_images/date.png b/src/assets/global_images/date.png
new file mode 100644
index 0000000..6623230
--- /dev/null
+++ b/src/assets/global_images/date.png
Binary files differ
diff --git a/src/assets/global_images/monitor.png b/src/assets/global_images/monitor.png
new file mode 100644
index 0000000..b164841
--- /dev/null
+++ b/src/assets/global_images/monitor.png
Binary files differ
diff --git a/src/assets/global_images/right.png b/src/assets/global_images/right.png
new file mode 100644
index 0000000..7f164cd
--- /dev/null
+++ b/src/assets/global_images/right.png
Binary files differ
diff --git a/src/assets/global_images/search.png b/src/assets/global_images/search.png
new file mode 100644
index 0000000..005a20d
--- /dev/null
+++ b/src/assets/global_images/search.png
Binary files differ
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index f36bdd5..1554578 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -25,6 +25,7 @@
     <el-input
       slot="reference"
       ref="input"
+      :size="inputSize"
       v-model="labelModel"
       :style="`width: ${width}px`"
       :class="{ 'rotate': showStatus }"
@@ -45,6 +46,11 @@
     event: 'selected'
   },
   props: {
+    // 输入框尺寸
+    inputSize: {
+      type: String,
+      default: ''
+    },
     // 接收绑定参数
     value: {
       type: String,
@@ -109,6 +115,7 @@
   },
   watch: {
     labelModel(val) {
+      console.log(val)
       if (!val) {
         if (val === '') {
           this.valueModel = ''
diff --git a/src/router/index.js b/src/router/index.js
index d164acf..dbbc1a1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -44,6 +44,7 @@
   { path: '/right', component: () => import('@/views/popup/right'), hidden: true },
   { path: '/bottom', component: () => import('@/views/popup/bottom'), hidden: true },
   { path: '/floor', component: () => import('@/views/popup/floor'), hidden: true },
+  { path: '/board', component: () => import('@/views/common/board'), hidden: true },
 
   { path: '/device/pop', component: () => import('@/views/popup/device'), hidden: true },
 
@@ -53,6 +54,7 @@
 
   // 登录页面
   { path: '/login', component: () => import('@/views/login/index_2'), hidden: true },
+
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
diff --git a/src/views/common/board.vue b/src/views/common/board.vue
new file mode 100644
index 0000000..43416ea
--- /dev/null
+++ b/src/views/common/board.vue
@@ -0,0 +1,455 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      巡视人员轨迹处理
+    </div>
+    <el-form ref="form" :model="listQuery" label-width="80px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="人员信息" prop="personName">
+            <el-select v-model="listQuery.personName" filterable size="small" placeholder="请输入人员姓名/身份证">
+              <el-option
+                v-for="item in personNameList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="6">
+          <el-form-item label="监控点位" prop="point">
+            <select-tree v-model="listQuery.point" placeholder="请输入摄像头监控点位" input-size="small" :options="resourceTreeList" :props="defaultProps" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="最小相似度" label-width="120px" prop="minSimilarity">
+            <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间1-100" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" style="margin-top:4px;display:flex;justify-content: end;padding-right: 25px;">
+          <el-button type="primary" size="small" style="margin-right:20px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:20px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" @click="draw">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img src="../../assets/404_images/404.png" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              摄像头摄像头摄像头摄像头摄像头摄像头摄像头摄像头00{{ child }}
+            </div>
+            <div class="desc text-over">
+              这是详情描述这是详情描述这是详情描述这是详情描述这是详情描述
+            </div>
+            <div class="date">
+              2023-1-1 12:00:32
+            </div>
+            <div class="ratio">
+              50%
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import { getDate } from '@/utils/calendarUtil'
+import SelectTree from '@/components/SelectTree/singleSelect'
+
+export default {
+  name: 'TrailDialog',
+  components: { SelectTree },
+  data() {
+    return {
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        point: 'IP CAMERA', // 点位
+        minSimilarity: '' // 相似度
+      },
+      timeRange: [], // 时间范围
+      personNameList: [],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
+      rules: {
+        point: [
+          { required: true, message: '请填写监控点位', trigger: 'blur' }
+        ],
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: 'blur' }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    timeRange(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      } else {
+        this.listQuery.startTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  },
+  created() {
+    this.list = this.handleListOrder(this.list) // 测试列表数据
+    this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList() {
+      userList({ keywords: '' }).then(res => {
+        console.log(res)
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      hikPic(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.list = response.data
+        }
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.listQuery.personName = ''
+      this.listQuery.point = ''
+      this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
+      this.listQuery.endTime = getDate(0, 'SECOND')
+      this.listQuery.minSimilarity = ''
+      this.timeRange = [getDate(0, 'DATE') + ' 00:00:00', getDate(0, 'SECOND')]
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      // 取消校验
+      // if (this.listQuery.personName === '') {
+      //   this.$message.warning('请输入人员姓名!')
+      //   return
+      // }
+      // this.$refs.form.validate((valid) => {
+      //   if (valid) {
+      //     this.fetchData()
+      //   } else {
+      //     this.$message.warning('请检查输入信息!')
+      //   }
+      // })
+      this.fetchData()
+    },
+    // 驾驶舱点击上图
+    draw() {
+      console.log('上图')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  ::v-deep(.el-input__inner){
+    border:1px solid #40C3F1 !important;
+    background: transparent !important;
+  }
+  ::v-deep(.el-range-input){
+    background: transparent !important;
+  }
+  ::v-deep(.el-form-item__label){
+    color:#f1f1f1 !important;
+    font-weight: 400 !important;
+  }
+  ::v-deep(.el-range-separator){
+    color:#f1f1f1 !important;
+    font-weight: 400 !important;
+  }
+  ::-webkit-scrollbar {
+      z-index: 11;
+      width: 6px;
+    }
+    ::-webkit-scrollbar-track,
+    ::-webkit-scrollbar-corner {
+      border-radius: 5px;
+      background: #fff;
+    }
+    ::-webkit-scrollbar-thumb {
+      border-radius: 5px; // 滚动条
+      width: 6px;
+      background-color: #ccc;
+      :hover {
+        background-color: #ccc;
+      }
+    }
+    ::-webkit-scrollbar-track-piece {
+      border-radius: 5px; // 轨道
+      background: #fff;
+      width: 6px;
+    }
+  .text-over{
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .wrap{
+    width:100%;
+    height: 100%;
+    background: #5F8EB9;
+    position: relative;
+    overflow: hidden;
+    .header{
+      position: relative;
+      width: 98%;
+      margin-left:20px;
+      border-top: 10px solid #5F8EB9;
+      border-bottom: 10px solid #5F8EB9;
+      padding:5px 0 5px 20px;
+      color:#f1f1f1;
+      background: #30486C;
+      font-size: 16px;
+    }
+  }
+  .el-select{
+    width: 100%;
+  }
+  .header::after{
+      content:"";
+      display: inline-block;
+      position: absolute;
+      top:0;
+      left: -8px;
+      width:4px;
+      height:100%;
+      background: #40C3F1;
+    }
+    .list-wrap{
+      width:100%;
+      height: calc(100% - 175px); // 去除头部区域
+      overflow-y: auto;
+      .main{
+        width:99%;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        .row {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 40px;
+        }
+        .row:nth-child(2n) {
+          flex-direction: row-reverse;
+        }
+        .row:nth-child(2n):last-child .item {
+          margin-right: auto;
+        }
+        .list-item{
+          position: relative;
+          width: 48%;
+          height: 240px;
+          background-image: url("../../assets/global_images/monitor.png");
+          background-repeat: no-repeat;
+          // background-size: cover;
+          background-size: 100% 100%;
+          margin-left: 20px;
+          .img-wrap{
+            position: absolute;
+            left:35px;
+            top:40px;
+            width:236px;
+            height:138px;
+            overflow: hidden;
+          }
+          .title{
+            width:200px;
+            position: absolute;
+            left:42%;
+            top: 40px;
+            font-size: 20px;
+            color:#40C3F1;
+          }
+          .desc{
+            width:300px;
+            position: absolute;
+            left:42%;
+            top: 75px;
+            font-size: 16px;
+            color:#f1f1f1;
+          }
+          .date{
+            position: absolute;
+            left:50%;
+            transform: translateX(-50%);
+            bottom:70px;
+            font-size: 14px;
+            color:#c1c1c1;
+            margin-left:25px;
+          }
+          .date::after{
+            position: absolute;
+            top:0;
+            left:-20px;
+            content:"";
+            display: inline-block;
+            width: 15px;
+            height: 15px;
+            background-image: url("../../assets/global_images/date.png");
+            background-repeat: no-repeat;
+            background-size: cover;
+          }
+          .ratio{
+            width:100px;
+            position: absolute;
+            left:50%;
+            transform: translateX(-50%);
+            bottom:40px;
+            font-size: 14px;
+            color:#c1c1c1;
+            margin-left:18px;
+          }
+          .ratio::after{
+            position: absolute;
+            top:0;
+            left:-20px;
+            content:"";
+            display: inline-block;
+            width: 15px;
+            height: 15px;
+            background-image: url("../../assets/global_images/search.png");
+            background-repeat: no-repeat;
+            background-size: cover;
+          }
+        }
+      }
+    }
+    .main .row:nth-child(odd){
+      .list-item:nth-child(odd)::after{
+        content:"";
+        display: inline-block;
+        width:30px;
+        height: 30px;
+        position: absolute;
+        top:50%;
+        transform: translate(-50%);
+        right:-52px;
+        background-image: url("../../assets/global_images/right.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+      }
+    }
+    .main .row:nth-child(odd){
+      .list-item:nth-child(even)::after{
+        content:"";
+        display: inline-block;
+        width:30px;
+        height: 30px;
+        position: absolute;
+        right:50%;
+        transform: translate(-50%);
+        bottom:-35px;
+        background-image: url("../../assets/global_images/right.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+        transform: rotate(90deg);
+      }
+    }
+    .main .row:nth-child(even){
+      .list-item:nth-child(odd)::after{
+        content:"";
+        display: inline-block;
+        width:30px;
+        height: 30px;
+        position: absolute;
+        top:50%;
+        transform: translate(-50%);
+        left:-35px;
+        background-image: url("../../assets/global_images/right.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+        transform: rotate(180deg);
+      }
+    }
+    .main .row:nth-child(even){
+      .list-item:nth-child(even)::after{
+        content:"";
+        display: inline-block;
+        width:30px;
+        height: 30px;
+        position: absolute;
+        left:50%;
+        transform: translate(-50%);
+        bottom:-35px;
+        background-image: url("../../assets/global_images/right.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+        transform: rotate(-270deg);
+      }
+    }
+    // 如果是最后一个元素不显示箭头
+    .main .row:last-child{
+      .list-item:last-child::after{
+        display: none;
+      }
+    }
+</style>
diff --git a/src/views/common/listItem.vue b/src/views/common/listItem.vue
new file mode 100644
index 0000000..150ad6a
--- /dev/null
+++ b/src/views/common/listItem.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="main">
+    <div v-for="item in list" :key="item" class="row">
+      <div v-for="child in item" :key="child" class="list-item">
+        <div class="img-wrap">
+          <img
+            src="../../assets/404_images/404.png"
+            style="width: 100%; height: 100%"
+          >
+        </div>
+        <div class="title text-over">
+          摄像头摄像头摄像头摄像头摄像头摄像头摄像头摄像头00{{ child }}
+        </div>
+        <div class="desc text-over">
+          这是详情描述这是详情描述这是详情描述这是详情描述这是详情描述
+        </div>
+        <div class="date">
+          2023-1-1 12:00:32
+        </div>
+        <div class="ratio">
+          50%
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ListItem",
+  // props: {},
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .main{
+      width:99%;
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      .row {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 40px;
+      }
+      .row:nth-child(2n) {
+        flex-direction: row-reverse;
+      }
+      .row:nth-child(2n):last-child .item {
+        margin-right: auto;
+      }
+      .list-item{
+        position: relative;
+        width: 48%;
+        height: 240px;
+        background-image: url("../../assets/global_images/monitor.png");
+        background-repeat: no-repeat;
+        // background-size: cover;
+        background-size: 100% 100%;
+        margin-left: 20px;
+        .img-wrap{
+          position: absolute;
+          left:35px;
+          top:40px;
+          width:236px;
+          height:138px;
+          overflow: hidden;
+        }
+        .title{
+          width:200px;
+          position: absolute;
+          left:42%;
+          top: 40px;
+          font-size: 20px;
+          color:#40C3F1;
+        }
+        .desc{
+          width:300px;
+          position: absolute;
+          left:42%;
+          top: 75px;
+          font-size: 16px;
+          color:#f1f1f1;
+        }
+        .date{
+          position: absolute;
+          left:50%;
+          transform: translateX(-50%);
+          bottom:70px;
+          font-size: 14px;
+          color:#c1c1c1;
+          margin-left:25px;
+        }
+        .date::after{
+          position: absolute;
+          top:0;
+          left:-20px;
+          content:"";
+          display: inline-block;
+          width: 15px;
+          height: 15px;
+          background-image: url("../../assets/global_images/date.png");
+          background-repeat: no-repeat;
+          background-size: cover;
+        }
+        .ratio{
+          width:100px;
+          position: absolute;
+          left:50%;
+          transform: translateX(-50%);
+          bottom:40px;
+          font-size: 14px;
+          color:#c1c1c1;
+          margin-left:18px;
+        }
+        .ratio::after{
+          position: absolute;
+          top:0;
+          left:-20px;
+          content:"";
+          display: inline-block;
+          width: 15px;
+          height: 15px;
+          background-image: url("../../assets/global_images/search.png");
+          background-repeat: no-repeat;
+          background-size: cover;
+        }
+      }
+    }
+    .main .row:nth-child(odd){
+      .list-item:nth-child(odd)::after{
+        content:"";
+        display: inline-block;
+        width:30px;
+        height: 30px;
+        position: absolute;
+        top:50%;
+        transform: translate(-50%);
+        right:-52px;
+        background-image: url("../../assets/global_images/right.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+      }
+    }
+    .main .row:nth-child(odd){
+      .list-item:nth-child(even)::after{
+        content:"";
+        display: inline-block;
+        width:30px;
+        height: 30px;
+        position: absolute;
+        right:50%;
+        transform: translate(-50%);
+        bottom:-35px;
+        background-image: url("../../assets/global_images/right.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+        transform: rotate(90deg);
+      }
+    }
+    .main .row:nth-child(even){
+      .list-item:nth-child(odd)::after{
+        content:"";
+        display: inline-block;
+        width:30px;
+        height: 30px;
+        position: absolute;
+        top:50%;
+        transform: translate(-50%);
+        left:-35px;
+        background-image: url("../../assets/global_images/right.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+        transform: rotate(180deg);
+      }
+    }
+    .main .row:nth-child(even){
+      .list-item:nth-child(even)::after{
+        content:"";
+        display: inline-block;
+        width:30px;
+        height: 30px;
+        position: absolute;
+        left:50%;
+        transform: translate(-50%);
+        bottom:-35px;
+        background-image: url("../../assets/global_images/right.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+        transform: rotate(-270deg);
+      }
+    }
+    // 如果是最后一个元素不显示箭头
+    .main .row:last-child{
+      .list-item:last-child::after{
+        display: none;
+      }
+    }
+</style>