diff --git a/src/assets/images/topic/anabry.png b/src/assets/images/topic/anabry.png
new file mode 100644
index 0000000..9c79fe2
Binary files /dev/null and b/src/assets/images/topic/anabry.png differ
diff --git a/src/assets/images/topic/anclzd.png b/src/assets/images/topic/anclzd.png
new file mode 100644
index 0000000..0cd1af9
Binary files /dev/null and b/src/assets/images/topic/anclzd.png differ
diff --git a/src/assets/images/topic/andzmc.png b/src/assets/images/topic/andzmc.png
new file mode 100644
index 0000000..8f6dbb8
Binary files /dev/null and b/src/assets/images/topic/andzmc.png differ
diff --git a/src/assets/images/topic/anjjbj.png b/src/assets/images/topic/anjjbj.png
new file mode 100644
index 0000000..3361199
Binary files /dev/null and b/src/assets/images/topic/anjjbj.png differ
diff --git a/src/assets/images/topic/anlydj.png b/src/assets/images/topic/anlydj.png
new file mode 100644
index 0000000..0a9119d
Binary files /dev/null and b/src/assets/images/topic/anlydj.png differ
diff --git a/src/assets/images/topic/anpieb.png b/src/assets/images/topic/anpieb.png
new file mode 100644
index 0000000..8ae4f40
Binary files /dev/null and b/src/assets/images/topic/anpieb.png differ
diff --git a/src/assets/images/topic/anrfb.png b/src/assets/images/topic/anrfb.png
new file mode 100644
index 0000000..ce10dd6
Binary files /dev/null and b/src/assets/images/topic/anrfb.png differ
diff --git a/src/assets/images/topic/anrlmj.png b/src/assets/images/topic/anrlmj.png
new file mode 100644
index 0000000..7d5cb65
Binary files /dev/null and b/src/assets/images/topic/anrlmj.png differ
diff --git a/src/assets/images/topic/anrlsxt.png b/src/assets/images/topic/anrlsxt.png
new file mode 100644
index 0000000..9226c94
Binary files /dev/null and b/src/assets/images/topic/anrlsxt.png differ
diff --git a/src/assets/images/topic/anrxzj.png b/src/assets/images/topic/anrxzj.png
new file mode 100644
index 0000000..cb11218
Binary files /dev/null and b/src/assets/images/topic/anrxzj.png differ
diff --git a/src/assets/images/topic/anspjk.png b/src/assets/images/topic/anspjk.png
new file mode 100644
index 0000000..e558246
Binary files /dev/null and b/src/assets/images/topic/anspjk.png differ
diff --git a/src/assets/images/topic/anxlr.png b/src/assets/images/topic/anxlr.png
new file mode 100644
index 0000000..02045dc
Binary files /dev/null and b/src/assets/images/topic/anxlr.png differ
diff --git a/src/assets/images/topic/anycdw.png b/src/assets/images/topic/anycdw.png
new file mode 100644
index 0000000..6f9b344
Binary files /dev/null and b/src/assets/images/topic/anycdw.png differ
diff --git a/src/assets/images/topic/anyjr.png b/src/assets/images/topic/anyjr.png
new file mode 100644
index 0000000..bdd3f20
Binary files /dev/null and b/src/assets/images/topic/anyjr.png differ
diff --git a/src/assets/images/topic/anzbr.png b/src/assets/images/topic/anzbr.png
new file mode 100644
index 0000000..fe7669c
Binary files /dev/null and b/src/assets/images/topic/anzbr.png differ
diff --git a/src/assets/images/topic/anzjbj.png b/src/assets/images/topic/anzjbj.png
new file mode 100644
index 0000000..07bc7a4
Binary files /dev/null and b/src/assets/images/topic/anzjbj.png differ
diff --git a/src/assets/images/topic/anzwsb.png b/src/assets/images/topic/anzwsb.png
new file mode 100644
index 0000000..73693d1
Binary files /dev/null and b/src/assets/images/topic/anzwsb.png differ
diff --git a/src/assets/images/topic/zlhzsg.png b/src/assets/images/topic/zlhzsg.png
new file mode 100644
index 0000000..0ac64d6
Binary files /dev/null and b/src/assets/images/topic/zlhzsg.png differ
diff --git a/src/assets/images/topic/zlqtsg.png b/src/assets/images/topic/zlqtsg.png
new file mode 100644
index 0000000..ace2c8b
Binary files /dev/null and b/src/assets/images/topic/zlqtsg.png differ
diff --git a/src/assets/images/topic/zlrypx.png b/src/assets/images/topic/zlrypx.png
new file mode 100644
index 0000000..09ef473
Binary files /dev/null and b/src/assets/images/topic/zlrypx.png differ
diff --git a/src/assets/images/topic/zlxfwg.png b/src/assets/images/topic/zlxfwg.png
new file mode 100644
index 0000000..ea790e6
Binary files /dev/null and b/src/assets/images/topic/zlxfwg.png differ
diff --git a/src/assets/images/topic/zlxzbj.png b/src/assets/images/topic/zlxzbj.png
new file mode 100644
index 0000000..0c811d9
Binary files /dev/null and b/src/assets/images/topic/zlxzbj.png differ
diff --git a/src/assets/images/topic/zlyxcs.png b/src/assets/images/topic/zlyxcs.png
new file mode 100644
index 0000000..5e0441f
Binary files /dev/null and b/src/assets/images/topic/zlyxcs.png differ
diff --git a/src/assets/images/topic/zlzyzx.png b/src/assets/images/topic/zlzyzx.png
new file mode 100644
index 0000000..35bfced
Binary files /dev/null and b/src/assets/images/topic/zlzyzx.png differ
diff --git a/src/loveflow/assets/index.less b/src/loveflow/assets/index.less
index 0d3903a..9d8033b 100644
--- a/src/loveflow/assets/index.less
+++ b/src/loveflow/assets/index.less
@@ -34,6 +34,9 @@
 .mr14 {
   margin-right: 14px;
 }
+.mr16 {
+  margin-right: 16px;
+}
 .mr18 {
   margin-right: 18px;
 }
diff --git a/src/loveflow/components/echart/pie/five.vue b/src/loveflow/components/echart/pie/five.vue
index 5275626..4a6f64d 100644
--- a/src/loveflow/components/echart/pie/five.vue
+++ b/src/loveflow/components/echart/pie/five.vue
@@ -25,6 +25,9 @@ export default {
   },
   methods: {
     setOption() {
+      let temp = this.getHeight();
+      let height = parseInt(temp / 3) - 20;
+      console.log(height);
       let total = 0;
       let data = [];
       let barChartList = this.chartObj.data;
@@ -72,8 +75,8 @@ export default {
         legend: {
           data: legend,
           orient: "vertical",
-          bottom: "2%",
-          left: "10%",
+          bottom: "10%",
+          left: "center",
           icon: "diamond",
           itemHeight: 8,
           itemWidth: 8,
@@ -87,12 +90,11 @@ export default {
             fontSize: 12,
             rich: {
               name: {
-                width: 80,
+                width: parseInt(height) - 20,
               },
               rate: {
-                width: 60,
                 color: "#FFFFFF;",
-                fontSize: 16,
+                fontSize: 14,
               },
             },
           },
@@ -109,12 +111,12 @@ export default {
               type: "image",
               style: {
                 image: bgImg,
-                width: 110,
-                height: 110,
+                width: parseInt(height),
+                height: parseInt(height),
                 zIndex: 1,
               },
               left: "center",
-              top: 50,
+              top: parseInt(height / 2),
             },
           ],
         },
@@ -122,10 +124,8 @@ export default {
           {
             name: this.chartObj.name,
             type: "pie",
-            radius: [60, 80],
-            width: 220,
-            height: 220,
-            center: ["center", 105],
+            radius: [parseInt(height / 2) + 10, parseInt(height / 2) + 20],
+            center: ["center", parseInt(height)],
             clockWise: false,
             hoverAnimation: false,
             left: "center",
@@ -142,7 +142,7 @@ export default {
                   color: "#D0DEEE",
                 },
                 c_style: {
-                  fontSize: 20,
+                  fontSize: 18,
                   fontWeight: 500,
                   color: "#D0DEEE",
                 },
diff --git a/src/loveflow/components/echart/pie/four.vue b/src/loveflow/components/echart/pie/four.vue
index 204ca86..8606d80 100644
--- a/src/loveflow/components/echart/pie/four.vue
+++ b/src/loveflow/components/echart/pie/four.vue
@@ -25,6 +25,9 @@ export default {
   },
   methods: {
     setOption() {
+      let temp = this.getHeight();
+      let height = parseInt(temp / 3) - 20;
+      console.log(height);
       let total = 0;
       let data = [];
       let barChartList = this.chartObj.data;
@@ -72,8 +75,8 @@ export default {
         legend: {
           data: legend,
           orient: "vertical",
-          bottom: "2%",
-          left: "10%",
+          bottom: "10%",
+          left: "center",
           icon: "diamond",
           itemHeight: 8,
           itemWidth: 8,
@@ -87,12 +90,11 @@ export default {
             fontSize: 12,
             rich: {
               name: {
-                width: 80,
+                width: parseInt(height) - 20,
               },
               rate: {
-                width: 60,
                 color: "#FFFFFF;",
-                fontSize: 16,
+                fontSize: 14,
               },
             },
           },
@@ -109,23 +111,23 @@ export default {
               type: "image",
               style: {
                 image: bgImg,
-                width: 110,
-                height: 110,
+                width: parseInt(height),
+                height: parseInt(height),
                 zIndex: 1,
               },
               left: "center",
-              top: 50,
+              top: parseInt(height / 2),
             },
             {
               type: "image",
               style: {
                 image: iconImg,
-                width: 60,
-                height: 60,
+                width: parseInt(height / 2),
+                height: parseInt(height / 2),
                 zIndex: 2,
               },
               left: "center",
-              top: 74,
+              top: parseInt(height) - 20,
             },
           ],
         },
@@ -133,10 +135,9 @@ export default {
           {
             name: this.chartObj.name,
             type: "pie",
-            radius: [60, 80],
-            width: 220,
-            height: 220,
-            center: ["center", 105],
+            radius: [parseInt(height / 2) + 10, parseInt(height / 2) + 20],
+
+            center: ["center", parseInt(height)],
             clockWise: false,
             hoverAnimation: false,
             left: "center",
diff --git a/src/loveflow/components/echart/radar/three.vue b/src/loveflow/components/echart/radar/three.vue
index 8bf7d5e..cfb5912 100644
--- a/src/loveflow/components/echart/radar/three.vue
+++ b/src/loveflow/components/echart/radar/three.vue
@@ -33,7 +33,7 @@ export default {
         },
         radar: {
           center: ["50%", "50%"], // 外圆的位置
-          radius: "55%",
+          radius: "45%",
           name: {
             textStyle: {
               color: "#D0DEEE",
diff --git a/src/views/enterpriseTopic/antiAttack/bar.vue b/src/views/enterpriseTopic/antiAttack/bar.vue
new file mode 100644
index 0000000..8dd7653
--- /dev/null
+++ b/src/views/enterpriseTopic/antiAttack/bar.vue
@@ -0,0 +1,219 @@
+<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, 0],
+                rich: {
+                  index: {
+                    padding: [4, 0, 0, 8],
+                    color: "#ffffff",
+                  },
+                  name: {
+                    padding: [4, 8, 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, 10, 0, -40],
+              textStyle: {
+                rich: {
+                  value: {
+                    width: 54,
+                    padding: [4, 10, 0, -60],
+                    color: "#9CE0FF",
+                    fontSize: 14,
+                  },
+                  rate: {
+                    fontSize: 14,
+                    color: "#9CE0FF",
+                  },
+                },
+              },
+              formatter: (params) => {
+                var text = `{rate|${params.data}次}`; // `{{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/antiAttack/dpie.vue b/src/views/enterpriseTopic/antiAttack/dpie.vue
new file mode 100644
index 0000000..6390bb3
--- /dev/null
+++ b/src/views/enterpriseTopic/antiAttack/dpie.vue
@@ -0,0 +1,334 @@
+<template>
+  <div class="dpiePanel">
+    <div class="dpieLegend">
+      <div class="dpieRow" v-for="item in data" :key="item.name">
+        <div class="flex-center">
+          <div
+            class="dpieIcon"
+            :style="{ backgroundColor: item.itemStyle.color }"
+          ></div>
+          <div class="dpieName">{{ item.name }}</div>
+        </div>
+        <div class="dpieValue">{{ item.value }}家</div>
+        <div class="dpieRate">{{ item.rate }}</div>
+      </div>
+    </div>
+    <div class="flex-center" style="flex: 1">
+      <div class="dpiebg">
+        <div ref="dpieWrapRef" class="dpieWrap"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+export default {
+  props: {
+    chartObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      data: [],
+      total: 1,
+    };
+  },
+  mounted() {
+    this.data = this.chartObj.data;
+    this.total = 1;
+    for (let i = 0; i < this.data.length; i++) {
+      this.total += this.data[i].value;
+    }
+
+    this.echartsPie();
+  },
+  methods: {
+    echartsPie() {
+      let optionsData = this.data;
+      let hoveredIndex = "";
+      let chartDom = this.$refs["dpieWrapRef"];
+      let myChart = echarts.init(chartDom);
+      const getPie3D = (pieData, internalDiameterRatio) => {
+        //internalDiameterRatio:透明的空心占比
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let k = 1 / 5;
+        pieData.sort((a, b) => {
+          return b.value - a.value;
+        });
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value;
+          let seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k,
+            },
+            radius: "90%",
+            center: ["50%", "50%"],
+          };
+
+          if (typeof pieData[i].itemStyle != "undefined") {
+            let itemStyle = {};
+            typeof pieData[i].itemStyle.color != "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            typeof pieData[i].itemStyle.opacity != "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value;
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+          );
+          startValue = endValue;
+        }
+        let boxHeight = getHeight3D(series, 6); //通过传参设定3d饼/环的高度，26代表26px
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          // backgroundColor: "#fff",
+          tooltip: {
+            show: false,
+          },
+          legend: {
+            show: false,
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: boxHeight, //圆环的高度
+            left: 0,
+            top: -20, //3d饼图的位置
+            viewControl: {
+              //3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 24, //角度
+              distance: 120, //调整视角到主体的距离，类似调整zoom
+              rotateSensitivity: 0, //设置为0无法旋转
+              zoomSensitivity: 0, //设置为0无法缩放
+              panSensitivity: 0, //设置为0无法平移
+              autoRotate: false, //自动旋转
+            },
+          },
+          series: series,
+        };
+        return option;
+      };
+
+      //获取3d丙图的最高扇区的高度
+      const getHeight3D = (series, height) => {
+        series.sort((a, b) => {
+          return b.pieData.value - a.pieData.value;
+        });
+        return (height * 50) / series[0].pieData.value;
+      };
+
+      // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+      const getParametricEquation = (
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        h
+      ) => {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== "undefined" ? k : 1 / 3;
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+          x: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+          y: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1;
+            }
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+          },
+        };
+      };
+
+      let option = getPie3D(this.data, 0.8);
+      //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      option.series.push({
+        // name: "pie3d",
+        type: "pie",
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{c}%",
+        },
+        // startAngle: -25, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["80%", "80%"],
+        center: ["50%", "50%"], //指示线的位置
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      option && myChart.setOption(option);
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.dpiePanel {
+  position: relative;
+  flex: 1;
+  height: 100%;
+  .dpieLegend {
+    position: absolute;
+    top: vw(150);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    .dpieRow {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      margin-bottom: vw(16);
+      height: vw(30);
+      width: 70%;
+      .dpieIcon {
+        margin-right: 6px;
+        width: 8px;
+        height: 8px;
+        transform: rotate(45deg);
+      }
+      .dpieName {
+        margin-right: 18px;
+        font-size: 12px;
+        color: #d0deee;
+      }
+      .dpieValue {
+        font-size: 16px;
+        color: #ffffff;
+      }
+      .dpieRate {
+        font-size: 16px;
+        color: #ffffff;
+      }
+    }
+  }
+}
+.dpieWrap {
+  width: 220px;
+  height: 110px;
+}
+.dpiebg {
+  margin-top: vw(20);
+  width: 220px;
+  height: 110px;
+  background: url("~@/assets/images/screen/dpie.png");
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: flex-start;
+}
+</style>
diff --git a/src/views/enterpriseTopic/antiAttack/index.vue b/src/views/enterpriseTopic/antiAttack/index.vue
index 8f70495..3bbca73 100644
--- a/src/views/enterpriseTopic/antiAttack/index.vue
+++ b/src/views/enterpriseTopic/antiAttack/index.vue
@@ -4,38 +4,431 @@
     <div class="screenRow screenTopRow">
       <div class="screenLeft mr18">
         <div class="screenLeftTop">
-          <colWrap class="mb14" title="人防数据"> </colWrap>
+          <colWrap class="mb14" title="人防数据">
+            <div class="rfsjWrap">
+              <div class="line mb8">
+                <div class="left mr18">
+                  <div class="label">安保人员数</div>
+                  <div class="total">
+                    {{ total.toLocaleString() }}
+                    <span class="label">人</span>
+                  </div>
+                </div>
+                <div class="right">
+                  <div class="label">异常单位数</div>
+                  <div class="total">
+                    {{ total.toLocaleString() }}
+                    <span class="label">家</span>
+                  </div>
+                </div>
+              </div>
+              <div class="line lineBtm">
+                <div class="item" v-for="item in rfsjList" :key="item.name">
+                  <div class="icon">
+                    <img :src="item.icon" />
+                  </div>
+                  <div class="nameWrap">
+                    <div class="name">{{ item.name }}</div>
+                    <div class="name">{{ item.value }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </colWrap>
         </div>
         <div class="screenLeftBtm">
-          <colWrap class="mb14" title="物防数据"> </colWrap>
+          <colWrap class="mb14" title="物防数据">
+            <div class="wfsjWrap">
+              <div class="wfsjTop">
+                <sub-col title="消防物品"></sub-col>
+                <div class="wfsjBody">
+                  <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="wfsjBtm">
+                <sub-col title="反恐防暴物品"></sub-col>
+                <div class="wfsjBody">
+                  <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>
+          </colWrap>
         </div>
       </div>
       <div class="screenMid mr18">
-        <colWrap class="mb14" title="重点人员出入特定区域预警"> </colWrap>
+        <colWrap class="mb14" title="重点人员出入特定区域预警">
+          <div class="zdryWrap">
+            <div class="zdryLeft">
+              <sub-col title="重点人员出入特定区域次数排行"></sub-col>
+              <div class="zdryChart">
+                <barWrap :chartObj="tmlObj"></barWrap>
+              </div>
+            </div>
+            <div class="zdryRight">
+              <sub-col title="各类重点人员出入次数排行"></sub-col>
+              <div class="zdryChart">
+                <barWrap :chartObj="tmrObj"></barWrap>
+              </div>
+            </div>
+          </div>
+        </colWrap>
       </div>
       <div class="screenRight">
-        <colWrap class="mb14" title="企业隐患分析"> </colWrap>
-        <colWrap class="mb14" title="应急预案制定异常分析"> </colWrap>
+        <colWrap class="mb14" title="企业隐患分析">
+          <dpie :chartObj="trObj"></dpie>
+        </colWrap>
+        <colWrap class="mb14" title="应急预案制定异常分析">
+          <dpie :chartObj="mrObj"></dpie>
+        </colWrap>
       </div>
     </div>
     <div class="screenRow screenBtmRow">
       <div class="screenBLeft mr18">
-        <colWrap class="" title="反恐目标单位检查数据"> </colWrap>
+        <colWrap class="" title="反恐目标单位检查数据">
+          <div class="fkmbWrap">
+            <div class="line">
+              <div class="item">
+                <pie-wrap :chartObj="mllObj"></pie-wrap>
+              </div>
+              <div class="item">
+                <pie-wrap :chartObj="mlmObj"></pie-wrap>
+              </div>
+              <div class="item">
+                <pie-wrap :chartObj="mlrObj"></pie-wrap>
+              </div>
+              <div class="item">
+                <pie-wrap :chartObj="mllObj"></pie-wrap>
+              </div>
+            </div>
+            <div class="line">
+              <div class="item">
+                <pie-wrap :chartObj="mllObj"></pie-wrap>
+              </div>
+              <div class="item">
+                <pie-wrap :chartObj="mlmObj"></pie-wrap>
+              </div>
+              <div class="item">
+                <pie-wrap :chartObj="mlrObj"></pie-wrap>
+              </div>
+              <div class="item">
+                <pie-wrap :chartObj="mllObj"></pie-wrap>
+              </div>
+            </div>
+          </div>
+        </colWrap>
       </div>
       <div class="screenBRight">
-        <colWrap class="" title="技防数据"> </colWrap>
+        <colWrap class="" title="技防数据">
+          <div class="jfsjWrap">
+            <div class="jfsjRow">
+              <div
+                class="item"
+                v-for="item in jssjListT"
+                :key="item.name"
+                :style="{ backgroundImage: 'url(' + item.icon + ')' }"
+              >
+                <div class="value">
+                  {{ item.value }}
+                </div>
+                <div class="name">{{ item.name }}</div>
+              </div>
+            </div>
+            <div class="jfsjRow">
+              <div
+                class="item"
+                v-for="item in jssjListB"
+                :key="item.name"
+                :style="{ backgroundImage: 'url(' + item.icon + ')' }"
+              >
+                <div class="name">{{ item.name }}</div>
+                <div class="value">
+                  {{ item.value }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <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>
   </div>
 </template>
 <script>
 import colWrap from "../components/colWrap.vue";
+import subCol from "../components/subCol.vue";
+import pieWrap from "./pie.vue";
+import barWrap from "./bar.vue";
+import dpie from "./dpie.vue";
 
 export default {
   components: {
     colWrap,
+    pieWrap,
+    subCol,
+    barWrap,
+    dpie,
+  },
+  data() {
+    return {
+      total: 123423,
+      rfsjList: [
+        {
+          name: "值班人员",
+          value: 32145,
+          icon: require("@/assets/images/topic/anzbr.png"),
+        },
+        {
+          name: "巡逻人员",
+          value: 32145,
+          icon: require("@/assets/images/topic/anxlr.png"),
+        },
+        {
+          name: "应急处理人员",
+          value: 32145,
+          icon: require("@/assets/images/topic/anyjr.png"),
+        },
+      ],
+      mllObj: {
+        name: "人防异常单位占比",
+        total: 3400,
+        point: 1000,
+        icon: require("@/assets/images/topic/pie1b.png"),
+        color: ["#57F0FF", "#37A1CC", "#08FAC4"],
+      },
+      mlmObj: {
+        name: "物防异常单位占比",
+        total: 3400,
+        point: 1000,
+        icon: require("@/assets/images/topic/pie2b.png"),
+        color: ["#FFCE57", "#EB9104", "#FAC608"],
+      },
+      mlrObj: {
+        name: "技防异常单位占比",
+        total: 3400,
+        point: 1000,
+        icon: require("@/assets/images/topic/pie4b.png"),
+        color: ["#FFE3E3", "#FF2C2C", "#FF6D6D"],
+      },
+      tmlObj: {
+        data: [
+          { name: "石化工业园区周边1", value: 1123 },
+          { name: "石化工业园区周边2", value: 808 },
+          { name: "石化工业园区周边3", value: 703 },
+          { name: "石化工业园区周边4", value: 613 },
+          { name: "石化工业园区周边5", value: 433 },
+          { name: "石化工业园区周边6", value: 333 },
+          { name: "石化工业园区周边7", value: 233 },
+          { name: "石化工业园区周边8", value: 133 },
+          { name: "石化工业园区周边9", value: 533 },
+          { name: "石化工业园区周边10", value: 733 },
+        ],
+        color: ["#FFDE9C", "#0E9FF7"],
+      },
+      tmrObj: {
+        data: [
+          { name: "重性精神病人", value: 123 },
+          { name: "非访人员", value: 808 },
+          { name: "退役重点人员", value: 703 },
+          { name: "个人极端人员", value: 613 },
+          { name: "前科人员", value: 933 },
+          { name: "家暴人员", value: 613 },
+          { name: "酗酒人员", value: 433 },
+          { name: "其他重点人员", value: 333 },
+        ],
+        color: ["#fac508", "#ee8b56"],
+      },
+
+      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"),
+        },
+      ],
+
+      trObj: {
+        data: [
+          {
+            name: "无隐患企业家",
+            value: 900,
+            rate: "90%",
+            itemStyle: {
+              color: "#2B82F3",
+            },
+          },
+          {
+            name: "安全隐患企业",
+            value: 100,
+            rate: "10%",
+            itemStyle: {
+              color: "#E15A4E",
+            },
+          },
+        ],
+      },
+      mrObj: {
+        data: [
+          {
+            name: "已制定安全预案",
+            value: 900,
+            rate: "90%",
+            itemStyle: {
+              color: "#2B82F3",
+            },
+          },
+          {
+            name: "未制定安全预案",
+            value: 100,
+            rate: "10%",
+            itemStyle: {
+              color: "#E15A4E",
+            },
+          },
+        ],
+      },
+      jssjListT: [
+        {
+          name: "视频监控",
+          value: 32145,
+          icon: require("@/assets/images/topic/anspjk.png"),
+        },
+        {
+          name: "人行闸机",
+          value: 32145,
+          icon: require("@/assets/images/topic/anrxzj.png"),
+        },
+        {
+          name: "楼宇对讲",
+          value: 32145,
+          icon: require("@/assets/images/topic/anlydj.png"),
+        },
+        {
+          name: "人脸门禁",
+          value: 32145,
+          icon: require("@/assets/images/topic/anrlmj.png"),
+        },
+        {
+          name: "电子脉冲",
+          value: 32145,
+          icon: require("@/assets/images/topic/andzmc.png"),
+        },
+      ],
+      jssjListB: [
+        {
+          name: "人脸摄像头",
+          value: 32145,
+          icon: require("@/assets/images/topic/anrlsxt.png"),
+        },
+        {
+          name: "车辆闸道",
+          value: 32145,
+          icon: require("@/assets/images/topic/anrlmj.png"),
+        },
+        {
+          name: "指纹识别",
+          value: 32145,
+          icon: require("@/assets/images/topic/anzwsb.png"),
+        },
+        {
+          name: "周界报警",
+          value: 32145,
+          icon: require("@/assets/images/topic/anzjbj.png"),
+        },
+        {
+          name: "紧急报警",
+          value: 32145,
+          icon: require("@/assets/images/topic/anjjbj.png"),
+        },
+      ],
+    };
   },
-  data() {},
 };
 </script>
 <style lang="scss" scoped>
@@ -55,18 +448,161 @@ export default {
       .screenLeftTop {
         display: flex;
         flex-direction: column;
-        height: 26%;
+        height: vw(200);
+        .rfsjWrap {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-evenly;
+          .line {
+            display: flex;
+            justify-content: space-between;
+            flex: 1;
+            margin-bottom: 10px;
+            .label {
+              font-size: vw(12);
+              color: #fff5e3;
+            }
+            .total {
+              font-size: vw(20);
+              color: #fffbe3;
+            }
+            .left {
+              padding: 0 vw(12);
+              flex: 1;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              height: 100%; //vw(40);
+              background: url("~@/assets/images/topic/anabry.png") no-repeat
+                center center;
+              background-size: 100% 100%;
+            }
+            .right {
+              padding: 0 vw(12);
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              flex: 1;
+              height: 100%;
+              background: url("~@/assets/images/topic/anycdw.png") no-repeat
+                center center;
+              background-size: 100% 100%;
+            }
+            .item {
+              flex: 1;
+              display: flex;
+              align-items: center;
+              padding: 0 vw(12);
+              .icon {
+                margin-right: 4px;
+                width: vw(32);
+                height: vw(32);
+                img {
+                  width: 100%;
+                }
+              }
+
+              .name {
+                font-size: vw(14);
+                color: #d0deee;
+              }
+              .value {
+                font-size: vw(16);
+                color: #ffffff;
+              }
+            }
+          }
+          .lineBtm {
+            width: 100%;
+            flex: 1.1; //vw(52);
+            background: url("~@/assets/images/topic/anrfb.png") no-repeat center
+              center;
+            background-size: 100% 100%;
+          }
+        }
       }
       .screenLeftBtm {
         display: flex;
         flex-direction: column;
-        height: 74%;
+        height: calc(100% - 9.8vw);
+        .wfsjWrap {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          .wfsjTop {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+          }
+          .wfsjBtm {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+          }
+          .wfsjBody {
+            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;
+                  }
+                }
+              }
+            }
+          }
+        }
       }
     }
     .screenMid {
       flex: 1;
       display: flex;
       flex-direction: column;
+      .zdryWrap {
+        height: 100%;
+        display: flex;
+        padding-bottom: 12px;
+        .zdryLeft {
+          margin-right: 14px;
+
+          flex: 1;
+          background: rgba(108, 151, 149, 0.2);
+        }
+        .zdryRight {
+          flex: 1;
+          background: rgba(108, 151, 149, 0.2);
+        }
+        .zdryChart {
+          height: calc(100% - 30px);
+        }
+      }
     }
     .screenRight {
       flex: 1;
@@ -86,13 +622,59 @@ export default {
     .screenBRight {
       flex: 1;
       display: flex;
+      .jfsjWrap {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 10px;
+        .jfsjRow {
+          flex: 1;
+          display: flex;
+          justify-content: space-between;
+          .item {
+            height: vw(80);
+            width: vw(124);
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 100% 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+            align-items: center;
+            .name {
+              font-size: vw(14);
+              color: #d0deee;
+            }
+            .value {
+              font-weight: 500;
+              font-size: vw(16);
+              color: #e3feff;
+            }
+          }
+        }
+      }
     }
   }
   .screenTopRow {
-    height: 68%;
+    height: calc(100% - 200px);
   }
   .screenBtmRow {
-    height: 32%;
+    height: 200px;
+    .fkmbWrap {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      .line {
+        flex: 1;
+        display: flex;
+        .item {
+          flex: 1;
+          /* background: url("~@/assets/images/topic/anpieb.png") no-repeat center
+            center;
+          background-size: 100% 100%; */
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/src/views/enterpriseTopic/antiAttack/pie.vue b/src/views/enterpriseTopic/antiAttack/pie.vue
new file mode 100644
index 0000000..c8079d8
--- /dev/null
+++ b/src/views/enterpriseTopic/antiAttack/pie.vue
@@ -0,0 +1,157 @@
+<template>
+  <div style="height: 100%; width: 100%" id="pieWrap">
+    <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 point = this.chartObj.point; //环形图的具体  百分比
+      let total = this.chartObj.total;
+
+      this.option = {
+        tooltip: {
+          show: false,
+        },
+        title: {
+          // 圆环中央文字
+          show: true, // 是否显示
+          text: this.chartObj.name,
+          textStyle: { fontSize: 10, color: "#D0DEEE" },
+          /* subtextStyle: {
+            fontSize: 18,
+            fontWeight: 500,
+            lineHeight: 10,
+            color: "#E3FEFF",
+          }, */
+          textAlign: "center",
+          left: "47%",
+          top: 55,
+        },
+        color: this.chartObj.color,
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              style: {
+                image: this.chartObj.icon,
+                width: 80,
+                height: 80,
+                zIndex: 1,
+              },
+              left: "center",
+              top: -10,
+            },
+          ],
+        },
+        series: [
+          {
+            // name: '访问来源1',
+            type: "pie",
+            radius: [15, 20],
+            center: ["center", 30],
+            data: [
+              {
+                value: 100, //对应显示的部分数据即100%
+                itemStyle: {
+                  normal: {
+                    borderRadius: 15,
+                    color: "#1B2221",
+                  },
+                },
+              },
+            ],
+            label: {
+              position: "center",
+              formatter: ((100 * point) / total).toFixed(0) + "%",
+              color: this.chartObj.color[0],
+              fontSize: 12,
+            },
+            labelLine: {
+              show: false,
+            },
+          },
+          {
+            // name: '访问来源2',
+            type: "pie",
+            showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
+           radius: [15, 20],
+            center: ["center", 30],
+            avoidLabelOverlap: true, // 标签重叠时进行调整
+            data: [
+              {
+                value: (point / total) * 100,
+                itemStyle: {
+                  normal: {
+                    borderRadius: 15, //圆角
+                    color: {
+                      // 设置渐变色
+                      type: "linear",
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: this.chartObj.color[1], // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: this.chartObj.color[2], // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+
+              {
+                value: 120, //百分比
+                itemStyle: {
+                  normal: {
+                    color: "rgba(255,255,255,0)", //透明
+                  },
+                },
+              },
+            ],
+            label: {
+              show: false,
+              position: "center",
+            },
+            labelLine: {
+              show: false,
+            },
+          },
+        ],
+      };
+    },
+    getHeight() {
+      let div = document.getElementById("pieWrap");
+      return div.clientHeight;
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>
diff --git a/src/views/enterpriseTopic/components/pCard.vue b/src/views/enterpriseTopic/components/pCard.vue
index 41a8270..770fd38 100644
--- a/src/views/enterpriseTopic/components/pCard.vue
+++ b/src/views/enterpriseTopic/components/pCard.vue
@@ -29,8 +29,7 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: vw(256);
-  height: vw(275);
+  height: 100%;
   background: url("~@/assets/images/topic/ct.png") no-repeat center center;
   background-size: 100% 100%;
 
diff --git a/src/views/enterpriseTopic/components/pieOne.vue b/src/views/enterpriseTopic/components/pieOne.vue
new file mode 100644
index 0000000..070fdc2
--- /dev/null
+++ b/src/views/enterpriseTopic/components/pieOne.vue
@@ -0,0 +1,164 @@
+<template>
+  <div style="height: 100%; width: 100%" id="pieWrap">
+    <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 point = this.chartObj.point; //环形图的具体  百分比
+      let total = this.chartObj.total;
+      this.option = {
+        title: {
+          // 圆环中央文字
+          show: true, // 是否显示
+          text: this.chartObj.name,
+          textStyle: {
+            fontSize: 14,
+            color: "#D0DEEE",
+          },
+          subtextStyle: {
+            fontSize: 16,
+            fontWeight: 500,
+            lineHeight: 10,
+            color: "#E3FEFF",
+          },
+          left: "center",
+          top: "36%",
+        },
+        series: [
+          {
+            // name: '访问来源1',
+            type: "pie",
+            radius: ["50%", "60%"],
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: 80, //对应显示的部分数据即100%
+                itemStyle: {
+                  normal: {
+                    borderRadius: 15,
+                    color: "#1B2221",
+                  },
+                },
+              },
+              {
+                value: 20,
+                itemStyle: {
+                  normal: {
+                    color: "rgba(255,255,255,0)", //透明
+                  },
+                },
+              },
+            ],
+            startAngle: -127, //起始角度，支持范围[0, 360]。
+            minAngle: 0, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
+            label: {
+              show: false,
+              position: "center",
+            },
+          },
+          {
+            // name: '访问来源2',
+            type: "pie",
+            showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
+            radius: ["50%", "60%"],
+            avoidLabelOverlap: true, // 标签重叠时进行调整
+            center: ["50%", "50%"],
+            data: [
+              {
+                value: (point / total) * 100 * 0.8,
+                itemStyle: {
+                  normal: {
+                    borderRadius: 15, //圆角
+                    color: {
+                      // 设置渐变色
+                      type: "linear",
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#37A1CC", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#08FAC4", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+              {
+                value: ((total - point) / total) * 100 * 0.8, //百分比
+                itemStyle: {
+                  normal: {
+                    borderRadius: 15, //圆角
+                    color: "rgba(255,255,255,0)", //透明
+                  },
+                },
+              },
+              {
+                value: 20, //百分比
+                itemStyle: {
+                  normal: {
+                    color: "rgba(255,255,255,0)", //透明
+                  },
+                },
+              },
+            ],
+            startAngle: -127, //起始角度，支持范围[0, 360]。
+            // minAngle: 0, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
+            label: {
+              show: true,
+              position: "center",
+              formatter: "{b_style|{b}}\n{c_style|{c}分}",
+              rich: {
+                b_style: {
+                  padding: [0, 0, 10, 0],
+                  fontSize: 12,
+                  fontWeight: 400,
+                  color: "#D0DEEE",
+                },
+                c_style: {
+                  fontSize: 16,
+                  fontWeight: 500,
+                  color: "#D0DEEE",
+                },
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+          },
+        ],
+      };
+    },
+  },
+  watch: {
+    chartObj: {
+      handler(newval) {
+        this.setOption();
+      },
+      deep: true,
+      // immediate: true,
+    },
+  },
+};
+</script>
diff --git a/src/views/enterpriseTopic/components/subCol.vue b/src/views/enterpriseTopic/components/subCol.vue
new file mode 100644
index 0000000..07da73b
--- /dev/null
+++ b/src/views/enterpriseTopic/components/subCol.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="subColWrap">
+    <div class="subColIcon"></div>
+    <div class="subColName">{{ title }}</div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: () => {
+        return "";
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+
+.subColWrap {
+  display: flex;
+  align-items: center;
+  height: vw(30);
+  background: url("~@/assets/images/topic/fsT.png") no-repeat center center;
+  background-size: 100% 100%;
+  .subColIcon {
+    width: vw(34);
+    height: vw(36);
+    background: url("~@/assets/images/topic/fsIcon.png") no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .subColName {
+    font-size: vw(14);
+    color: #d9e7ff;
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/dangerTransport/index.vue b/src/views/enterpriseTopic/dangerTransport/index.vue
index b860916..277e7f7 100644
--- a/src/views/enterpriseTopic/dangerTransport/index.vue
+++ b/src/views/enterpriseTopic/dangerTransport/index.vue
@@ -226,14 +226,15 @@ export default {
   },
 };
 </script>
-<style lang="less">
+<style lang="scss">
+@import "@/loveflow/assets/index.scss";
 .dangerTransport {
   padding: 16px;
   display: flex;
   height: 100%;
   overflow: hidden;
   .transLeft {
-    width: 290px;
+    width: vw(280);
     margin-right: 16px;
     padding-top: 20px;
     background: url("~@/assets/images/topic/carnav.png") no-repeat center center;
@@ -242,13 +243,13 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 0 30px 0 20px;
+      padding: 0 vw(20) 0 vw(20);
       margin-bottom: 16px;
       height: 40px;
       background: url("~@/assets/images/topic/carcheck.png") no-repeat center
         center;
       background-size: 100% 100%;
-      font-size: 14px;
+      font-size: vw(14);
       color: #ffffff;
       .nameWrap {
         display: flex;
@@ -284,13 +285,13 @@ export default {
         }
       }
       .total {
-        font-size: 18px;
+        font-size: vw(18);
         color: #ffffff;
       }
     }
   }
   .transRight {
-    padding: 16px;
+    padding: vw(16);
     flex: 1;
     height: 100%;
     background: url("~@/assets/images/topic/carb.png") no-repeat center center;
@@ -312,61 +313,63 @@ export default {
         display: flex;
         margin-bottom: 16px;
         .colLeft {
-          padding: 14px;
-          font-size: 14px;
+          padding: vw(14);
+          font-size: vw(14);
           color: #ffffff;
           .colIcon {
             background: url("~@/assets/images/topic/cari.png") no-repeat center
               center;
             background-size: 100% 100%;
-            width: 80px;
-            height: 80px;
+            width: vw(80);
+            height: vw(80);
           }
           .carNum {
             display: flex;
             align-items: center;
             justify-content: center;
-            margin-bottom: 14px;
-            width: 134px;
-            height: 42px;
+            margin-bottom: vw(14);
+            width: vw(132);
+            height: vw(40);
             background: url("~@/assets/images/topic/carn.png") no-repeat center
               center;
             background-size: 100% 100%;
           }
           .carType {
-            margin-bottom: 14px;
+            margin-bottom: vw(14);
           }
           .carWType {
-            margin-bottom: 14px;
+            margin-bottom: vw(14);
           }
           .cmpName {
-            margin-bottom: 10px;
+            margin-bottom: vw(10);
           }
         }
         .colRight {
+          padding-right: vw(12);
           display: flex;
           align-items: center;
-          font-size: 12px;
+          font-size: vw(12);
           color: #e3fffc;
           .carInfo {
             display: flex;
             align-items: center;
+
             .carIcon {
-              width: 56px;
-              height: 54px;
+              width: vw(56);
+              height: vw(54);
             }
             .carNameWrap {
               display: flex;
               align-items: center;
-              height: 42px;
-              width: 130px;
+              height: vw(42);
+              width: vw(130);
               background: linear-gradient(
                 86deg,
                 rgba(255, 255, 255, 0) 0%,
                 rgba(255, 255, 255, 0.21) 100%
               );
               .carName {
-                margin-right: 4px;
+                margin-right: vw(4);
               }
               .carValue {
               }
@@ -375,9 +378,9 @@ export default {
         }
         &:hover {
           cursor: pointer;
-          background: url("~@/assets/images/topic/aCol.png") no-repeat center
+          /* background: url("~@/assets/images/topic/aCol.png") no-repeat center
             center;
-          background-size: 100% 100%;
+          background-size: 100% 100%; */
           .colLeft {
             .carNum {
               background: url("~@/assets/images/topic/caran.png") no-repeat
diff --git a/src/views/enterpriseTopic/inSecurity/indexDetail.vue b/src/views/enterpriseTopic/inSecurity/indexDetail.vue
index 0a1c11d..a025789 100644
--- a/src/views/enterpriseTopic/inSecurity/indexDetail.vue
+++ b/src/views/enterpriseTopic/inSecurity/indexDetail.vue
@@ -110,7 +110,7 @@
               <div class="xfsjTitle">消防物品</div>
             </div>
             <div class="xfsjBody">
-              <el-row :gutter="16">
+              <el-row :gutter="10">
                 <el-col :span="12" v-for="item in xfwpList" :key="item.name">
                   <div class="line">
                     <div class="icon">
@@ -133,7 +133,7 @@
               <div class="xfsjTitle">反恐防爆</div>
             </div>
             <div class="xfsjBody">
-              <el-row :gutter="16">
+              <el-row :gutter="10">
                 <el-col :span="12" v-for="item in fkfbList" :key="item.name">
                   <div class="line">
                     <div class="icon">
@@ -729,12 +729,12 @@ export default {
             align-items: center;
             margin-top: vw(10);
             height: vw(60);
-            padding: 0 12px;
+            padding: 0 vw(12);
             background: url("~@/assets/images/topic/strfsj.png") no-repeat
               center center;
             background-size: 100% 100%;
             .icon {
-              margin-right: 6px;
+              margin-right: vw(6);
               width: vw(34);
               height: vw(36);
               img {
@@ -751,7 +751,7 @@ export default {
 
               .value {
                 font-weight: 400;
-                font-size: vw(16);
+                font-size: vw(14);
                 color: #ffffff;
                 span {
                   font-size: 12px;
diff --git a/src/views/enterpriseTopic/personSafety/index.vue b/src/views/enterpriseTopic/personSafety/index.vue
index e9051d6..1659f39 100644
--- a/src/views/enterpriseTopic/personSafety/index.vue
+++ b/src/views/enterpriseTopic/personSafety/index.vue
@@ -2,7 +2,7 @@
   <div class="enterpriseTopicPanel">
     <!-- 人员安全 -->
     <topicMain @gotoPage="gotoPage()">
-      <div class="enterpriseTopic">
+      <div class="personSafetyWrap">
         <el-tabs v-model="tabindex" @tab-click="tabChange">
           <el-tab-pane
             v-for="item in tabList"
@@ -75,7 +75,7 @@ export default {
   box-sizing: border-box;
   color: #ffffff;
   overflow: hidden;
-  .enterpriseTopic {
+  .personSafetyWrap {
     height: calc(100% - 50px);
     .enterpriseTopicResult {
       margin: 0;
@@ -129,7 +129,7 @@ export default {
           display: flex;
           justify-content: center;
           align-items: center;
-          padding: 0 20px;
+          padding: 0 10px;
           height: 34px;
           font-weight: 400;
           font-size: 14px;
@@ -149,3 +149,12 @@ export default {
   }
 }
 </style>
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.enterpriseTopicPanel {
+  .personSafetyWrap {
+    .enterpriseTopicResult {
+    }
+  }
+}
+</style>
diff --git a/src/views/enterpriseTopic/personSafety/screen.vue b/src/views/enterpriseTopic/personSafety/screen.vue
index e5dddd0..b0f87b1 100644
--- a/src/views/enterpriseTopic/personSafety/screen.vue
+++ b/src/views/enterpriseTopic/personSafety/screen.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="enterpriseTopic">
+  <div class="personSafetyWrap">
     <head-wrap title="人员安全风险评估"></head-wrap>
     <div class="enterpriseTopicBody">
       <div class="screenRow mb18">
@@ -238,7 +238,7 @@ export default {
 </script>
 
 <style lang="less">
-.enterpriseTopic {
+.personSafetyWrap {
   height: 100%;
   background: url("~@/assets/images/topic/allback.png") no-repeat center center;
   background-size: 100% 100%;
@@ -291,7 +291,7 @@ export default {
 </style>
 <style lang="scss" scoped>
 @import "@/loveflow/assets/index.scss";
-.enterpriseTopic {
+.personSafetyWrap {
   .enterpriseTopicBody {
     .screenRow {
       .screenCol {
diff --git a/src/views/enterpriseTopic/screen.vue b/src/views/enterpriseTopic/screen.vue
index 477d681..cdaba02 100644
--- a/src/views/enterpriseTopic/screen.vue
+++ b/src/views/enterpriseTopic/screen.vue
@@ -1,43 +1,210 @@
 <template>
-  <div class="enterpriseTopic">
+  <div class="enterpriseTopicContent">
     <head-wrap title="平安企业专题驾驶舱"></head-wrap>
     <div class="enterpriseTopicBody">
-      <div class="riskRow topRow">
-        <div class="riskCol mr18">
-          <div class="inRow">
-            <div
-              class="sideLtCol mb10"
-              @click="gotoPage('/topic/personSafety/screen')"
-            ></div>
-            <div class="sideLmCol"></div>
+      <div class="screenRow screenRowTop mb14">
+        <div class="mr16 screenColOne">
+          <div class="topCol mb14">
+            <colWrap title="人员安全风险评估"></colWrap>
           </div>
+          <div class="btmCol">
+            <colWrap title="网络安全风险评估">
+              <barOne :chartObj="mlObj"></barOne>
+            </colWrap>
+          </div>
+        </div>
+        <div class="mr16 screenColTwo">
+          <colWrap title="危险物品管理">
+            <div class="topCol"></div>
+            <div class="btmCol">
+              <subCol title="车辆违规预警信息"></subCol>
+            </div>
+          </colWrap>
         </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 class="mr16 screenColThree">
+          <colWrap title="消防安全管理">
+            <div class="topCol">
+              <subCol title="消防设施数据"></subCol>
+            </div>
+            <div class="topCol">
+              <subCol title="企业台账数据"></subCol>
+            </div>
+            <div class="midCol">
+              <subCol title="消防制度执行"></subCol>
+              <div class="xfzdWrap">
+                <div class="item" v-for="item in xfzdList" :key="item.name">
+                  <div class="icon">
+                    <img :src="item.icon" />
+                  </div>
+                  <div class="nameWrap">
+                    <div class="value">{{ item.value }}</div>
+                    <div class="name">{{ item.name }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="btmCol">
+              <subCol title="消防事件发生"> </subCol>
+              <div class="xfsjWrap">
+                <div class="item" v-for="item in xfsjList" :key="item.name">
+                  <div class="icon">
+                    <img :src="item.icon" />
+                  </div>
+                  <div class="nameWrap">
+                    <div class="name">{{ item.name }}</div>
+                    <div class="value">{{ item.value }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </colWrap>
+        </div>
+        <div class="screenColFour">
+          <div class="topCol mb14">
+            <colWrap title="道路安全管理"></colWrap>
+          </div>
+          <div class="btmCol">
+            <colWrap title="内部治安管理">
+              <div class="nbzaWrap">
+                <div class="left">
+                  <subCol title="内部治安安全指数"></subCol>
+                  <pieOne :chartObj="bmjcLeft"></pieOne>
+                </div>
+                <div class="right">
+                  <subCol title="单位内部管理"> </subCol>
+                  <barOne :chartObj="dwnbObj"></barOne>
+                </div>
+              </div>
+            </colWrap>
           </div>
         </div>
       </div>
-      <div class="riskRow btmRow">
-        <div class="riskCol mr18"></div>
-        <div
-          class="riskCol"
-          @click="gotoPage('/topic/listGoods')"
-        ></div>
+      <div class="screenRow screenRowBtm">
+        <colWrap class="mr16" title="防攻击管理">
+          <div class="fgjWrap">
+            <div class="fgjItem" v-for="item in xfsjList" :key="item.name">
+              <div class="item">
+                <p-card :info="item"></p-card>
+              </div>
+            </div>
+          </div>
+        </colWrap>
+        <colWrap title="列管物品安全管理">
+          <div class="lgwpWrap">
+            <div class="leftCol">
+              <subCol title="危险化学品"></subCol>
+            </div>
+            <div class="midCol">
+              <subCol title="放射源物品"></subCol>
+            </div>
+            <div class="rightCol">
+              <subCol title="民用枪支"></subCol>
+            </div>
+          </div>
+        </colWrap>
       </div>
     </div>
   </div>
 </template>
 <script>
 import headWrap from "@/views/home/head.vue";
+import colWrap from "./components/colWrap.vue";
+import subCol from "./components/subCol.vue";
+import pCard from "./components/pCard.vue";
+import barOne from "./antiAttack/bar.vue";
+import pieOne from "./components/pieOne.vue";
 
 export default {
-  components: { headWrap },
+  components: { headWrap, colWrap, subCol, pCard, barOne, pieOne },
   data() {
-    return {};
+    return {
+      xfzdList: [
+        {
+          name: "人员培训率",
+          value: "98%",
+          icon: require("@/assets/images/topic/zlrypx.png"),
+        },
+        {
+          name: "演戏次数",
+          value: "98次",
+          icon: require("@/assets/images/topic/zlyxcs.png"),
+        },
+        {
+          name: "专业知晓度",
+          value: "98%",
+          icon: require("@/assets/images/topic/zlzyzx.png"),
+        },
+      ],
+      xfsjList: [
+        {
+          name: "火灾事故",
+          value: "512",
+          icon: require("@/assets/images/topic/zlhzsg.png"),
+        },
+        {
+          name: "消防违规",
+          value: "568",
+          icon: require("@/assets/images/topic/zlxfwg.png"),
+        },
+        {
+          name: "协助补救",
+          value: "756",
+          icon: require("@/assets/images/topic/zlxzbj.png"),
+        },
+        {
+          name: "其他事故",
+          value: "1218",
+          icon: require("@/assets/images/topic/zlqtsg.png"),
+        },
+      ],
+      fgjList: [
+        {
+          name: "防攻击检查异常数据",
+          value: "512",
+          icon: require("@/assets/images/topic/zlhzsg.png"),
+        },
+        {
+          name: "技防数据异常单位数",
+          value: "568",
+          icon: require("@/assets/images/topic/zlxfwg.png"),
+        },
+        {
+          name: "人防数据异常单位数",
+          value: "756",
+          icon: require("@/assets/images/topic/zlxzbj.png"),
+        },
+        {
+          name: "物防数据异常单位数",
+          value: "1218",
+          icon: require("@/assets/images/topic/zlqtsg.png"),
+        },
+      ],
+      mlObj: {
+        data: [
+          { name: "漏洞整改", value: 123 },
+          { name: "行政案件", value: 808 },
+          { name: "重大网络安全事故", value: 703 },
+          { name: "等保定级评审", value: 613 },
+          { name: "网站应用系统备案", value: 933 },
+          { name: "企业演习/培训", value: 613 },
+        ],
+        color: ["#FFDE9C", "#0E9FF7"],
+      },
+      dwnbObj: {
+        data: [
+          { name: "应急预案", value: 123 },
+          { name: "人防设施", value: 808 },
+          { name: "技防设施", value: 703 },
+          { name: "物防设施", value: 613 },
+        ],
+        color: ["#FFDE9C", "#0E9FF7"],
+      },
+      bmjcLeft: {
+        total: 300,
+        point: 120,
+        name: "安全指数",
+      },
+    };
   },
   methods: {
     gotoPage(path) {
@@ -49,11 +216,14 @@ export default {
 };
 </script>
 
-<style lang="less">
-.enterpriseTopic {
+<style lang="scss" scoped>
+@import "@/loveflow/assets/index.scss";
+.enterpriseTopicContent {
   height: 100%;
   background: url("~@/assets/images/topic/allback.png") no-repeat center center;
   background-size: 100% 100%;
+  box-sizing: border-box;
+  overflow: hidden;
   .enterpriseTopicBody {
     position: absolute;
     top: 100px;
@@ -63,73 +233,170 @@ export default {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-
-    .riskRow {
-      display: flex;
-    }
-    .inRow {
+    box-sizing: border-box;
+    .screenRow {
       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%;
+      .screenColOne {
+        flex: 1;
+        height: 100%;
+        overflow: hidden;
+        .topCol {
+          height: 38%;
+          display: flex;
+        }
+        .btmCol {
+          height: calc(62% - 14px);
+          display: flex;
+        }
       }
-      .sideCol {
-        background: url("~@/assets/images/topic/sideCol.png") no-repeat center
-          center;
-        background-size: 100% 100%;
+      .screenColTwo {
+        flex: 1;
+        height: 100%;
+        display: flex;
       }
-      .sideLtCol {
-        height: vh(248);
-        background: url("~@/assets/images/topic/sideLtCol.png") no-repeat center
-          center;
-        background-size: 100% 100%;
+      .screenColThree {
+        flex: 1;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        .topCol {
+          height: 120px;
+        }
+        .midCol {
+          display: flex;
+          flex-direction: column;
+          .xfzdWrap {
+            height: 68px;
+            margin-bottom: 10px;
+            flex: 1;
+            padding: 4px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: rgba(108, 128, 151, 0.1);
+            .item {
+              display: flex;
+              align-items: center;
+              border: 1px solid #495461;
+              padding: 2px 8px;
+              .icon {
+                margin-right: 4px;
+                width: 37px;
+                height: 40px;
+                img {
+                  width: 100%;
+                }
+              }
+              .nameWrap {
+                .value {
+                  font-size: vw(18);
+                  color: #ffffff;
+                }
+                .name {
+                  font-size: vw(12);
+                  color: #d0deee;
+                }
+              }
+            }
+          }
+        }
+        .btmCol {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          .xfsjWrap {
+            flex: 1;
+            margin-bottom: 10px;
+            flex: 1;
+            padding: vw(12);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: rgba(108, 128, 151, 0.1);
+            .item {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              padding: 2px 8px;
+              .icon {
+                margin-right: 4px;
+                width: vw(78);
+                height: vw(78);
+                img {
+                  width: 100%;
+                }
+              }
+              .nameWrap {
+                .value {
+                  font-size: vw(18);
+                  color: #ffffff;
+                  text-align: center;
+                }
+                .name {
+                  font-size: vw(12);
+                  color: #d0deee;
+                }
+              }
+            }
+          }
+        }
       }
-      .sideLmCol {
+      .screenColFour {
         flex: 1;
-        background: url("~@/assets/images/topic/sideLmCol.png") no-repeat center
-          center;
-        background-size: 100% 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        .topCol {
+          flex: 1;
+          display: flex;
+        }
+        .btmCol {
+          flex: 1;
+          display: flex;
+          .nbzaWrap {
+            height: 100%;
+            display: flex;
+            .left {
+              flex: 1;
+              margin-bottom: 14px;
+              display: flex;
+              flex-direction: column;
+              background-color: rgba(108, 128, 151, 0.1);
+            }
+            .right {
+              margin-bottom: 14px;
+              flex: 1.5;
+              display: flex;
+              flex-direction: column;
+              background-color: rgba(108, 128, 151, 0.1);
+            }
+          }
+        }
       }
     }
-    .btmRow {
-      height: vh(308);
-      .riskCol {
-        background: url("~@/assets/images/topic/bCol.png") no-repeat center
-          center;
-        background-size: 100% 100%;
-      }
+    .screenRowTop {
+      height: 68%;
     }
-  }
-  .riskCol {
-    //padding-left: vw(8);
-    font-size: vh(16);
-
-    .riskName {
-      height: 30px;
-      display: flex;
-      margin-top: vh(6);
-      color: #d9e7ff;
-
-      .riskIcon {
-        width: vh(24);
-        height: vh(24);
+    .screenRowBtm {
+      height: 32%;
+      .fgjWrap {
+        display: flex;
+        height: 100%;
+        .fgjItem {
+          flex: 1;
+        }
+      }
+      .lgwpWrap {
+        display: flex;
+        .leftCol {
+          flex: 1;
+        }
+        .midCol {
+          width: vw(316);
+        }
+        .rightCol {
+          width: vw(206);
+        }
       }
     }
   }