diff --git a/src/assets/images/home/head.png b/src/assets/images/home/head.png
new file mode 100644
index 0000000..fd161cd
Binary files /dev/null and b/src/assets/images/home/head.png differ
diff --git a/src/assets/images/topic/allback.png b/src/assets/images/topic/allback.png
new file mode 100644
index 0000000..dfe48ad
Binary files /dev/null and b/src/assets/images/topic/allback.png differ
diff --git a/src/assets/images/topic/bCol.png b/src/assets/images/topic/bCol.png
new file mode 100644
index 0000000..65692a1
Binary files /dev/null and b/src/assets/images/topic/bCol.png differ
diff --git a/src/assets/images/topic/midCol.png b/src/assets/images/topic/midCol.png
new file mode 100644
index 0000000..1a57f54
Binary files /dev/null and b/src/assets/images/topic/midCol.png differ
diff --git a/src/assets/images/topic/sideCol.png b/src/assets/images/topic/sideCol.png
new file mode 100644
index 0000000..489e1bf
Binary files /dev/null and b/src/assets/images/topic/sideCol.png differ
diff --git a/src/assets/images/topic/sideLmCol.png b/src/assets/images/topic/sideLmCol.png
new file mode 100644
index 0000000..03a3933
Binary files /dev/null and b/src/assets/images/topic/sideLmCol.png differ
diff --git a/src/assets/images/topic/sideLtCol.png b/src/assets/images/topic/sideLtCol.png
new file mode 100644
index 0000000..8066611
Binary files /dev/null and b/src/assets/images/topic/sideLtCol.png differ
diff --git a/src/loveflow/assets/index.less b/src/loveflow/assets/index.less
index 15b9b88..f2a5583 100644
--- a/src/loveflow/assets/index.less
+++ b/src/loveflow/assets/index.less
@@ -31,6 +31,9 @@
 .mr18 {
   margin-right: 18px;
 }
+.mb10 {
+  margin-bottom: 10px;
+}
 .mb18 {
   margin-bottom: 18px;
 }
diff --git a/src/views/enterpriseTopic/personSafety/keyPerson.vue b/src/views/enterpriseTopic/personSafety/keyPerson.vue
index 6c57829..4fe4d1c 100644
--- a/src/views/enterpriseTopic/personSafety/keyPerson.vue
+++ b/src/views/enterpriseTopic/personSafety/keyPerson.vue
@@ -1,3 +1,201 @@
 <template>
-    <div></div>
-</template>
\ No newline at end of file
+  <div style="height: 100%">
+    <div class="flexSpaceBetween">
+      <div class="tableOperator">
+        <div
+          class="flex-center filterBtnWrap"
+          v-for="item in filterList"
+          :key="item.name"
+          @click="filterClick(item.value)"
+        >
+          <div
+            :class="{ filterActive: filterValue == item.value }"
+            class="filterBtn"
+          >
+            {{ item.name }} ({{ item.total }})
+          </div>
+          <el-divider
+            :class="{ filterActive: filterValue == '2' }"
+            direction="vertical"
+          ></el-divider>
+        </div>
+      </div>
+      <div class="searchWrap">
+        <el-form :inline="true" :model="queryParam" class="demo-form-inline">
+          <el-form-item label="关键字">
+            <el-input
+              v-model="queryParam.key"
+              placeholder="请输入姓名、身份证"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="searchQuery">查询</el-button>
+            <el-button type="primary" plain @click="searchReset"
+              >重置</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="tableWrap">
+      <gMainTable
+        border
+        stripe
+        ref="gMainTable"
+        :tableData="dataSource"
+        :columns="columns"
+        rowKey="id"
+        :pagination="ipagination"
+        @pageSizeChange="handlePageSizeChange"
+        @currentPageChange="handleCurrentPageChange"
+      >
+        <template v-slot:scSlot="{ scope }">
+          <span class="noColor"> {{ scope.row.sc }}</span>
+        </template>
+        <template v-slot:gwSlot="{ scope }">
+          <div class="personType gaowei">{{ scope.row.personType }}</div>
+        </template>
+      </gMainTable>
+    </div>
+  </div>
+</template>
+<script>
+import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
+
+export default {
+  mixins: [tableListMixins],
+  data() {
+    return {
+      filterValue: "1",
+      filterList: [
+        {
+          name: "全部",
+          value: "1",
+          total: 123,
+        },
+        {
+          name: "重要精神病",
+          value: "2",
+          total: 12,
+        },
+        {
+          name: "非防人员",
+          value: "3",
+          total: 123,
+        },
+        {
+          name: "退役重点人员",
+          value: "4",
+          total: 23,
+        },
+        {
+          name: "个人极端人员",
+          value: "5",
+          total: 13,
+        },
+        {
+          name: "家暴人员",
+          value: "6",
+          total: 13,
+        },
+        {
+          name: "前科人员",
+          value: "7",
+          total: 13,
+        },
+        {
+          name: "酗酒人员",
+          value: "8",
+          total: 13,
+        },
+      ],
+      columns: [
+        {
+          prop: "name",
+          label: "姓名",
+        },
+        {
+          prop: "gender",
+          label: "性别",
+        },
+        {
+          prop: "gender",
+          label: "人员类型",
+        },
+        {
+          prop: "gender",
+          label: "民族",
+        },
+        {
+          prop: "card",
+          label: "身份证号",
+          attrs: {
+            width: 180,
+          },
+        },
+        {
+          prop: "gender",
+          label: "户口省县",
+        },
+        {
+          prop: "phone",
+          label: "户口详址",
+        },
+        {
+          prop: "cmy",
+          label: "归属企业",
+        },
+        {
+          prop: "address",
+          label: "婚姻状况",
+        },
+        {
+          slot: "gwSlot",
+          prop: "address",
+          label: "文化程度",
+        },
+        {
+          prop: "personType",
+          label: "暂住地址",
+        },
+        {
+          prop: "date",
+          label: "暂住场所",
+          attrs: {
+            width: 180,
+          },
+        },
+        {
+          slot: "scSlot",
+          prop: "address",
+          label: "所属区县",
+        },
+        {
+          prop: "address",
+          label: "所属派出所",
+        },
+        {
+          prop: "address",
+          label: "所属委员会",
+        },
+        {
+          prop: "date",
+          label: "登记日期",
+          attrs: {
+            width: 180,
+          },
+        },
+        {
+          prop: "address",
+          label: "重点类别",
+        },
+      ],
+    };
+  },
+  methods: {
+    filterClick(val) {
+      this.filterValue = val;
+    },
+  },
+};
+</script>
diff --git a/src/views/enterpriseTopic/personSafety/screen.vue b/src/views/enterpriseTopic/personSafety/screen.vue
new file mode 100644
index 0000000..2ca43e7
--- /dev/null
+++ b/src/views/enterpriseTopic/personSafety/screen.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="enterpriseTopic">
+    <head-wrap title="平安企业专题驾驶舱"></head-wrap>
+  </div>
+</template>
+<script>
+import headWrap from "@/views/home/head.vue";
+
+export default {
+  components: { headWrap },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="less"></style>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.enterpriseTopic {
+  .riskCol {
+    padding-left: vw(8);
+    font-size: vh(16);
+
+    .riskName {
+      height: 30px;
+      display: flex;
+      margin-top: vh(6);
+      color: #d9e7ff;
+
+      .riskIcon {
+        width: vw(24);
+        height: vh(24);
+        background: url("~@/assets/images/screen/riskIcon.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/screen.vue b/src/views/enterpriseTopic/screen.vue
index 4c6935f..d96d933 100644
--- a/src/views/enterpriseTopic/screen.vue
+++ b/src/views/enterpriseTopic/screen.vue
@@ -1,21 +1,124 @@
 <template>
-  <div>
-    <!-- 驾驶舱 -->
-    专题驾驶舱大屏
-    <el-button @click="gotoPage('/topic/personSafety')">前往菜单</el-button>
+  <div class="enterpriseTopic">
+    <head-wrap title="平安企业专题驾驶舱"></head-wrap>
+    <div class="enterpriseTopicBody">
+      <div class="riskRow topRow">
+        <div class="riskCol mr18">
+          <div class="inRow">
+            <div class="sideLtCol mb10"></div>
+            <div class="sideLmCol"></div>
+          </div>
+        </div>
+        <div class="riskCol midCol mr18"></div>
+        <div class="riskCol midCol mr18"></div>
+        <div class="riskCol">
+          <div class="inRow">
+            <div class="riskCol sideCol mb10"></div>
+            <div class="riskCol sideCol"></div>
+          </div>
+        </div>
+      </div>
+      <div class="riskRow btmRow">
+        <div class="riskCol mr18"></div>
+        <div class="riskCol"></div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
+import headWrap from "@/views/home/head.vue";
+
 export default {
+  components: { headWrap },
   data() {
     return {};
   },
-  methods: {
-    gotoPage(val) {
-      this.$router.push({
-        path: val,
-      });
-    },
-  },
 };
 </script>
+
+<style lang="less">
+.enterpriseTopic {
+  height: 100%;
+  background: url("~@/assets/images/topic/allback.png") no-repeat center center;
+  background-size: 100% 100%;
+  .enterpriseTopicBody {
+    position: absolute;
+    top: 100px;
+    left: 16px;
+    width: calc(100% - 32px);
+    height: calc(100% - 110px);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .riskRow {
+      display: flex;
+    }
+    .inRow {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: 100%;
+    }
+    .riskCol {
+      flex: 1;
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.enterpriseTopic {
+  .enterpriseTopicBody {
+    .topRow {
+      height: vh(632);
+      .midCol {
+        background: url("~@/assets/images/topic/midCol.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+      }
+      .sideCol {
+        background: url("~@/assets/images/topic/sideCol.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+      }
+      .sideLtCol {
+        height: vh(248);
+        background: url("~@/assets/images/topic/sideLtCol.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+      }
+      .sideLmCol {
+        flex: 1;
+        background: url("~@/assets/images/topic/sideLmCol.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+      }
+    }
+    .btmRow {
+      height: vh(308);
+      .riskCol {
+        background: url("~@/assets/images/topic/bCol.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+      }
+    }
+  }
+  .riskCol {
+    //padding-left: vw(8);
+    font-size: vh(16);
+
+    .riskName {
+      height: 30px;
+      display: flex;
+      margin-top: vh(6);
+      color: #d9e7ff;
+
+      .riskIcon {
+        width: vw(24);
+        height: vh(24);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/home/head.vue b/src/views/home/head.vue
new file mode 100644
index 0000000..073556e
--- /dev/null
+++ b/src/views/home/head.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="homeHeadPanel">
+    <div class="homeHeadWrap">{{ title }}</div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: () => {
+        return "";
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less">
+.homeHeadWrap {
+  position: absolute;
+  padding-top: 36px;
+  top: 0;
+  width: 100%;
+  height: 130px;
+  font-weight: bold;
+  font-size: 34px;
+  letter-spacing: 4px;
+  color: #ffffff;
+  background: url("~@/assets/images/home/head.png") no-repeat center center;
+  background-size: 100% 100%;
+  text-align: center;
+}
+</style>
diff --git a/src/views/home/workspace.vue b/src/views/home/workspace.vue
index 604af98..0a72b89 100644
--- a/src/views/home/workspace.vue
+++ b/src/views/home/workspace.vue
@@ -1,49 +1,45 @@
 <template>
   <div class="homePage">
-    <div class="header flex-center">首页</div>
+    <head-wrap title="首页"></head-wrap>
     <div class="funMenu">
-      <!-- <div class="line" v-for="(line, index) in menuList" :key="index">
-        <div
-          class="item"
-          v-for="item in line"
-          :key="item.name"
-          @click="gotoPage(item.url)"
-        >
-          <div class="iconWrap">
-            <img :src="item.icon" />
-          </div>
-          <div class="nameWrap">
-            {{ item.name }}
-          </div>
-          <div class="optWrap">点击进入</div>
-        </div>
-      </div>
- -->
       <!-- 旋转动画 -->
+      <div class="diPan"></div>
       <div class="animate">
         <div class="ball ball1">
-          <img src="@/assets/images/home/jc.png" />
-          <p>1</p>
+          <img
+            src="@/assets/images/home/jc.png"
+            @click="gotoPage('/integration/compositeIndex')"
+          />
         </div>
         <div class="ball ball2">
-          <img src="@/assets/images/home/fw.png" />
-          <p>2</p>
+          <img
+            src="@/assets/images/home/fw.png"
+            @click="gotoPage('/integration/applySupermarket')"
+          />
         </div>
         <div class="ball ball3">
-          <img src="@/assets/images/home/da.png" />
-          <p>3</p>
+          <img
+            src="@/assets/images/home/da.png"
+            @click="gotoPage('/integration/enterpriseArchives')"
+          />
         </div>
         <div class="ball ball4">
-          <img src="@/assets/images/home/fx.png" />
-          <p>4</p>
+          <img
+            src="@/assets/images/home/fx.png"
+            @click="gotoPage('/riskIndex/analysis')"
+          />
         </div>
         <div class="ball ball5">
-          <img src="@/assets/images/home/xt.png" />
-          <p>5</p>
+          <img
+            src="@/assets/images/home/xt.png"
+            @click="gotoPage('/teamWork/screen')"
+          />
         </div>
         <div class="ball ball6">
-          <img src="@/assets/images/home/zt.png" />
-          <p>6</p>
+          <img
+            src="@/assets/images/home/zt.png"
+            @click="gotoPage('/topic/screen')"
+          />
         </div>
       </div>
     </div>
@@ -51,52 +47,11 @@
 </template>
 <script>
 import { getCheckCode } from "@/utils/login";
+import headWrap from "./head.vue";
 export default {
+  components: { headWrap },
   data() {
-    return {
-      menuList: [
-        [
-          {
-            name: "集成驾驶舱",
-            value: "compositeIndex",
-            icon: require("@/assets/images/base/xj.png"),
-            url: "/integration/compositeIndex",
-          },
-          {
-            name: "专题驾驶舱",
-            value: "2",
-            icon: require("@/assets/images/base/xj.png"),
-            url: "/topic/screen",
-          },
-          {
-            name: "平安企业协同共治",
-            value: "3",
-            icon: require("@/assets/images/base/xj.png"),
-            url: "/teamWork/screen",
-          },
-        ],
-        [
-          {
-            name: "平安企业服务",
-            value: "applySupermarket",
-            icon: require("@/assets/images/base/xj.png"),
-            url: "/integration/applySupermarket",
-          },
-          {
-            name: "企业档案管理",
-            value: "enterpriseArchives",
-            icon: require("@/assets/images/base/xj.png"),
-            url: "/integration/enterpriseArchives",
-          },
-          {
-            name: "企业风险指数",
-            value: "6",
-            icon: require("@/assets/images/base/xj.png"),
-            url: "/riskIndex/analysis",
-          },
-        ],
-      ],
-    };
+    return {};
   },
   created() {
     let random = Math.random();
@@ -104,19 +59,19 @@ export default {
 
     var items = document.getElementsByClassName("ball");
     //console.log(items)
-    for (var i = 0; i < items.length; i++) {
+    for (let i = 0; i < items.length; i++) {
       items[i].addEventListener("click", function () {
         console.log(this);
       });
     }
-    for (var i = 0; i < items.length; i++) {
+    for (let i = 0; i < items.length; i++) {
       items[i].addEventListener("mouseover", function () {
-        for (j = 0; j < items.length; j++) {
+        for (let j = 0; j < items.length; j++) {
           items[j].style.animationPlayState = "paused";
         }
       });
       items[i].addEventListener("mouseout", function () {
-        for (j = 0; j < items.length; j++) {
+        for (let j = 0; j < items.length; j++) {
           items[j].style.animationPlayState = "running";
         }
       });
@@ -140,66 +95,37 @@ export default {
 <style lang="less">
 .homePage {
   height: 100%;
-  background-color: #0c294c;
-
-  .header {
-    height: 60px;
-    background-color: #094b71;
-    font-size: 18px;
-    font-weight: bold;
-    color: #ffffff;
-  }
+  background: url("~@/assets/images/home/bg.png") no-repeat center center;
+  background-size: 100% 100%;
+  box-sizing: border-box;
   .funMenu {
-    /* height: calc(100% - 60px);
+    position: absolute;
+    top: 80px;
+    left: 10px;
+    width: calc(100% - 20px);
     display: flex;
-    flex-direction: column;
     justify-content: center;
-    .line {
-      display: flex;
-      justify-content: space-evenly;
-      margin-bottom: 50px;
-      .item {
-        width: 180px;
-        height: 240px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        background-color: #103e71;
-        color: #ffffff;
-        .iconWrap {
-          margin-top: 20px;
-          margin-bottom: 30px;
-          img {
-            width: 80px;
-            height: 80px;
-          }
-        }
-        .nameWrap {
-          margin-bottom: 16px;
-        }
-        .optWrap {
-          padding: 4px 12px;
-          border-radius: 4px;
-          background-color: #1b70c7;
-        }
-        &:hover {
-          opacity: 0.8;
-          cursor: pointer;
-        }
-      }
-    } */
+    align-items: center;
+    height: calc(100% - 90px);
+    background: url("~@/assets/images/home/bg2.png") no-repeat center center;
+    background-size: 100% 100%;
+    box-sizing: border-box;
     /* 旋转动画 */
-    .animate {
-      width: 420px;
-      height: 300px;
-      border-radius: 50%;
+    .diPan {
       position: absolute;
-      left: 10px;
-      top: 20px;
+      width: 1400px;
+      height: 600px;
+      background: url("~@/assets/images/home/btm.png") no-repeat center center;
+      background-size: 100% 100%;
+    }
+    .animate {
+      width: 1200px;
+      height: 700px;
+      position: relative;
 
       .ball {
-        width: 100px;
-        height: 100px;
+        width: 200px;
+        height: 240px;
         position: absolute;
         display: flex;
         flex-direction: column;
@@ -208,62 +134,63 @@ export default {
         font-size: 12px;
       }
       .ball img:hover {
-        transform: scale(1.2);
+        cursor: pointer;
+        transform: scale(1.1);
       }
       .ball img {
-        width: 70px;
-        height: 70px;
+        width: 180px;
+        height: 216px;
         margin-bottom: 10px;
       }
-      /* 6个图x和y轴动画加起来是18s , 18s/6 等于 3s
-每个球y轴动画延迟 从0递减3s,x轴与y轴相差动画时长的一半（9s/2） */
+      /* 6个图x和y轴动画加起来是60s , 60s/6 等于 10s
+每个球y轴动画延迟 从0递减5s,x轴与y轴相差动画时长的一半（30s/2） */
       .ball1 {
-        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
-          animY 9s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
-          scale 18s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
+        animation: animX 30s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
+          animY 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
+          scale 60s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
       }
       .ball2 {
-        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate,
-          animY 9s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
-          scale 18s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate;
+        animation: animX 30s cubic-bezier(0.36, 0, 0.64, 1) -25s infinite alternate,
+          animY 30s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
+          scale 60s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
       }
       .ball3 {
-        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -10.5s infinite alternate,
-          animY 9s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
-          scale 18s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
+        animation: animX 30s cubic-bezier(0.36, 0, 0.64, 1) -35s infinite alternate,
+          animY 30s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate,
+          scale 60s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate;
       }
       .ball4 {
-        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -13.5s infinite alternate,
-          animY 9s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate,
-          scale 18s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate;
+        animation: animX 30s cubic-bezier(0.36, 0, 0.64, 1) -45s infinite alternate,
+          animY 30s cubic-bezier(0.36, 0, 0.64, 1) -30s infinite alternate,
+          scale 60s cubic-bezier(0.36, 0, 0.64, 1) -30s infinite alternate;
       }
       .ball5 {
-        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -16.5s infinite alternate,
-          animY 9s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
-          scale 18s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
+        animation: animX 30s cubic-bezier(0.36, 0, 0.64, 1) -55s infinite alternate,
+          animY 30s cubic-bezier(0.36, 0, 0.64, 1) -40s infinite alternate,
+          scale 60s cubic-bezier(0.36, 0, 0.64, 1) -40s infinite alternate;
       }
       .ball6 {
-        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
-          animY 9s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
-          scale 18s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate;
+        animation: animX 30s cubic-bezier(0.36, 0, 0.64, 1) -65s infinite alternate,
+          animY 30s cubic-bezier(0.36, 0, 0.64, 1) -50s infinite alternate,
+          scale 60s cubic-bezier(0.36, 0, 0.64, 1) -50s infinite alternate;
       }
     }
   }
 
   @keyframes animX {
-    0% {
-      left: -20px;
+    from {
+      left: 0;
     }
-    100% {
-      left: 340px;
+    to {
+      left: 1000px;
     }
   }
   @keyframes animY {
-    0% {
-      top: -30px;
+    from {
+      top: 10px;
     }
-    100% {
-      top: 200px;
+    to {
+      top: 500px;
     }
   }
   @keyframes scale {
@@ -271,7 +198,7 @@ export default {
       transform: scale(0.7);
     }
     50% {
-      transform: scale(1.2);
+      transform: scale(1.1);
     }
     100% {
       transform: scale(0.7);