diff --git a/src/assets/images/topic/clzd.png b/src/assets/images/topic/clzd.png
new file mode 100644
index 0000000..587df25
Binary files /dev/null and b/src/assets/images/topic/clzd.png differ
diff --git a/src/assets/images/topic/dpgc.png b/src/assets/images/topic/dpgc.png
new file mode 100644
index 0000000..f3782ed
Binary files /dev/null and b/src/assets/images/topic/dpgc.png differ
diff --git a/src/assets/images/topic/dzmc.png b/src/assets/images/topic/dzmc.png
new file mode 100644
index 0000000..9816d60
Binary files /dev/null and b/src/assets/images/topic/dzmc.png differ
diff --git a/src/assets/images/topic/fbjg.png b/src/assets/images/topic/fbjg.png
new file mode 100644
index 0000000..49d5dd6
Binary files /dev/null and b/src/assets/images/topic/fbjg.png differ
diff --git a/src/assets/images/topic/fbt.png b/src/assets/images/topic/fbt.png
new file mode 100644
index 0000000..72a2165
Binary files /dev/null and b/src/assets/images/topic/fbt.png differ
diff --git a/src/assets/images/topic/fcf.png b/src/assets/images/topic/fcf.png
new file mode 100644
index 0000000..cbf0521
Binary files /dev/null and b/src/assets/images/topic/fcf.png differ
diff --git a/src/assets/images/topic/fdmj.png b/src/assets/images/topic/fdmj.png
new file mode 100644
index 0000000..53a3747
Binary files /dev/null and b/src/assets/images/topic/fdmj.png differ
diff --git a/src/assets/images/topic/jjbj.png b/src/assets/images/topic/jjbj.png
new file mode 100644
index 0000000..18d93a4
Binary files /dev/null and b/src/assets/images/topic/jjbj.png differ
diff --git a/src/assets/images/topic/lydj.png b/src/assets/images/topic/lydj.png
new file mode 100644
index 0000000..5526bc4
Binary files /dev/null and b/src/assets/images/topic/lydj.png differ
diff --git a/src/assets/images/topic/mhq.png b/src/assets/images/topic/mhq.png
new file mode 100644
index 0000000..f6b1575
Binary files /dev/null and b/src/assets/images/topic/mhq.png differ
diff --git a/src/assets/images/topic/rlmj.png b/src/assets/images/topic/rlmj.png
new file mode 100644
index 0000000..370a392
Binary files /dev/null and b/src/assets/images/topic/rlmj.png differ
diff --git a/src/assets/images/topic/rlsxt.png b/src/assets/images/topic/rlsxt.png
new file mode 100644
index 0000000..cf56d3f
Binary files /dev/null and b/src/assets/images/topic/rlsxt.png differ
diff --git a/src/assets/images/topic/rxzj.png b/src/assets/images/topic/rxzj.png
new file mode 100644
index 0000000..eaa1932
Binary files /dev/null and b/src/assets/images/topic/rxzj.png differ
diff --git a/src/assets/images/topic/spjk.png b/src/assets/images/topic/spjk.png
new file mode 100644
index 0000000..40f4b7d
Binary files /dev/null and b/src/assets/images/topic/spjk.png differ
diff --git a/src/assets/images/topic/starfsj.png b/src/assets/images/topic/starfsj.png
new file mode 100644
index 0000000..4b5a5e8
Binary files /dev/null and b/src/assets/images/topic/starfsj.png differ
diff --git a/src/assets/images/topic/strfsj.png b/src/assets/images/topic/strfsj.png
new file mode 100644
index 0000000..896d013
Binary files /dev/null and b/src/assets/images/topic/strfsj.png differ
diff --git a/src/assets/images/topic/stxlr.png b/src/assets/images/topic/stxlr.png
new file mode 100644
index 0000000..03c1c52
Binary files /dev/null and b/src/assets/images/topic/stxlr.png differ
diff --git a/src/assets/images/topic/styjr.png b/src/assets/images/topic/styjr.png
new file mode 100644
index 0000000..5efb13b
Binary files /dev/null and b/src/assets/images/topic/styjr.png differ
diff --git a/src/assets/images/topic/stzbr.png b/src/assets/images/topic/stzbr.png
new file mode 100644
index 0000000..7b01122
Binary files /dev/null and b/src/assets/images/topic/stzbr.png differ
diff --git a/src/assets/images/topic/tss.png b/src/assets/images/topic/tss.png
new file mode 100644
index 0000000..b87ce49
Binary files /dev/null and b/src/assets/images/topic/tss.png differ
diff --git a/src/assets/images/topic/wxpb.png b/src/assets/images/topic/wxpb.png
new file mode 100644
index 0000000..fe24451
Binary files /dev/null and b/src/assets/images/topic/wxpb.png differ
diff --git a/src/assets/images/topic/wxpj.png b/src/assets/images/topic/wxpj.png
new file mode 100644
index 0000000..e6654e6
Binary files /dev/null and b/src/assets/images/topic/wxpj.png differ
diff --git a/src/assets/images/topic/wxpl.png b/src/assets/images/topic/wxpl.png
new file mode 100644
index 0000000..b5c82a9
Binary files /dev/null and b/src/assets/images/topic/wxpl.png differ
diff --git a/src/assets/images/topic/wxps.png b/src/assets/images/topic/wxps.png
new file mode 100644
index 0000000..cfe689a
Binary files /dev/null and b/src/assets/images/topic/wxps.png differ
diff --git a/src/assets/images/topic/xhs.png b/src/assets/images/topic/xhs.png
new file mode 100644
index 0000000..bd37a8d
Binary files /dev/null and b/src/assets/images/topic/xhs.png differ
diff --git a/src/assets/images/topic/zdgwb.png b/src/assets/images/topic/zdgwb.png
new file mode 100644
index 0000000..accecad
Binary files /dev/null and b/src/assets/images/topic/zdgwb.png differ
diff --git a/src/assets/images/topic/zjbj.png b/src/assets/images/topic/zjbj.png
new file mode 100644
index 0000000..f59d2d0
Binary files /dev/null and b/src/assets/images/topic/zjbj.png differ
diff --git a/src/assets/images/topic/zwsb.png b/src/assets/images/topic/zwsb.png
new file mode 100644
index 0000000..d6c15d5
Binary files /dev/null and b/src/assets/images/topic/zwsb.png differ
diff --git a/src/router/routes/enterpriseTopic.js b/src/router/routes/enterpriseTopic.js
index ad55a86..b240e92 100644
--- a/src/router/routes/enterpriseTopic.js
+++ b/src/router/routes/enterpriseTopic.js
@@ -101,6 +101,16 @@ export default [
         },
         component: () => import("@/views/enterpriseTopic/inSecurity"),
       },
+      {
+        path: "/topic/inSecurity/indexDetail",
+        name: "inSecurity",
+        meta: {
+          head: false,
+          title: "内部治安",
+        },
+        component: () =>
+          import("@/views/enterpriseTopic/inSecurity/indexDetail"),
+      },
       {
         path: "/topic/netSafety",
         name: "netSafety",
diff --git a/src/views/enterpriseTopic/components/bar.vue b/src/views/enterpriseTopic/components/bar.vue
new file mode 100644
index 0000000..afa4b36
--- /dev/null
+++ b/src/views/enterpriseTopic/components/bar.vue
@@ -0,0 +1,222 @@
+<template>
+  <div style="height: 100%; width: 100%">
+    <g-chart :echartdata="option"></g-chart>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.setOption();
+  },
+  methods: {
+    setOption() {
+      let dataList = this.chartObj.data;
+      let maxArr = [];
+      let maxValue = 0;
+      let xData = [];
+      let yData = [];
+      let total = 0;
+
+      dataList.forEach((item) => {
+        xData.push(item.name);
+        yData.push(item.value);
+        if (maxValue < item.value) {
+          maxValue = item.value;
+        }
+      });
+      dataList.forEach((item) => {
+        maxArr.push(maxValue);
+        total = total + item.value;
+      });
+      if (!total) {
+        total = 1;
+      }
+
+      this.option = {
+        grid: {
+          left: "14",
+          top: "5%", // 设置条形图的边距
+          right: "0",
+          bottom: "0",
+        },
+        xAxis: {
+          show: false,
+        },
+        yAxis: [
+          {
+            type: "category",
+            inverse: true,
+            data: xData,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                verticalAlign: "bottom",
+                color: "#299CD4",
+                fontSize: 14,
+                fontFamily: "Microsoft YaHei",
+                align: "left",
+                padding: [0, 0, 5, 7],
+                rich: {
+                  index: {
+                    padding: [4, 0, 0, 1],
+                    color: "#ffffff",
+                  },
+                  name: {
+                    padding: [4, 16, 0, 2],
+                    color: "#ffffff",
+                    fontSize: 14,
+                  },
+                  rate: {
+                    align: "right",
+                    color: "rgba(255,255,255,0.9)",
+                    fontSize: 12,
+                  },
+                },
+              },
+              formatter: (name, index) => {
+                const _index = index + 1;
+                if (dataList.length) {
+                  const item = dataList.filter((item) => item.name == name)[0];
+                  return `{index|${_index}.} {name|${name}}`;
+                }
+              },
+            },
+            offset: 0,
+          },
+        ],
+        series: [
+          {
+            // 内
+            type: "bar",
+            barWidth: 6,
+            itemStyle: {
+              color: (params) => {
+                var color = {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 1,
+                  y2: 0,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: this.chartObj.color[0], // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: this.chartObj.color[1], // 100% 处的颜色
+                    },
+                  ],
+                };
+                return color;
+              },
+            },
+            label: {
+              show: false,
+            },
+            data: dataList,
+            z: 2,
+            animationEasing: "elasticOut",
+          },
+          {
+            // 外边框
+            type: "pictorialBar",
+            symbol: "rect",
+            symbolBoundingData: maxValue,
+            barWidth: 1,
+            itemStyle: {
+              barBorderRadius: 10,
+              normal: {
+                color: "none",
+              },
+            },
+            label: {
+              padding: [-20, 0, 0, -30],
+              textStyle: {
+                rich: {
+                  value: {
+                    width: 54,
+                    padding: [4, 10, 0, -60],
+                    color: "#9CE0FF",
+                    fontSize: 14,
+                  },
+                  rate: {
+                    fontSize: 14,
+                    color: "#9CE0FF",
+                  },
+                },
+              },
+              formatter: (params) => {
+                var text = `{value|${params.data}}{rate|${(
+                  (params.data * 100) /
+                  total
+                ).toFixed(0)}%}`; // `{{f|(params.data / total) * 100 + %}`;
+                return text;
+              },
+
+              rich: {
+                a: {
+                  color: "#9CE0FF",
+                  fontSize: 16,
+                  align: "right",
+                },
+              },
+              position: "right",
+              distance: 1, // 向右偏移位置
+              show: true,
+            },
+            data: yData,
+            z: 0,
+            animationEasing: "elasticOut",
+          },
+          {
+            name: "外框",
+            type: "pictorialBar",
+            symbol: "rect",
+            symbolBoundingData: maxValue,
+            barGap: "-100%", // 设置外框粗细
+            data: maxArr,
+            barWidth: 6,
+            itemStyle: {
+              color: "rgba(255,255,255,0.06)", // 填充色
+              label: {
+                // 标签显示位置
+                show: false,
+              },
+            },
+            z: 0,
+          },
+        ],
+      };
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>
diff --git a/src/views/enterpriseTopic/inSecurity/index.vue b/src/views/enterpriseTopic/inSecurity/index.vue
index 45967b5..7253e4f 100644
--- a/src/views/enterpriseTopic/inSecurity/index.vue
+++ b/src/views/enterpriseTopic/inSecurity/index.vue
@@ -37,7 +37,7 @@
               :key="item.id"
             >
               <div class="inSecurityThead">{{ item.cmy }}</div>
-              <div class="inSecurityTbody">
+              <div class="inSecurityTbody" @click="gotoPage(item.cmy)">
                 <div class="line">
                   <div class="item">
                     <div class="label">信用代码：</div>
@@ -60,7 +60,7 @@
                     <div class="value">{{ item.address }}</div>
                   </div>
                 </div>
-                <div class="line mt30">
+                <div class="line mt20">
                   <div class="item">
                     <div class="label">内部治安：</div>
                     <div class="value">
@@ -74,7 +74,7 @@
                     </div>
                   </div>
                 </div>
-                <div class="line mt30">
+                <div class="line mt20">
                   <div class="item">
                     <div class="label">内部管理：</div>
                     <div class="value">
@@ -88,7 +88,7 @@
                     </div>
                   </div>
                 </div>
-                <div class="line mt30">
+                <div class="line mt20">
                   <div class="item">
                     <div class="label">异常信息：</div>
                     <div class="value">
@@ -138,6 +138,16 @@ export default {
       ],
     };
   },
+  methods: {
+    gotoPage(val) {
+      this.$router.push({
+        path: "/topic/inSecurity/indexDetail",
+        query: {
+          cmy: val,
+        },
+      });
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -186,6 +196,10 @@ export default {
         &::-webkit-scrollbar {
           display: none;
         }
+        &:hover {
+          opacity: 0.8;
+          cursor: pointer;
+        }
 
         .line {
           display: flex;
diff --git a/src/views/enterpriseTopic/inSecurity/indexDetail.vue b/src/views/enterpriseTopic/inSecurity/indexDetail.vue
new file mode 100644
index 0000000..cbf4a7d
--- /dev/null
+++ b/src/views/enterpriseTopic/inSecurity/indexDetail.vue
@@ -0,0 +1,572 @@
+<template>
+  <div class="inSecurityDetail">
+    <div class="screenRow screenTopRow">
+      <div class="screenLeft mr18">
+        <colWrap class="mb14" title="企业三防异常分析"></colWrap>
+
+        <colWrap class="" title="技防数据概览">
+          <el-row :gutter="16">
+            <el-col :span="6" v-for="item in jssjList" :key="item.name">
+              <div class="line">
+                <div class="icon">
+                  <img :src="item.icon" />
+                </div>
+                <div class="item">
+                  <div class="name">{{ item.name }}</div>
+                  <div class="value">
+                    {{ item.value }}
+                  </div>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </colWrap>
+      </div>
+      <div class="screenMid mr18"></div>
+      <div class="screenRight">
+        <colWrap class="mb14" title="企业应急预案与应急演练异常分析"></colWrap>
+        <colWrap class="" title="部门检查及系统研判异常分析"></colWrap>
+      </div>
+    </div>
+    <div class="screenRow screenBtmRow">
+      <div class="screenBLeft mr18">
+        <colWrap class="mr18" title="应急预案">
+          <div class="yjYuAn">
+            <div class="line" v-for="(item, index) in yjList" :key="item.name">
+              <div class="item">
+                <div class="icon">{{ index + 1 }}</div>
+                <div class="name">{{ item.name }}</div>
+              </div>
+              <div class="value">{{ item.value.toLocaleString() }}份</div>
+            </div>
+          </div>
+        </colWrap>
+        <colWrap class="" title="人防数据概览">
+          <div class="rfShuJu">
+            <div class="line" v-for="item in zbrList" :key="item.name">
+              <div class="icon">
+                <img :src="item.icon" />
+              </div>
+              <div class="item">
+                <div class="name">{{ item.name }}</div>
+                <div class="value">{{ item.value.toLocaleString() }}</div>
+              </div>
+            </div>
+          </div>
+        </colWrap>
+      </div>
+      <div class="screenBMid mr18">
+        <colWrap class="mr18" title="物防数据概览">
+          <div class="wfsjWrap">
+            <div class="xfsjHead">
+              <div class="xfsjIcon"></div>
+              <div class="xfsjTitle">消防物品</div>
+            </div>
+            <div class="xfsjBody">
+              <el-row :gutter="16">
+                <el-col :span="12" v-for="item in xfwpList" :key="item.name">
+                  <div class="line">
+                    <div class="icon">
+                      <img :src="item.icon" />
+                    </div>
+                    <div class="item">
+                      <div class="name">{{ item.name }}</div>
+                      <div class="value">
+                        {{ item.value.toLocaleString() }}<span>套</span>
+                      </div>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+          <div class="wfsjWrap">
+            <div class="xfsjHead">
+              <div class="xfsjIcon"></div>
+              <div class="xfsjTitle">反恐防爆</div>
+            </div>
+            <div class="xfsjBody">
+              <el-row :gutter="16">
+                <el-col :span="12" v-for="item in fkfbList" :key="item.name">
+                  <div class="line">
+                    <div class="icon">
+                      <img :src="item.icon" />
+                    </div>
+                    <div class="item">
+                      <div class="name">{{ item.name }}</div>
+                      <div class="value">
+                        {{ item.value.toLocaleString() }}<span>套</span>
+                      </div>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </colWrap>
+        <colWrap class="" title="重点岗位人员身份">
+          <div class="zdgwWrap">
+            <div class="line" v-for="item in zdgwList" :key="item.name">
+              <div class="icon">
+                <img :src="item.icon" />
+              </div>
+              <div class="name">
+                {{ item.name }}
+              </div>
+            </div>
+          </div>
+        </colWrap>
+      </div>
+      <div class="screenBRight">
+        <colWrap class="mr18" title="案件信息">
+          <barOne :chartObj="barOneObj"></barOne>
+        </colWrap>
+        <colWrap class="" title="企业整改异常分析"></colWrap>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import colWrap from "../components/colWrap.vue";
+import barOne from "../components/bar.vue";
+
+export default {
+  components: { colWrap, barOne },
+  data() {
+    return {
+      title: "",
+      yjList: [
+        {
+          name: "消防应急预案",
+          value: 32145,
+        },
+        {
+          name: "食品卫生应急预案",
+          value: 32145,
+        },
+        {
+          name: "停水停电应急预案",
+          value: 32145,
+        },
+        {
+          name: "防范被盗应急预案",
+          value: 32145,
+        },
+        {
+          name: "自然灾害应急预案",
+          value: 32145,
+        },
+        {
+          name: "作业事故应急预案",
+          value: 32145,
+        },
+        {
+          name: "反恐防暴应急预案",
+          value: 32145,
+        },
+      ],
+      zbrList: [
+        {
+          name: "值班人员",
+          value: 32145,
+          icon: require("@/assets/images/topic/stzbr.png"),
+        },
+        {
+          name: "巡逻人员",
+          value: 32145,
+          icon: require("@/assets/images/topic/stxlr.png"),
+        },
+        {
+          name: "应急处理人员",
+          value: 32145,
+          icon: require("@/assets/images/topic/styjr.png"),
+        },
+      ],
+      xfwpList: [
+        {
+          name: "消火栓",
+          value: 32145,
+          icon: require("@/assets/images/topic/xhs.png"),
+        },
+        {
+          name: "灭火器",
+          value: 32145,
+          icon: require("@/assets/images/topic/mhq.png"),
+        },
+        {
+          name: "逃生绳",
+          value: 32145,
+          icon: require("@/assets/images/topic/tss.png"),
+        },
+        {
+          name: "防毒面具",
+          value: 32145,
+          icon: require("@/assets/images/topic/fdmj.png"),
+        },
+      ],
+      fkfbList: [
+        {
+          name: "防爆桶",
+          value: 32145,
+          icon: require("@/assets/images/topic/fbt.png"),
+        },
+        {
+          name: "盾牌钢叉",
+          value: 32145,
+          icon: require("@/assets/images/topic/dpgc.png"),
+        },
+        {
+          name: "防刺服",
+          value: 32145,
+          icon: require("@/assets/images/topic/fcf.png"),
+        },
+        {
+          name: "防爆警棍",
+          value: 32145,
+          icon: require("@/assets/images/topic/fbjg.png"),
+        },
+      ],
+      jssjList: [
+        {
+          name: "视频监控",
+          value: 32145,
+          icon: require("@/assets/images/topic/spjk.png"),
+        },
+        {
+          name: "人行闸机",
+          value: 32145,
+          icon: require("@/assets/images/topic/rxzj.png"),
+        },
+        {
+          name: "楼宇对讲",
+          value: 32145,
+          icon: require("@/assets/images/topic/lydj.png"),
+        },
+        {
+          name: "人脸门禁",
+          value: 32145,
+          icon: require("@/assets/images/topic/rlmj.png"),
+        },
+        {
+          name: "电子脉冲",
+          value: 32145,
+          icon: require("@/assets/images/topic/dzmc.png"),
+        },
+        {
+          name: "人脸摄像头",
+          value: 32145,
+          icon: require("@/assets/images/topic/rlsxt.png"),
+        },
+        {
+          name: "车辆闸道",
+          value: 32145,
+          icon: require("@/assets/images/topic/rlmj.png"),
+        },
+        {
+          name: "指纹识别",
+          value: 32145,
+          icon: require("@/assets/images/topic/zwsb.png"),
+        },
+        {
+          name: "周界报警",
+          value: 32145,
+          icon: require("@/assets/images/topic/zjbj.png"),
+        },
+        {
+          name: "紧急报警",
+          value: 32145,
+          icon: require("@/assets/images/topic/jjbj.png"),
+        },
+      ],
+      zdgwList: [
+        {
+          name: "危险品领用人员",
+          icon: require("@/assets/images/topic/wxpl.png"),
+        },
+        {
+          name: "危险品保管人员",
+          icon: require("@/assets/images/topic/wxpb.png"),
+        },
+        {
+          name: "危险品使用人员",
+          icon: require("@/assets/images/topic/wxps.png"),
+        },
+        {
+          name: "危险品技术资质人员",
+          icon: require("@/assets/images/topic/wxpj.png"),
+        },
+      ],
+      barOneObj: {
+        data: [
+          { name: "民事案件", value: 1123 },
+          { name: "刑事案件", value: 808 },
+          { name: "行政案件", value: 703 },
+          { name: "经济案件", value: 613 },
+          { name: "非诉讼案件", value: 933 },
+        ],
+        color: ["#FFDE9C", "#0E9FF7"],
+      },
+    };
+  },
+  mounted() {
+    this.title = this.$route.query.cmy;
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.inSecurityDetail {
+  height: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  overflow: hidden;
+  .screenRow {
+    display: flex;
+    .screenLeft {
+      height: 100%;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      /*       .el-row {
+        margin-top: -10px;
+        padding-top: vw(6);
+        background-color: rgba(108, 151, 149, 0.2);
+      } */
+      .line {
+        display: flex;
+        align-items: center;
+        height: vw(50);
+        padding: vw(2) vw(6);
+        margin-bottom: vw(6);
+        background: url("~@/assets/images/topic/strfsj.png") no-repeat center
+          center;
+        background-size: 100% 100%;
+        .icon {
+          margin-right: 6px;
+          width: vw(34);
+          height: vw(36);
+          img {
+            width: 100%;
+          }
+        }
+        .item {
+          .name {
+            margin-bottom: 2px;
+            font-weight: 400;
+            font-size: vw(14);
+            color: #d0deee;
+          }
+
+          .value {
+            font-weight: 400;
+            font-size: vw(18);
+            color: #ffffff;
+          }
+        }
+      }
+    }
+    .screenMid {
+      flex: 1;
+    }
+    .screenRight {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+    .screenBLeft {
+      flex: 1;
+      display: flex;
+      .yjYuAn {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        justify-content: space-between;
+        height: 100%;
+        padding-bottom: 12px;
+        box-sizing: border-box;
+        .line {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: vw(48);
+          padding: 0 12px;
+          .item {
+            display: flex;
+            align-items: center;
+            .icon {
+              display: flex;
+              justify-content: center;
+              margin-right: 4px;
+              width: vw(18);
+              height: vw(18);
+              font-size: 14px;
+              font-weight: 600;
+              font-size: vw(14);
+              color: #9cffc8;
+              border: solid 1px #9cffc8;
+              border-radius: 2px;
+            }
+            .name {
+              font-weight: 400;
+              font-size: vw(14);
+              color: #ffffff;
+            }
+          }
+          .value {
+            font-weight: 400;
+            font-size: vw(16);
+            color: #9cffc8;
+          }
+          &:nth-child(odd) {
+            background-color: rgba(108, 128, 151, 0.1);
+          }
+        }
+      }
+      .rfShuJu {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        justify-content: space-between;
+        height: 100%;
+        padding-bottom: 12px;
+        box-sizing: border-box;
+        .line {
+          display: flex;
+          align-items: center;
+          height: vw(96);
+          padding: 0 12px;
+          background: url("~@/assets/images/topic/strfsj.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          .icon {
+            margin-right: 4px;
+            width: vw(76);
+            height: vw(76);
+            img {
+              width: 100%;
+            }
+          }
+          .item {
+            .name {
+              margin-bottom: 8px;
+              font-weight: 400;
+              font-size: vw(16);
+              color: #ffffff;
+            }
+
+            .value {
+              font-weight: 400;
+              font-size: vw(18);
+              color: #f3fff9;
+            }
+          }
+          &:hover {
+          }
+        }
+      }
+    }
+    .screenBMid {
+      flex: 1;
+      display: flex;
+      .wfsjWrap {
+        height: 50%;
+        display: flex;
+        flex-direction: column;
+        .xfsjHead {
+          display: flex;
+          align-items: center;
+          height: 30px;
+          background: url("~@/assets/images/topic/fsT.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          .xfsjIcon {
+            width: 34px;
+            height: 36px;
+            background: url("~@/assets/images/topic/fsIcon.png") no-repeat
+              center center;
+            background-size: 100% 100%;
+          }
+          .xfsjTitle {
+            font-size: 14px;
+            color: #d9e7ff;
+          }
+        }
+        .xfsjBody {
+          flex: 1;
+          .line {
+            display: flex;
+            align-items: center;
+            margin-top: vw(10);
+            height: vw(60);
+            padding: 0 12px;
+            background: url("~@/assets/images/topic/strfsj.png") no-repeat
+              center center;
+            background-size: 100% 100%;
+            .icon {
+              margin-right: 6px;
+              width: vw(34);
+              height: vw(36);
+              img {
+                width: 100%;
+              }
+            }
+            .item {
+              .name {
+                margin-bottom: 2px;
+                font-weight: 400;
+                font-size: vw(14);
+                color: #d0deee;
+              }
+
+              .value {
+                font-weight: 400;
+                font-size: vw(16);
+                color: #ffffff;
+                span {
+                  font-size: 12px;
+                }
+              }
+            }
+          }
+        }
+      }
+      .zdgwWrap {
+        padding-bottom: 12px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+        .line {
+          height: vw(70);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: url("~@/assets/images/topic/zdgwb.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          .icon {
+            width: vw(35);
+            width: vw(34);
+            margin-right: vw(6);
+          }
+          .name {
+            font-size: vw(16);
+            color: #ffffff;
+          }
+        }
+      }
+    }
+    .screenBRight {
+      flex: 1;
+      display: flex;
+    }
+  }
+  .screenTopRow {
+    height: 54%;
+    padding-bottom: 14px;
+  }
+  .screenBtmRow {
+    height: 46%;
+  }
+}
+</style>