diff --git a/src/assets/images/base/stablet.png b/src/assets/images/base/stablet.png
new file mode 100644
index 0000000..19d6893
Binary files /dev/null and b/src/assets/images/base/stablet.png differ
diff --git a/src/assets/images/topic/aCol.png b/src/assets/images/topic/aCol.png
new file mode 100644
index 0000000..5fb9fdb
Binary files /dev/null and b/src/assets/images/topic/aCol.png differ
diff --git a/src/assets/images/topic/c1.png b/src/assets/images/topic/c1.png
new file mode 100644
index 0000000..a203869
Binary files /dev/null and b/src/assets/images/topic/c1.png differ
diff --git a/src/assets/images/topic/c2.png b/src/assets/images/topic/c2.png
new file mode 100644
index 0000000..ba82ad1
Binary files /dev/null and b/src/assets/images/topic/c2.png differ
diff --git a/src/assets/images/topic/c3.png b/src/assets/images/topic/c3.png
new file mode 100644
index 0000000..7e576d8
Binary files /dev/null and b/src/assets/images/topic/c3.png differ
diff --git a/src/assets/images/topic/c4.png b/src/assets/images/topic/c4.png
new file mode 100644
index 0000000..3256c04
Binary files /dev/null and b/src/assets/images/topic/c4.png differ
diff --git a/src/assets/images/topic/c5.png b/src/assets/images/topic/c5.png
new file mode 100644
index 0000000..4a7620d
Binary files /dev/null and b/src/assets/images/topic/c5.png differ
diff --git a/src/assets/images/topic/c6.png b/src/assets/images/topic/c6.png
new file mode 100644
index 0000000..e427608
Binary files /dev/null and b/src/assets/images/topic/c6.png differ
diff --git a/src/assets/images/topic/c7.png b/src/assets/images/topic/c7.png
new file mode 100644
index 0000000..15815c1
Binary files /dev/null and b/src/assets/images/topic/c7.png differ
diff --git a/src/assets/images/topic/c8.png b/src/assets/images/topic/c8.png
new file mode 100644
index 0000000..2a09b04
Binary files /dev/null and b/src/assets/images/topic/c8.png differ
diff --git a/src/assets/images/topic/car.png b/src/assets/images/topic/car.png
new file mode 100644
index 0000000..b63ab61
Binary files /dev/null and b/src/assets/images/topic/car.png differ
diff --git a/src/assets/images/topic/carai.png b/src/assets/images/topic/carai.png
new file mode 100644
index 0000000..b63ab61
Binary files /dev/null and b/src/assets/images/topic/carai.png differ
diff --git a/src/assets/images/topic/caran.png b/src/assets/images/topic/caran.png
new file mode 100644
index 0000000..db7a778
Binary files /dev/null and b/src/assets/images/topic/caran.png differ
diff --git a/src/assets/images/topic/carb.png b/src/assets/images/topic/carb.png
new file mode 100644
index 0000000..d287f62
Binary files /dev/null and b/src/assets/images/topic/carb.png differ
diff --git a/src/assets/images/topic/carcheck.png b/src/assets/images/topic/carcheck.png
new file mode 100644
index 0000000..b2a6d0f
Binary files /dev/null and b/src/assets/images/topic/carcheck.png differ
diff --git a/src/assets/images/topic/cardbody.png b/src/assets/images/topic/cardbody.png
new file mode 100644
index 0000000..1a29d6a
Binary files /dev/null and b/src/assets/images/topic/cardbody.png differ
diff --git a/src/assets/images/topic/cardtop.png b/src/assets/images/topic/cardtop.png
new file mode 100644
index 0000000..6dadc53
Binary files /dev/null and b/src/assets/images/topic/cardtop.png differ
diff --git a/src/assets/images/topic/cari.png b/src/assets/images/topic/cari.png
new file mode 100644
index 0000000..f6b0b36
Binary files /dev/null and b/src/assets/images/topic/cari.png differ
diff --git a/src/assets/images/topic/carmid.png b/src/assets/images/topic/carmid.png
new file mode 100644
index 0000000..6d8c0b5
Binary files /dev/null and b/src/assets/images/topic/carmid.png differ
diff --git a/src/assets/images/topic/carmidr.png b/src/assets/images/topic/carmidr.png
new file mode 100644
index 0000000..cf93a90
Binary files /dev/null and b/src/assets/images/topic/carmidr.png differ
diff --git a/src/assets/images/topic/carn.png b/src/assets/images/topic/carn.png
new file mode 100644
index 0000000..85d3f13
Binary files /dev/null and b/src/assets/images/topic/carn.png differ
diff --git a/src/assets/images/topic/carnav.png b/src/assets/images/topic/carnav.png
new file mode 100644
index 0000000..a48a7e9
Binary files /dev/null and b/src/assets/images/topic/carnav.png differ
diff --git a/src/assets/images/topic/check.png b/src/assets/images/topic/check.png
new file mode 100644
index 0000000..c260d68
Binary files /dev/null and b/src/assets/images/topic/check.png differ
diff --git a/src/assets/images/topic/col.png b/src/assets/images/topic/col.png
new file mode 100644
index 0000000..2060c06
Binary files /dev/null and b/src/assets/images/topic/col.png differ
diff --git a/src/assets/images/topic/dzuo.png b/src/assets/images/topic/dzuo.png
new file mode 100644
index 0000000..238aeb4
Binary files /dev/null and b/src/assets/images/topic/dzuo.png differ
diff --git a/src/assets/images/topic/stablet.png b/src/assets/images/topic/stablet.png
new file mode 100644
index 0000000..19d6893
Binary files /dev/null and b/src/assets/images/topic/stablet.png differ
diff --git a/src/assets/images/topic/stbg.png b/src/assets/images/topic/stbg.png
new file mode 100644
index 0000000..8d15649
Binary files /dev/null and b/src/assets/images/topic/stbg.png differ
diff --git a/src/assets/images/topic/stbtm.png b/src/assets/images/topic/stbtm.png
new file mode 100644
index 0000000..4f881fa
Binary files /dev/null and b/src/assets/images/topic/stbtm.png differ
diff --git a/src/assets/images/topic/stgl.png b/src/assets/images/topic/stgl.png
new file mode 100644
index 0000000..e9a3ff5
Binary files /dev/null and b/src/assets/images/topic/stgl.png differ
diff --git a/src/assets/images/topic/stmd.png b/src/assets/images/topic/stmd.png
new file mode 100644
index 0000000..5a207bb
Binary files /dev/null and b/src/assets/images/topic/stmd.png differ
diff --git a/src/assets/images/topic/sttop.png b/src/assets/images/topic/sttop.png
new file mode 100644
index 0000000..70701c8
Binary files /dev/null and b/src/assets/images/topic/sttop.png differ
diff --git a/src/assets/images/topic/styc.png b/src/assets/images/topic/styc.png
new file mode 100644
index 0000000..e13e8b0
Binary files /dev/null and b/src/assets/images/topic/styc.png differ
diff --git a/src/assets/images/topic/uncheck.png b/src/assets/images/topic/uncheck.png
new file mode 100644
index 0000000..5857b02
Binary files /dev/null and b/src/assets/images/topic/uncheck.png differ
diff --git a/src/assets/images/topic/编组 32.png b/src/assets/images/topic/编组 32.png
deleted file mode 100644
index 63193c1..0000000
Binary files a/src/assets/images/topic/编组 32.png and /dev/null differ
diff --git a/src/loveflow/assets/index.less b/src/loveflow/assets/index.less
index 91bb5e3..0d3903a 100644
--- a/src/loveflow/assets/index.less
+++ b/src/loveflow/assets/index.less
@@ -22,6 +22,9 @@
 .mt3 {
   margin-top: 3px;
 }
+.mt20 {
+  margin-top: 20px;
+}
 .mr6 {
   margin-right: 6px;
 }
@@ -46,6 +49,9 @@
 .mb18 {
   margin-bottom: 18px;
 }
+.mb16 {
+  margin-bottom: 16px;
+}
 .mb20 {
   margin-bottom: 20px;
 }
diff --git a/src/loveflow/assets/paginate.less b/src/loveflow/assets/paginate.less
index f1f4e75..eab32b5 100644
--- a/src/loveflow/assets/paginate.less
+++ b/src/loveflow/assets/paginate.less
@@ -1,54 +1,56 @@
-.gPagination {
-  background-color: transparent;
-}
-/deep/.el-pagination {
-  .el-pagination__total {
-    color: #ffffff;
-    height: 34px;
-    line-height: 34px;
+.gMainTable {
+  .gPagination {
+    background-color: transparent;
   }
-  .el-pagination__sizes {
-    .el-input__inner {
+  /deep/.el-pagination {
+    .el-pagination__total {
+      color: #ffffff;
+      height: 34px;
+      line-height: 34px;
+    }
+    .el-pagination__sizes {
+      .el-input__inner {
+        height: 32px;
+        background: transparent;
+        color: #fff;
+        border: solid 1px #28847e;
+      }
+    }
+    .btn-prev {
       height: 32px;
+      min-width: 32px;
       background: transparent;
       color: #fff;
       border: solid 1px #28847e;
     }
-  }
-  .btn-prev {
-    height: 32px;
-    min-width: 32px;
-    background: transparent;
-    color: #fff;
-    border: solid 1px #28847e;
-  }
-  .btn-next {
-    height: 32px;
-    min-width: 32px;
-    background: transparent;
-    color: #fff;
-    border: solid 1px #28847e;
-  }
-  .el-pager {
-    .number {
+    .btn-next {
       height: 32px;
       min-width: 32px;
       background: transparent;
       color: #fff;
       border: solid 1px #28847e;
-      &.active {
-        background: url("~@/assets/companyFile/2121.png") no-repeat !important;
-        background-size: 100% 100% !important;
+    }
+    .el-pager {
+      .number {
+        height: 32px;
+        min-width: 32px;
+        background: transparent;
+        color: #fff;
+        border: solid 1px #28847e;
+        &.active {
+          background: url("~@/assets/companyFile/2121.png") no-repeat !important;
+          background-size: 100% 100% !important;
+        }
       }
     }
-  }
-  .el-pagination__jump {
-    color: #fff;
-    .el-input__inner {
-      height: 32px;
-      background: transparent;
+    .el-pagination__jump {
       color: #fff;
-      border: solid 1px #28847e;
+      .el-input__inner {
+        height: 32px;
+        background: transparent;
+        color: #fff;
+        border: solid 1px #28847e;
+      }
     }
   }
 }
diff --git a/src/loveflow/assets/reset.scss b/src/loveflow/assets/reset.scss
new file mode 100644
index 0000000..46850a6
--- /dev/null
+++ b/src/loveflow/assets/reset.scss
@@ -0,0 +1,164 @@
+.loveflowscreen {
+  .tableWrap {
+  }
+  .el-table {
+    border: none; //solid 1px rgba(82, 107, 127, 0.7);
+    border-right: none;
+    border-top: none;
+    border-bottom: none;
+    border-top: none;
+    background: transparent;
+    font-size: vw(12) !important;
+
+    .el-table__header-wrapper {
+      .el-table__header {
+        background: url("~@/assets/images/base/stablet.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+
+        thead {
+          tr {
+            background: transparent;
+            th {
+              font-weight: 500;
+              font-size: vw(14);
+              color: #d9e7ff;
+              .cell {
+                padding-right: 0;
+              }
+            }
+          }
+        }
+
+        th {
+          background: none;
+        }
+        td.el-table__cell,
+        th.el-table__cell.is-leaf {
+          border-bottom: none//1px solid #526b7f;
+        }
+      }
+    }
+
+    .el-table__body-wrapper {
+      .el-table__body {
+        tbody {
+          color: #ffffff;
+          tr {
+            background: transparent;
+            td {
+              border-bottom: none;
+              //border-right-color: rgba(82, 107, 127, 0.7);
+            }
+          }
+          .el-table__row--striped {
+            .el-table__cell {
+              background: rgba(61, 85, 102, 0.3);
+            }
+          }
+        }
+      }
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+  .gPagination {
+    background-color: transparent;
+  }
+  .el-pagination {
+    padding: 2px 0;
+    .el-pagination__total {
+      height: auto;
+      color: #ffffff;
+    }
+    .el-pagination__sizes {
+      .el-input__inner {
+        background: #3c4b4a;
+        color: #fff;
+      }
+    }
+    .btn-prev {
+      background: #3c4b4a;
+      color: #fff;
+    }
+    .btn-next {
+      background: #3c4b4a;
+      color: #fff;
+    }
+    .el-pager {
+      .number {
+        background: #3c4b4a;
+        color: #fff;
+        &.active {
+          background: url("~@/assets/companyFile/2121.png") no-repeat !important;
+          background-size: 100% 100% !important;
+        }
+      }
+    }
+    .el-pagination__jump {
+      color: #fff;
+      .el-input__inner {
+        background: #3c4b4a;
+        color: #fff;
+      }
+    }
+  }
+
+  .gScreenTable {
+    .gScreenTableWrap {
+      position: relative;
+      height: 100%;
+      overflow: auto;
+      box-sizing: border-box;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      .screenTable {
+        width: 100%;
+        height: 100%;
+        border-spacing: 0;
+      }
+      font-size: vw(14);
+      .thead {
+        position: sticky;
+        top: 0;
+        background-color: #3c4b4a;
+        .tr {
+          color: #d9e7ff;
+          height: 28px;
+          background: url("~@/assets/images/base/stablet.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+        }
+
+        border: none;
+        .th {
+          border: none;
+        }
+      }
+      .tbody {
+        padding-top: 28px;
+        color: #ffffff;
+        border: none;
+        height: calc(100% - 30px);
+        overflow-y: scroll;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        .tr {
+          height: vw(32);
+          .td {
+            text-align: center;
+            border: none;
+          }
+
+          &:nth-child(odd) {
+            background: rgba(61, 85, 102, 0.3);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/loveflow/components/data/screenTable.vue b/src/loveflow/components/data/screenTable.vue
new file mode 100644
index 0000000..1ead605
--- /dev/null
+++ b/src/loveflow/components/data/screenTable.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="gScreenTable">
+    <el-table
+      v-if="show"
+      ref="gScreenTable"
+      :size="size"
+      :data="tableData"
+      :rowKey="rowKey ? rowKey : ''"
+      @selection-change="selectionChange"
+      v-bind="$attrs"
+    >
+      <!-- 多选批量操作 -->
+      <el-table-column
+        v-if="rowSelection"
+        type="selection"
+        width="55"
+        :reserve-selection="rowKey ? true : false"
+      >
+      </el-table-column>
+      <template v-for="(item, index) in columns">
+        <el-table-column
+          v-if="item.slot"
+          :key="item.prop + index"
+          :label="item.label"
+          v-bind="item.attrs || {}"
+        >
+          <!-- slot内容 -->
+          <template v-slot="scope">
+            <slot :name="item.slot" :scope="scope" />
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          v-else
+          :key="item.prop + index"
+          :prop="item.prop"
+          :label="item.label"
+          v-bind="item.attrs || {}"
+        >
+        </el-table-column>
+      </template>
+    </el-table>
+
+    <div class="gScreenTableWrap">
+      <table class="screenTable">
+        <thead class="thead">
+          <tr class="tr">
+            <th class="th" v-for="item in columns" :key="item.label + item.id">
+              {{ item.label }}
+            </th>
+          </tr>
+        </thead>
+        <tbody class="tbody">
+          <tr
+            class="tr"
+            v-for="(data, index) in tableData"
+            :key="data.id + index"
+          >
+            <td
+              class="td"
+              v-for="item in columns"
+              :key="item.label + item.id + index"
+            >
+              {{ data[item.prop] }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="gPagination" v-if="pagination">
+      <el-pagination
+        :small="true"
+        background
+        v-bind="{ ...pagination }"
+        @size-change="pageSizeChange"
+        @current-change="currentPageChange"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "gScreenTable",
+  props: {
+    size: {
+      type: String,
+      default: () => {
+        return "mini";
+      },
+    },
+    tableData: {
+      type: Array,
+      required: true,
+    },
+    columns: {
+      type: Array,
+      required: true,
+    },
+    pagination: {
+      type: Object,
+      required: false,
+    },
+    rowSelection: {
+      type: Object,
+      required: false,
+    },
+    rowKey: {
+      type: String,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  methods: {
+    //每页条数发生改变
+    pageSizeChange(item) {
+      this.$emit("pageSizeChange", item);
+    },
+    //当前页码发生改变
+    currentPageChange(item) {
+      this.$emit("currentPageChange", item);
+    },
+    //多选行操作
+    selectionChange(item) {
+      this.$emit("selectionChange", item, this.rowKey);
+    },
+    //清除选择项
+    clearSelection() {
+      this.$refs.gScreenTable.clearSelection();
+      this.$emit("onClearSelected");
+    },
+  },
+};
+</script>
+<style lang="less">
+.gScreenTable {
+  height: calc(100% - 34px);
+  .el-table {
+    height: 100%;
+
+    .el-table__body-wrapper {
+      height: calc(100% - 30px);
+      overflow-y: scroll;
+      overflow-x: hidden;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+  .gPagination {
+    display: flex;
+    justify-content: flex-end;
+    background-color: transparent;
+    padding: 4px 0 0;
+  }
+}
+</style>
diff --git a/src/loveflow/components/echart/pie/six.vue b/src/loveflow/components/echart/pie/six.vue
index 8ec04b7..9e7ea65 100644
--- a/src/loveflow/components/echart/pie/six.vue
+++ b/src/loveflow/components/echart/pie/six.vue
@@ -44,7 +44,7 @@ export default {
           },
           textAlign: "center",
           left: "47%",
-          bottom: "20%",
+          top: 140,
         },
         color: this.chartObj.color,
         graphic: {
diff --git a/src/loveflow/mixins/tableListMixins.js b/src/loveflow/mixins/tableListMixins.js
index 9a38e70..7916adf 100644
--- a/src/loveflow/mixins/tableListMixins.js
+++ b/src/loveflow/mixins/tableListMixins.js
@@ -60,6 +60,21 @@ export const tableListMixins = {
           personType: "未登记人员",
           date: "2024-02-26 22:22:22",
           sc: "正常",
+          qyT: "企业类型" + i,
+          cardList: [
+            {
+              name: "矛盾数据",
+              value: 9,
+            },
+            {
+              name: "劳资纠纷",
+              value: 9,
+            },
+            {
+              name: "特种设备",
+              value: 9,
+            },
+          ],
         });
       }
       //console.log(this.dataSource);
diff --git a/src/main.js b/src/main.js
index 3280529..ca21af7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,10 +15,12 @@ import lkyPagination from "./components/publicModule/lkyPagination" // 本组件
 
 import "@/loveflow/assets/index.less"
 import "@/loveflow/assets/reset.less"
+import "@/loveflow/assets/reset.scss"
 import * as cusRule from '@/loveflow/rules'
 import { registerPlugins } from '@/loveflow/plugins/index'
 import FormDialog from '@/loveflow/components/modal/formDialog.vue'
 import gMainTable from '@/loveflow/components/data/table.vue'
+import gScreenTable from '@/loveflow/components/data/screenTable.vue'
 import gDict from '@/loveflow/components/data/dict.vue'
 import gChart from '@/loveflow/components/echart/chart.vue'
 
@@ -36,6 +38,7 @@ Vue.component('lkyTable', lkyTable)
 Vue.component('lkyPagination',lkyPagination)
 Vue.component('FormDialog', FormDialog)
 Vue.component('gMainTable', gMainTable)
+Vue.component('gScreenTable', gScreenTable)
 Vue.component('gDict', gDict)
 Vue.component('gChart', gChart)
 const vm = new Vue({
diff --git a/src/router/routes/enterpriseTopic.js b/src/router/routes/enterpriseTopic.js
index 0b58825..ad55a86 100644
--- a/src/router/routes/enterpriseTopic.js
+++ b/src/router/routes/enterpriseTopic.js
@@ -46,6 +46,16 @@ export default [
         },
         component: () => import("@/views/enterpriseTopic/dangerTransport"),
       },
+      {
+        path: "/topic/dangerTransport/carDetail",
+        name: "dangerTransport",
+        meta: {
+          head: false,
+          title: "危险品运输详情",
+        },
+        component: () =>
+          import("@/views/enterpriseTopic/dangerTransport/carDetail"),
+      },
       {
         path: "/topic/antiAttack",
         name: "antiAttack",
diff --git a/src/views/enterpriseTopic/components/carNum.vue b/src/views/enterpriseTopic/components/carNum.vue
new file mode 100644
index 0000000..f2a4801
--- /dev/null
+++ b/src/views/enterpriseTopic/components/carNum.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="digitWrap">
+    <div class="num" v-for="(item, index) in numArr" :key="index">
+      {{ item }}
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    num: {
+      type: [Number, String],
+    },
+  },
+  data() {
+    return {
+      numArr: [],
+    };
+  },
+  mounted() {
+    this.setNum();
+  },
+  methods: {
+    setNum() {
+      this.num = this.num + "";
+      this.numArr = [];
+      let length = this.num.length;
+      console.log(length);
+      console.log(this.num);
+      for (let i = 0; i < length; i++) {
+        this.numArr.push(this.num.charAt(i));
+      }
+    },
+  },
+  watch: {
+    num: {
+      handler(newval) {
+        this.setNum();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.digitWrap {
+  display: flex;
+  justify-content: space-evenly;
+  padding-top: vw(16);
+  padding-left: vw(20);
+  padding-right: vw(20);
+  width: vw(377);
+  height: vw(105);
+  background: url("~@/assets/images/topic/numb.png") no-repeat center center;
+  background-size: 100% 100%;
+
+  .num {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: vw(38);
+    height: vw(44);
+    background: url("~@/assets/images/topic/num.png") no-repeat center center;
+    background-size: 100% 100%;
+    font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
+    font-weight: bold;
+    font-size: vw(28);
+    color: #f3fff9;
+    letter-spacing: 1px;
+    text-shadow: 0px 0px 9px rgba(87, 238, 255, 0.88);
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/components/colWrap.vue b/src/views/enterpriseTopic/components/colWrap.vue
index 345b713..96800af 100644
--- a/src/views/enterpriseTopic/components/colWrap.vue
+++ b/src/views/enterpriseTopic/components/colWrap.vue
@@ -24,34 +24,35 @@ export default {
   },
 };
 </script>
-<style lang="less">
-.screenCol {
-}
-</style>
 <style lang="scss">
 @import "@/loveflow/assets/index.scss";
 .screenCol {
-  height: 100%;
   flex: 1;
   .screenName {
-    height: vh(36);
-    background: url("~@/assets/images/topic/colT.png") no-repeat center center;
+    display: flex;
+    align-items: center;
+    padding-left: vw(6);
+    height: 30px;
+    font-size: vw(16);
+    color: #d9e7ff;
+    background: url("~@/assets/images/topic/cardtop.png") no-repeat center
+      center;
     background-size: 100% 100%;
     .screenIcon {
-      width: vh(24);
-      height: vh(24);
+      width: 24px;
+      height: 24px;
       background: url("~@/assets/images/screen/riskIcon.png") no-repeat center
         center;
       background-size: 100% 100%;
     }
-    .screenNameText {
-      font-size: vh(16);
-    }
   }
 
   .screenChart {
-    height: calc(100% - 3.3333vh);
-    background: url("~@/assets/images/topic/colB.png") no-repeat center center;
+    padding: 12px 12px 0;
+    height: calc(100% - 30px);
+    box-sizing: border-box;
+    background: url("~@/assets/images/topic/cardbody.png") no-repeat center
+      center;
     background-size: 100% 100%;
   }
 }
diff --git a/src/views/enterpriseTopic/components/tableWrap.vue b/src/views/enterpriseTopic/components/tableWrap.vue
new file mode 100644
index 0000000..1fd366e
--- /dev/null
+++ b/src/views/enterpriseTopic/components/tableWrap.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="loveflowscreen">
+    <div class="tableWrap">
+      <gScreenTable
+        stripe
+        ref="gScreenTable"
+        :tableData="dataSource"
+        :columns="columns"
+        rowKey="id"
+        :pagination="ipagination"
+        @pageSizeChange="handlePageSizeChange"
+        @currentPageChange="handleCurrentPageChange"
+      >
+      </gScreenTable>
+    </div>
+  </div>
+</template>
+<script>
+import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
+
+export default {
+  mixins: [tableListMixins],
+  props: {
+    columns: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      disableMixinCreated: true,
+    };
+  },
+  created() {
+    this.ipagination.pageSize = 10;
+    this.ipagination.pageSizes = [];
+    this.ipagination.layout = "total, prev, pager, next";
+    this.loadData();
+  },
+};
+</script>
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
+.loveflowscreen {
+  height: 100%;
+  .tableWrap {
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/dangerTransport/carDetail.vue b/src/views/enterpriseTopic/dangerTransport/carDetail.vue
new file mode 100644
index 0000000..a1d4721
--- /dev/null
+++ b/src/views/enterpriseTopic/dangerTransport/carDetail.vue
@@ -0,0 +1,403 @@
+<template>
+  <div class="dangerTransportDetail">
+    <div class="screeLeft mr18">
+      <div class="screeTopRow">
+        <colWrap class="mb14" :title="title.one">
+          <tableWrap :columns="column1"></tableWrap>
+        </colWrap>
+        <colWrap class="mb14" :title="title.three">
+          <tableWrap :columns="column3"></tableWrap>
+        </colWrap>
+      </div>
+      <div class="screeBtmRow">
+        <colWrap :title="title.five">
+          <tableWrap :columns="column5"></tableWrap>
+        </colWrap>
+      </div>
+    </div>
+    <div class="screeMid mr18">
+      <div class="screeTopRow">
+        <div class="left">
+          <carNum :num="car"></carNum>
+          <div class="dizuo"></div>
+        </div>
+        <div class="right">
+          <div class="line">
+            <div class="label">车型：</div>
+            <div class="value">{{ carInfo.type }}</div>
+          </div>
+          <div class="line">
+            <div class="label">车辆所有人：</div>
+            <div class="value">{{ carInfo.type }}</div>
+          </div>
+          <div class="line">
+            <div class="label">核定载重量：</div>
+            <div class="value">{{ carInfo.type }}</div>
+          </div>
+          <div class="line">
+            <div class="label">车架号：</div>
+            <div class="value">{{ carInfo.type }}</div>
+          </div>
+          <div class="line">
+            <div class="label">所属企业：</div>
+            <div class="value">{{ carInfo.type }}</div>
+          </div>
+          <div class="line">
+            <div class="label">经营许可证号：</div>
+            <div class="value">{{ carInfo.type }}</div>
+          </div>
+          <div class="line">
+            <div class="label">道路运输证号：</div>
+            <div class="value">{{ carInfo.type }}</div>
+          </div>
+          <div class="line">
+            <div class="label">经营范围：</div>
+            <div class="value">{{ carInfo.jy }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="screeBtmRow">
+        <colWrap class="mr18" :title="title.six">
+          <tableWrap :columns="column6"></tableWrap>
+        </colWrap>
+        <colWrap class="" :title="title.seven">
+          <tableWrap :columns="column7"></tableWrap>
+        </colWrap>
+      </div>
+    </div>
+    <div class="screeRight">
+      <div class="screeTopRow">
+        <colWrap class="mb14" :title="title.two">
+          <tableWrap :columns="column2"></tableWrap>
+        </colWrap>
+        <colWrap class="mb14" :title="title.four">
+          <tableWrap :columns="column4"></tableWrap>
+        </colWrap>
+      </div>
+      <div class="screeBtmRow">
+        <colWrap :title="title.eight">
+          <tableWrap :columns="column8"></tableWrap>
+        </colWrap>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import tableWrap from "../components/tableWrap.vue";
+import colWrap from "../components/colWrap.vue";
+import carNum from "../components/carNum.vue";
+
+export default {
+  components: { tableWrap, colWrap, carNum },
+  data() {
+    return {
+      total: 34567,
+      title: {
+        one: "车辆超载 (1)",
+        two: "超速 (2)",
+        three: "闯禁 (3)",
+        four: "疲劳驾驶(4)",
+        five: "未按照车道行驶 (5)",
+        six: "车辆异常驻留 (6)",
+        seven: "GPS离线 (7)",
+        eight: "交通事故 (8)",
+      },
+      car: "",
+      column1: [
+        {
+          prop: "id",
+          label: "序号",
+        },
+        {
+          prop: "date",
+          label: "时间",
+        },
+        {
+          prop: "name",
+          label: "超载查处点",
+        },
+        {
+          prop: "isQ",
+          label: "超载比例",
+        },
+        {
+          prop: "personType",
+          label: "处理详情",
+        },
+        {
+          prop: "address",
+          label: "处理单位",
+        },
+      ],
+      column2: [
+        {
+          prop: "id",
+          label: "序号",
+        },
+        {
+          prop: "time",
+          label: "时间",
+        },
+        {
+          prop: "name",
+          label: "超速地点",
+        },
+        {
+          prop: "name",
+          label: "处理详情",
+        },
+        {
+          prop: "name",
+          label: "处理单位",
+        },
+      ],
+      column3: [
+        {
+          prop: "id",
+          label: "序号",
+        },
+        {
+          prop: "time",
+          label: "时间",
+        },
+        {
+          prop: "name",
+          label: "超载查处点",
+        },
+        {
+          prop: "name",
+          label: "超载比例",
+        },
+        {
+          prop: "name",
+          label: "处理详情",
+        },
+        {
+          prop: "name",
+          label: "处理单位",
+        },
+      ],
+      column4: [
+        {
+          prop: "id",
+          label: "序号",
+        },
+        {
+          prop: "time",
+          label: "时间",
+        },
+        {
+          prop: "name",
+          label: "查处点",
+        },
+        {
+          prop: "name",
+          label: "处理详情",
+        },
+        {
+          prop: "name",
+          label: "处理单位",
+        },
+      ],
+      column5: [
+        {
+          prop: "id",
+          label: "序号",
+        },
+        {
+          prop: "time",
+          label: "时间",
+        },
+        {
+          prop: "name",
+          label: "查处点",
+        },
+        {
+          prop: "name",
+          label: "处理详情",
+        },
+        {
+          prop: "name",
+          label: "处理单位",
+        },
+      ],
+      column6: [
+        {
+          prop: "id",
+          label: "序号",
+        },
+        {
+          prop: "time",
+          label: "车牌",
+        },
+        {
+          prop: "name",
+          label: "驾驶人员",
+        },
+        {
+          prop: "name",
+          label: "驻留时间",
+        },
+        {
+          prop: "name",
+          label: "驻留时长",
+        },
+      ],
+      column7: [
+        {
+          prop: "id",
+          label: "序号",
+        },
+        {
+          prop: "time",
+          label: "车牌",
+        },
+        {
+          prop: "name",
+          label: "驾驶人员",
+        },
+        {
+          prop: "name",
+          label: "GPS离线地点",
+        },
+        {
+          prop: "name",
+          label: "离线时间",
+        },
+        {
+          prop: "name",
+          label: "离线时长",
+        },
+      ],
+      column8: [
+        {
+          prop: "id",
+          label: "查处点",
+        },
+        {
+          prop: "time",
+          label: "时间",
+        },
+        {
+          prop: "name",
+          label: "所属企业",
+        },
+        {
+          prop: "name",
+          label: "事故类型",
+        },
+        {
+          prop: "name",
+          label: "事故定损",
+        },
+      ],
+      carInfo: {
+        type: "GPS驻留",
+        jy: "羟亚胺、水银、丙酮、苯乙酸、羟亚胺、水银、丙酮、苯乙酸、 氰化钾、氰",
+      },
+    };
+  },
+  mounted() {
+    this.car = this.$route.query.car;
+    console.log(this.car);
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.dangerTransportDetail {
+  height: 100%;
+  padding: 16px;
+  display: flex;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  .screeTopRow {
+    margin-bottom: 14px;
+    display: flex;
+    flex-direction: column;
+    height: calc(66.66% - 12px);
+    overflow: hidden;
+    .screenCol {
+      height: calc(50% - 8px);
+    }
+  }
+  .screeBtmRow {
+    display: flex;
+    height: calc(33.33% - 6px);
+    overflow: hidden;
+  }
+
+  .screeLeft {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .screeMid {
+    height: 100%;
+    flex: 2;
+    display: flex;
+    flex-direction: column;
+    .screeTopRow {
+      background: url("~@/assets/images/topic/carmid.png") no-repeat center
+        center;
+      background-size: 100% 100%;
+      display: flex;
+      flex-direction: row;
+      .left {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        .dizuo {
+          width: 100%;
+          height: vw(196);
+          background: url("~@/assets/images/topic/dzuo.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+        }
+      }
+      .right {
+        flex: 1;
+        margin-top: vw(90);
+        margin-right: 20px;
+        height: vw(460);
+        width: 100%;
+        background: url("~@/assets/images/topic/carmidr.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        padding: vw(20) vw(10) vw(20) vw(30);
+        .line {
+          display: flex;
+          align-items: center;
+          .label {
+            width: vw(128);
+            font-size: vw(18);
+            color: #d0deee;
+          }
+          .value {
+            flex: 1;
+            font-size: vw(18);
+            color: #ffffff;
+            word-break: keep-all;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+  }
+  .screeRight {
+    height: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/dangerTransport/index.vue b/src/views/enterpriseTopic/dangerTransport/index.vue
index 29cb72b..b860916 100644
--- a/src/views/enterpriseTopic/dangerTransport/index.vue
+++ b/src/views/enterpriseTopic/dangerTransport/index.vue
@@ -1,5 +1,397 @@
 <template>
-  <div>
+  <div class="dangerTransport loveflow">
     <!-- 危险品运输 -->
+    <div class="transLeft">
+      <div class="filterBtnWrap" v-for="item in leftList" :key="item.name">
+        <div
+          class="nameWrap"
+          :class="{ nameActive: selectArr.includes(item.id) }"
+          @click="filterClick(item.id)"
+        >
+          <div class="icon"></div>
+          <div class="text">{{ item.name }}</div>
+        </div>
+
+        <div class="total">{{ item.total.toLocaleString() }}</div>
+      </div>
+    </div>
+    <div class="transRight">
+      <div class="flexSpaceBetween">
+        <div class="tableOperator"></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">
+        <el-row :gutter="20">
+          <el-col :span="8" v-for="item in dataSource" :key="item.car">
+            <div class="transCol" @click="gotoPage(item)">
+              <div class="colLeft">
+                <div class="colIcon"></div>
+                <div class="carNum">{{ item.car }}</div>
+                <div class="carType">
+                  <span style="color: #d0deee">车型：</span>
+                  <span>{{ item.type }}</span>
+                </div>
+                <div class="carWType">
+                  <span style="color: #d0deee">危化品类别：</span>
+                  <span>{{ item.wType }}</span>
+                </div>
+                <div class="cmpName">{{ item.cmp }}</div>
+              </div>
+              <div class="colRight">
+                <el-row :gutter="20">
+                  <el-col
+                    :span="12"
+                    class="carInfo"
+                    v-for="info in item.list"
+                    :key="info.name"
+                  >
+                    <div
+                      class="carIcon"
+                      :style="{ backgroundImage: 'url(' + info.icon + ')' }"
+                    ></div>
+                    <div class="carNameWrap">
+                      <div class="carName">{{ info.name }}</div>
+                      <div class="carValue">({{ info.total }})</div>
+                    </div>
+                  </el-col></el-row
+                >
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <gMainTable
+        ref="gMainTable"
+        :tableData="dataSource"
+        :columns="columns"
+        rowKey="id"
+        :pagination="ipagination"
+        @pageSizeChange="handlePageSizeChange"
+        @currentPageChange="handleCurrentPageChange"
+      >
+      </gMainTable>
+    </div>
   </div>
 </template>
+<script>
+import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
+
+export default {
+  mixins: [tableListMixins],
+  data() {
+    return {
+      leftList: [
+        {
+          name: "车辆超载",
+          total: 1254,
+          id: "1",
+        },
+        {
+          name: "车辆闯禁",
+          total: 1254,
+          id: "2",
+        },
+        {
+          name: "车辆超速",
+          total: 1254,
+          id: "3",
+        },
+        {
+          name: "疲劳驾驶",
+          total: 1254,
+          id: "4",
+        },
+        {
+          name: "未按车道行驶",
+          total: 1254,
+          id: "5",
+        },
+        {
+          name: "车辆异常驻留",
+          total: 1254,
+          id: "6",
+        },
+        {
+          name: "GPS离线",
+          total: 1254,
+          id: "7",
+        },
+        {
+          name: "交通事故",
+          total: 1254,
+          id: "8",
+        },
+      ],
+      selectArr: ["1", "2", "3", "4", "5", "6", "7"],
+      columns: [
+        {
+          prop: "name",
+          label: "姓名",
+        },
+      ],
+      disableMixinCreated: true,
+    };
+  },
+  created() {
+    for (let i = 0; i < 20; i++) {
+      this.dataSource.push({
+        car: "浙B123" + i,
+        type: "重型" + i,
+        wType: "危化品" + i,
+        cmp: "兴达化工有限公司" + i,
+        list: [
+          {
+            name: "车辆超载",
+            total: 1254,
+            id: "1",
+            icon: require("@/assets/images/topic/c1.png"),
+          },
+          {
+            name: "车辆闯禁",
+            total: 1254,
+            id: "2",
+            icon: require("@/assets/images/topic/c2.png"),
+          },
+          {
+            name: "车辆超速",
+            total: 1254,
+            id: "3",
+            icon: require("@/assets/images/topic/c3.png"),
+          },
+          {
+            name: "疲劳驾驶",
+            total: 1254,
+            id: "4",
+            icon: require("@/assets/images/topic/c4.png"),
+          },
+          {
+            name: "未按车道行驶",
+            total: 1254,
+            id: "5",
+            icon: require("@/assets/images/topic/c5.png"),
+          },
+          {
+            name: "车辆异常驻留",
+            total: 1254,
+            id: "6",
+            icon: require("@/assets/images/topic/c6.png"),
+          },
+          {
+            name: "GPS离线",
+            total: 1254,
+            id: "7",
+            icon: require("@/assets/images/topic/c7.png"),
+          },
+          {
+            name: "交通事故",
+            total: 1254,
+            id: "8",
+            icon: require("@/assets/images/topic/c8.png"),
+          },
+        ],
+      });
+    }
+  },
+  methods: {
+    filterClick(id) {
+      if (this.selectArr.includes(id)) {
+        this.selectArr = this.selectArr.filter((item) => item != id);
+      } else {
+        this.selectArr.push(id);
+      }
+    },
+    gotoPage(item) {
+      this.$router.push({
+        path: "/topic/dangerTransport/carDetail",
+        query: {
+          car: item.car,
+        },
+      });
+    },
+  },
+};
+</script>
+<style lang="less">
+.dangerTransport {
+  padding: 16px;
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  .transLeft {
+    width: 290px;
+    margin-right: 16px;
+    padding-top: 20px;
+    background: url("~@/assets/images/topic/carnav.png") no-repeat center center;
+    background-size: 100% 100%;
+    .filterBtnWrap {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 30px 0 20px;
+      margin-bottom: 16px;
+      height: 40px;
+      background: url("~@/assets/images/topic/carcheck.png") no-repeat center
+        center;
+      background-size: 100% 100%;
+      font-size: 14px;
+      color: #ffffff;
+      .nameWrap {
+        display: flex;
+        align-items: center;
+        padding-left: 6px;
+
+        .icon {
+          width: 18px;
+          height: 18px;
+          margin-right: 6px;
+          background: url("~@/assets/images/topic/uncheck.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+        }
+        .text {
+          font-size: 18px;
+          color: #ffffff;
+        }
+        &.nameActive {
+          padding-left: 0;
+          .icon {
+            width: 32px;
+            height: 30px;
+            margin-right: 0;
+            background: url("~@/assets/images/topic/check.png") no-repeat center
+              center;
+            background-size: 100% 100%;
+          }
+        }
+        &:hover {
+          cursor: pointer;
+          opacity: 0.8;
+        }
+      }
+      .total {
+        font-size: 18px;
+        color: #ffffff;
+      }
+    }
+  }
+  .transRight {
+    padding: 16px;
+    flex: 1;
+    height: 100%;
+    background: url("~@/assets/images/topic/carb.png") no-repeat center center;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+
+    .tableWrap {
+      overflow-y: scroll;
+      height: calc(100% - 90px);
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .transCol {
+        height: 256px;
+        background: url("~@/assets/images/topic/col.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+        display: flex;
+        margin-bottom: 16px;
+        .colLeft {
+          padding: 14px;
+          font-size: 14px;
+          color: #ffffff;
+          .colIcon {
+            background: url("~@/assets/images/topic/cari.png") no-repeat center
+              center;
+            background-size: 100% 100%;
+            width: 80px;
+            height: 80px;
+          }
+          .carNum {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 14px;
+            width: 134px;
+            height: 42px;
+            background: url("~@/assets/images/topic/carn.png") no-repeat center
+              center;
+            background-size: 100% 100%;
+          }
+          .carType {
+            margin-bottom: 14px;
+          }
+          .carWType {
+            margin-bottom: 14px;
+          }
+          .cmpName {
+            margin-bottom: 10px;
+          }
+        }
+        .colRight {
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+          color: #e3fffc;
+          .carInfo {
+            display: flex;
+            align-items: center;
+            .carIcon {
+              width: 56px;
+              height: 54px;
+            }
+            .carNameWrap {
+              display: flex;
+              align-items: center;
+              height: 42px;
+              width: 130px;
+              background: linear-gradient(
+                86deg,
+                rgba(255, 255, 255, 0) 0%,
+                rgba(255, 255, 255, 0.21) 100%
+              );
+              .carName {
+                margin-right: 4px;
+              }
+              .carValue {
+              }
+            }
+          }
+        }
+        &:hover {
+          cursor: pointer;
+          background: url("~@/assets/images/topic/aCol.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          .colLeft {
+            .carNum {
+              background: url("~@/assets/images/topic/caran.png") no-repeat
+                center center;
+              background-size: 100% 100%;
+            }
+          }
+        }
+      }
+    }
+
+    .el-table {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/inSecurity/index.vue b/src/views/enterpriseTopic/inSecurity/index.vue
index 8a31a7d..45967b5 100644
--- a/src/views/enterpriseTopic/inSecurity/index.vue
+++ b/src/views/enterpriseTopic/inSecurity/index.vue
@@ -1,5 +1,249 @@
 <template>
-  <div>
-    <!-- 内部治安 -->
+  <div class="inSecurityContent loveflow">
+    <div class="inSecurityPanel">
+      <div class="flexSpaceBetween">
+        <div class="tableOperator"></div>
+        <div class="searchWrap">
+          <el-form :inline="true" :model="queryParam" class="demo-form-inline">
+            <el-form-item label="企业类型">
+              <el-select v-model="queryParam.region" placeholder="企业类型">
+                <el-option label="类型一" value="shanghai"></el-option>
+                <el-option label="类型二" value="beijing"></el-option>
+              </el-select>
+            </el-form-item>
+            <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="inSecurityTableWrap">
+        <div class="inSecurityTable">
+          <el-row :gutter="20">
+            <el-col
+              class="mb16"
+              :span="8"
+              v-for="item in dataSource"
+              :key="item.id"
+            >
+              <div class="inSecurityThead">{{ item.cmy }}</div>
+              <div class="inSecurityTbody">
+                <div class="line">
+                  <div class="item">
+                    <div class="label">信用代码：</div>
+                    <div class="value">{{ item.phone }}</div>
+                  </div>
+                  <div class="item">
+                    <div class="label">企业类型：</div>
+                    <div class="value">{{ item.qyT }}</div>
+                  </div>
+                </div>
+                <div class="line">
+                  <div class="item">
+                    <div class="label">注册地址：</div>
+                    <div class="value">{{ item.address }}</div>
+                  </div>
+                </div>
+                <div class="line">
+                  <div class="item">
+                    <div class="label">经营范围：</div>
+                    <div class="value">{{ item.address }}</div>
+                  </div>
+                </div>
+                <div class="line mt30">
+                  <div class="item">
+                    <div class="label">内部治安：</div>
+                    <div class="value">
+                      <div
+                        class="zaCard"
+                        v-for="info in item.cardList"
+                        :key="info.name"
+                      >
+                        {{ info.name }}({{ info.value || 0 }})
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="line mt30">
+                  <div class="item">
+                    <div class="label">内部管理：</div>
+                    <div class="value">
+                      <div
+                        class="glCard"
+                        v-for="info in item.cardList"
+                        :key="info.name"
+                      >
+                        {{ info.name }}({{ info.value || 0 }})
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="line mt30">
+                  <div class="item">
+                    <div class="label">异常信息：</div>
+                    <div class="value">
+                      <div
+                        class="ycCard"
+                        v-for="info in item.cardList"
+                        :key="info.name"
+                      >
+                        {{ info.name }}({{ info.value || 0 }})
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+
+      <div class="tableWrap">
+        <gMainTable
+          ref="gMainTable"
+          :tableData="dataSource"
+          :columns="columns"
+          rowKey="id"
+          :pagination="ipagination"
+          @pageSizeChange="handlePageSizeChange"
+          @currentPageChange="handleCurrentPageChange"
+        >
+        </gMainTable>
+      </div>
+    </div>
   </div>
 </template>
+<script>
+import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
+
+export default {
+  mixins: [tableListMixins],
+  data() {
+    return {
+      columns: [
+        {
+          prop: "name",
+          label: "姓名",
+        },
+      ],
+    };
+  },
+};
+</script>
+<style lang="less" scoped>
+.inSecurityContent {
+  padding: 16px;
+  height: 100%;
+  box-sizing: border-box;
+}
+.inSecurityPanel {
+  padding: 16px;
+  height: 100%;
+  overflow-y: hidden;
+  box-sizing: border-box;
+  background: url("~@/assets/images/topic/stbg.png") no-repeat center center;
+  background-size: 100% 100%;
+
+  .inSecurityTableWrap {
+    height: calc(100% - 90px);
+    .inSecurityTable {
+      height: 100%;
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .inSecurityThead {
+        margin-left: -10px;
+        padding-left: 24px;
+        height: 46px;
+        line-height: 36px;
+        background: url("~@/assets/images/topic/sttop.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+        font-weight: 500;
+        font-size: 16px;
+        color: #edf4ff;
+      }
+      .inSecurityTbody {
+        padding: 16px;
+        margin-top: -10px;
+        height: 344px;
+        background: url("~@/assets/images/topic/stbtm.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+        overflow-y: scroll;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        .line {
+          display: flex;
+          align-items: center;
+          .item {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            margin-bottom: 16px;
+            .label {
+              width: 70px;
+              font-size: 14px;
+              color: #d0deee;
+            }
+            .value {
+              flex: 1;
+              font-size: 14px;
+              color: #ffffff;
+              display: flex;
+              .zaCard {
+                padding: 6px 10px;
+                margin-right: 12px;
+                margin-bottom: 4px;
+                background: url("~@/assets/images/topic/stmd.png") no-repeat
+                  center center;
+                background-size: 100% 100%;
+                font-size: 14px;
+                color: #b5ffe4;
+              }
+              .glCard {
+                padding: 6px 10px;
+                margin-right: 12px;
+                margin-bottom: 4px;
+                background: url("~@/assets/images/topic/stgl.png") no-repeat
+                  center center;
+                background-size: 100% 100%;
+                font-size: 14px;
+                color: #b5ebff;
+              }
+              .ycCard {
+                padding: 6px 10px;
+                margin-right: 12px;
+                margin-bottom: 4px;
+                background: url("~@/assets/images/topic/styc.png") no-repeat
+                  center center;
+                background-size: 100% 100%;
+                font-size: 14px;
+                color: #e3deff;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /deep/.el-table {
+    display: none;
+  }
+}
+</style>