diff --git a/src/assets/images/jz/fgl.png b/src/assets/images/jz/fgl.png
new file mode 100644
index 0000000..d940aaf
Binary files /dev/null and b/src/assets/images/jz/fgl.png differ
diff --git a/src/assets/images/jz/gzf.png b/src/assets/images/jz/gzf.png
new file mode 100644
index 0000000..1b7c284
Binary files /dev/null and b/src/assets/images/jz/gzf.png differ
diff --git a/src/assets/images/jz/phqgz.png b/src/assets/images/jz/phqgz.png
new file mode 100644
index 0000000..41ac1b2
Binary files /dev/null and b/src/assets/images/jz/phqgz.png differ
diff --git a/src/assets/images/jz/wfjw.png b/src/assets/images/jz/wfjw.png
new file mode 100644
index 0000000..af5c818
Binary files /dev/null and b/src/assets/images/jz/wfjw.png differ
diff --git a/src/assets/images/jz/wlsq.png b/src/assets/images/jz/wlsq.png
new file mode 100644
index 0000000..fa8c6d3
Binary files /dev/null and b/src/assets/images/jz/wlsq.png differ
diff --git a/src/assets/images/jz/zzgc.png b/src/assets/images/jz/zzgc.png
new file mode 100644
index 0000000..9394cb8
Binary files /dev/null and b/src/assets/images/jz/zzgc.png differ
diff --git a/src/assets/sy-table/sfmx.png b/src/assets/sy-table/sfmx.png
new file mode 100644
index 0000000..3344cb8
Binary files /dev/null and b/src/assets/sy-table/sfmx.png differ
diff --git a/src/utils/request.js b/src/utils/request.js
index 111c7ed..bb32fc8 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -3,7 +3,7 @@ import { ElMessage } from "element-plus";
 import tools from "@/utils/tools";
 import router from "../router";
 
-axios.defaults.baseURL = 'https://jzzf.longyou.gov.cn:998/'
+// axios.defaults.baseURL = 'https://jzzf.longyou.gov.cn:998/'
 axios.defaults.timeout = 120000;
 
 // HTTP request 拦截器
diff --git a/src/view/dialog/dialogSf.vue b/src/view/dialog/dialogSf.vue
index 2677b48..9750664 100644
--- a/src/view/dialog/dialogSf.vue
+++ b/src/view/dialog/dialogSf.vue
@@ -50,7 +50,7 @@
         >
           <div class="item">
             <div class="item_title">概况模型</div>
-            <div class="item_content">{{ data.content.gkmx }}</div>
+            <div class="item_content">{{ data.content.bz }}</div>
           </div>
           <div class="item" style="margin-top: 20px">
             <div class="item_title">详情描述</div>
@@ -58,19 +58,19 @@
               <div class="item_content_item">
                 <div class="item_content_item_title">输入：</div>
                 <div class="item_content_item_content">
-                  {{ data.content.sr }}
+                  {{ data.content.srsj }}
                 </div>
               </div>
               <div class="item_content_item">
                 <div class="item_content_item_title">对比逻辑：</div>
                 <div class="item_content_item_content">
-                  {{ data.content.dblj }}
+                  {{ data.content.bdlj }}
                 </div>
               </div>
               <div class="item_content_item">
                 <div class="item_content_item_title">输出：</div>
                 <div class="item_content_item_content">
-                  {{ data.content.sc }}
+                  {{ data.content.scjg }}
                 </div>
               </div>
             </div>
@@ -161,7 +161,7 @@ const handle = (current) => {
   <style lang="scss" scoped>
 :deep(.el-dialog) {
   --el-dialog-bg-color: none;
-  --el-dialog-width: 40% !important;
+  --el-dialog-width: 50% !important;
 }
 
 .my-header {
diff --git a/src/view/echarts_jz/eP2.vue b/src/view/echarts_jz/eP2.vue
new file mode 100644
index 0000000..a8b21a4
--- /dev/null
+++ b/src/view/echarts_jz/eP2.vue
@@ -0,0 +1,236 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 330px"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  year: {
+    type: Array,
+    default: () => [],
+  },
+});
+const data = reactive({
+  list: [],
+  year: [],
+  option: {},
+  bg: [],
+});
+//职称结构取数
+
+var rich = {
+  name: {
+    color: "#666666",
+    fontSize: 14,
+    padding: [8, 30, 0, 30],
+    fontWeight: "400",
+    align: "left",
+  },
+  value: {
+    color: "#333",
+    fontSize: 15,
+    padding: [0, 30, 8, 30],
+    fontWeight: "500",
+    align: "left",
+  },
+  percent: {
+    color: "#FFF",
+    align: "right",
+    fontSize: 15,
+    fontWeight: "500",
+    //padding: [0, 5]
+  },
+  hr: {
+    borderColor: "#DFDFDF",
+    width: "100%",
+    borderWidth: 1,
+    height: 0,
+  },
+  cir: {
+    fontSize: 26,
+  },
+};
+var colorList = ["#3BAEFF", "#41EDD5", "#FFC371", "#797AFF"];
+
+const chart = ref(); // 创建DOM引用
+
+const getOption = () => {
+  data.option = {
+    legend: {
+      show: true,
+      width: "80%",
+      top: "5%",
+      textStyle: {
+        inside: true,
+        color: "#9FC3E7",
+        padding: [14, 0, 10, 0],
+        align: "left",
+        verticalAlign: "center",
+        fontSize: 14,
+        rich: {},
+      },
+      // icon: "rect",
+      itemGap: 10,
+      itemWidth: 12,
+      itemHeight: 12,
+      // bottom: '15%'
+    },
+
+    tooltip: {
+      trigger: "item",
+    },
+    series: [
+      {
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              return colorList[params.dataIndex];
+            },
+          },
+        },
+        type: "pie",
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+
+        label: {
+          // 显示标签
+          show: true,
+          // 标签位置
+          position: "outside",
+          // 标签对齐方式
+          // alignTo: "labelLine",
+          // 背景颜色
+          backgroundColor: "transparent",
+          // 高度
+          height: 0,
+          // 宽度
+          width: 0,
+          // 行高
+          lineHeight: 0,
+          // 标签距离标签线的距离
+          distanceToLabelLine: 0,
+          // 边框圆角
+          borderRadius: 3,
+          // 边框宽度
+          borderWidth: 1,
+          // 边框颜色
+          borderColor: "auto",
+          // 内边距
+          padding: [3, -3, 3, -3],
+          // 标签格式化
+          formatter: function (params) {
+            return `{b|${params.value}%}{a|${params.name}}`;
+          },
+          // 富文本样式
+          rich: {
+            // a样式
+            a: {
+              // 内边距
+              padding: [-14, 10, 40, -70],
+              // 字体大小
+              fontSize: "12px",
+              // 字体
+              fontFamily: "MicrosoftYaHei",
+              // 字体颜色
+              color: "#fff",
+            },
+            // b样式
+            b: {
+              // 内边距
+              padding: [0, 10, 55, -70],
+              // 字体大小
+              fontSize: "15px",
+              // 字体
+              fontFamily: "MicrosoftYaHei-Bold, MicrosoftYaHei",
+              // 字体粗细
+              fontWeight: "bold",
+              // 字体颜色
+              color: "#fff",
+            },
+          },
+        },
+        // label: {
+        //   textStyle: {
+        //     color: "white", // 改变标示文字的颜色
+        //     fontSize: 18, //文字大小
+        //   },
+        //   formatter: "{b}:{c}" + "个\n\n",
+        //   borderWidth: 20,
+        //   borderRadius: 4,
+        //   padding: [0, -80],
+        // },
+        labelLine: {
+          normal: {
+            length: 40, // 改变标示线的长度
+            length2: 40,
+            // lineStyle: {
+            //   color: "white", // 改变标示线的颜色
+            // },
+          },
+        },
+        data: [
+          { name: "男", value: 300 },
+          { name: "女", value: 200 },
+        ],
+      },
+      {
+        name: "外边框",
+        type: "pie",
+        tooltip: {
+          show: false,
+        },
+        clockWise: false, //顺时加载
+        hoverAnimation: false, //鼠标移入变大
+        center: ["50%", "50%"], //这里跟上面那组一样即可
+        radius: ["52%", "52%"], //这里根据自己的需要自行调整，但是两个值要一样大哦，如果小于上方设置的最小内圆30%则为内阴影，大于外圆60%则为外阴影
+        label: {
+          normal: {
+            show: false, //重点：此处主要是为了不展示data中的value和name
+          },
+        },
+        data: [
+          {
+            value: 1, //此处的值无所谓是多少
+            name: "", //因为不展示label，可不填
+            itemStyle: {
+              //边框样式，此处我们设置的浅蓝色，颜色可自行修改
+              normal: {
+                borderWidth: 20, //边框宽度
+                // borderColor: colorList, //边框颜色
+                borderColor: "rgba(94, 183, 249,  0.13)", //边框颜色
+              },
+            },
+          },
+        ],
+      },
+    ],
+  };
+};
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    data.year = props.year;
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped></style>
diff --git a/src/view/echarts_jz/eP3.vue b/src/view/echarts_jz/eP3.vue
new file mode 100644
index 0000000..3ebb754
--- /dev/null
+++ b/src/view/echarts_jz/eP3.vue
@@ -0,0 +1,620 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 400px"></div>
+</template>
+
+<script setup>
+import { onMounted, onBeforeMount, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+const emit = defineEmits(["shuju"]);
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+const chart = ref(); // 创建DOM引用
+
+const colors = [
+  {
+    left: "rgba(234, 162, 57, .16)",
+    right: "rgba(234, 162, 57, .6)",
+    top: "rgba(234, 162, 57, 1)",
+    bottom: "rgba(234, 162, 57, .46)",
+    front: "rgba(234, 162, 57, .66)",
+  },
+  {
+    left: "rgba(14, 252, 255, .16)",
+    right: "rgba(14, 252, 255, .6)",
+    top: "rgba(14, 252, 255, 1)",
+    bottom: "rgba(14, 252, 255,  .46)",
+    front: "rgba(14, 252, 255, .66)",
+  },
+];
+// const valueList = [20, 53, 47, 65, 29, 11, 10];
+const data = reactive({
+  list: [],
+  option: {},
+  Max: 20000,
+  valueList: [4504, 16086, 6130, 2844, 4967, 179, 1685, 5010],
+  valueList2: [1181, 2177, 3720, 3711, 4642, 1654, 3395, 5552],
+  xxname: ["2020", "2021", "2022", "2023"],
+});
+// 注册5个面图形:左侧、前面、右面、上面、下面
+//c0:左下角，c1：右下角,c2:右上角，c3：左上角
+// 绘制左侧面-ok rgba(103, 180, 233, 0.04)
+const CubeLeft_1 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x - 40, shape.y];
+    const c1 = [shape.x - 27, shape.y - 14];
+    const c2 = [xAxisPoint[0] - 27, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] - 40, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeFront_1 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x - 40, shape.y];
+    const c1 = [shape.x - 18, shape.y];
+    const c2 = [xAxisPoint[0] - 18, xAxisPoint[1]];
+    const c3 = [xAxisPoint[0] - 40, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeRight_1 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x - 18, shape.y];
+    const c1 = [shape.x - 5, shape.y - 14];
+    const c2 = [xAxisPoint[0] - 5, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] - 18, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeTop_1 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    const c0 = [shape.x - 40, shape.y];
+    const c1 = [shape.x - 18, shape.y];
+    const c2 = [shape.x - 5, shape.y - 14];
+    const c3 = [shape.x - 27, shape.y - 14];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeBottom_1 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+
+    const c0 = [xAxisPoint[0] - 40, xAxisPoint[1]];
+    const c1 = [xAxisPoint[0] - 18, xAxisPoint[1]];
+    const c2 = [xAxisPoint[0] - 5, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] - 27, xAxisPoint[1] - 14];
+
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+
+echarts.graphic.registerShape("CubeLeft_1", CubeLeft_1);
+echarts.graphic.registerShape("CubeFront_1", CubeFront_1);
+echarts.graphic.registerShape("CubeRight_1", CubeRight_1);
+echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
+echarts.graphic.registerShape("CubeBottom_1", CubeBottom_1);
+// -------------------------
+const CubeLeft_2 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x - 0, shape.y];
+    const c1 = [shape.x + 13, shape.y - 14];
+    const c2 = [xAxisPoint[0] + 13, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] - 0, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeFront_2 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x - 0, shape.y];
+    const c1 = [shape.x + 22, shape.y];
+    const c2 = [xAxisPoint[0] + 22, xAxisPoint[1]];
+    const c3 = [xAxisPoint[0] - 0, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeRight_2 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x + 22, shape.y];
+    const c1 = [shape.x + 35, shape.y - 14];
+    const c2 = [xAxisPoint[0] + 35, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] + 22, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeTop_2 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    const c0 = [shape.x - 0, shape.y];
+    const c1 = [shape.x + 22, shape.y];
+    const c2 = [shape.x + 35, shape.y - 14];
+    const c3 = [shape.x + 13, shape.y - 14];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeBottom_2 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+
+    const c0 = [xAxisPoint[0] - 0, xAxisPoint[1]];
+    const c1 = [xAxisPoint[0] + 22, xAxisPoint[1]];
+    const c2 = [xAxisPoint[0] + 35, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] + 13, xAxisPoint[1] - 14];
+
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+
+echarts.graphic.registerShape("CubeLeft_2", CubeLeft_2);
+echarts.graphic.registerShape("CubeFront_2", CubeFront_2);
+echarts.graphic.registerShape("CubeRight_2", CubeRight_2);
+echarts.graphic.registerShape("CubeTop_2", CubeTop_2);
+echarts.graphic.registerShape("CubeBottom_2", CubeBottom_2);
+
+// ------------------------------
+const getOption = () => {
+  data.option = {
+    legend: {
+      data: [
+        "适龄生育妇女",
+        "育龄妇女",
+      ],
+      top: "0%",
+      right: "30%",
+      textStyle: {
+        fontSize: 16,
+        color: "#ffffff",
+      },
+    },
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}:</br>{a0}:{c0}</br>{a1}:{c1}",
+    },
+    grid: {
+      left: 0,
+      right: 0,
+      bottom: 10,
+      top: 40,
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: data.xxname,
+        axisLine: {
+          show: false,
+        },
+        offset: 10,
+
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: "#fff",
+          fontSize: 16,
+          formatter: function (value) {
+            return value.length > 3 ? value.slice(0, 2) + "..." : value;
+          },
+        },
+      },
+      {
+        type: "category",
+        data: data.xxname,
+        axisLine: {
+          show: false,
+        },
+        offset: 10,
+
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+          color: "#fff",
+          fontSize: 16,
+        },
+      },
+    ],
+    yAxis: {
+      min: 0,
+      max: data.Max,
+      // interval: 100,
+      type: "value",
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(255, 255, 255, .16)",
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(255, 255, 255, .16)",
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        fontSize: 16,
+        color: "#fff",
+      },
+    },
+    series: [
+      {
+        xAxisIndex: 0,
+        name: "适龄生育妇女",
+        type: "custom",
+        renderItem: (params, api) => {
+          const location = api.coord([api.value(0), api.value(1)]);
+
+          return {
+            type: "group",
+            children: [
+              {
+                type: "CubeBottom_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[0]["bottom"],
+                },
+              },
+              {
+                type: "CubeLeft_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[0]["left"],
+                },
+              },
+              {
+                type: "CubeFront_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[0]["front"],
+                },
+              },
+              {
+                type: "CubeRight_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[0]["right"],
+                },
+              },
+              {
+                type: "CubeTop_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[0]["top"],
+                },
+              },
+            ],
+          };
+        },
+        //设置图例颜色
+        itemStyle: {
+          show: true,
+          color: {
+            type: "linear",
+            colorStops: [{ offset: 1, color: "rgba(234, 162, 57, 1)" }],
+          },
+        },
+        data: data.valueList,
+      },
+      {
+        xAxisIndex: 0,
+        name: "育龄妇女",
+        type: "custom",
+        renderItem: (params, api) => {
+          const location = api.coord([api.value(0), api.value(1)]);
+
+          return {
+            type: "group",
+            children: [
+              {
+                type: "CubeBottom_2",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[1]["bottom"],
+                },
+              },
+              {
+                type: "CubeLeft_2",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[1]["left"],
+                },
+              },
+              {
+                type: "CubeFront_2",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[1]["front"],
+                },
+              },
+              {
+                type: "CubeRight_2",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[1]["right"],
+                },
+              },
+              {
+                type: "CubeTop_2",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[1]["top"],
+                },
+              },
+            ],
+          };
+        },
+        //设置图例颜色
+        itemStyle: {
+          show: true,
+          color: {
+            type: "linear",
+            colorStops: [{ offset: 1, color: "rgba(14, 252, 255, 1)" }],
+          },
+        },
+        data: data.valueList2,
+      },
+      //顶部字体
+      {
+        type: "bar",
+        xAxisIndex: 1,
+        label: {
+          show: true,
+          fontSize: 18,
+          position: "top",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value - 5;
+          },
+        },
+        itemStyle: {
+          color: "rgba(221, 242, 255, 0)",
+        },
+
+        data: data.valueList.map((item) => parseInt(item) + 5),
+        barWidth: 30,
+      },
+      {
+        type: "bar",
+        xAxisIndex: 1,
+        label: {
+          show: true,
+          fontSize: 18,
+          position: "top",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value - 5;
+          },
+        },
+        itemStyle: {
+          color: "rgba(221, 242, 255, 0)",
+        },
+
+        data: data.valueList2.map((item) => parseInt(item) + 5),
+        barWidth: 20,
+      },
+    ],
+  };
+};
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+  myChart.on("click", function (params) {
+    emit("shuju", params.name, params.seriesIndex);
+  });
+};
+const getMaxCeilingValue = (arr) => {
+  let max = Math.max(...arr); // 找到数组中的最大值
+  return Math.ceil(max / 100) * 100; // 将最大值向上取整到最近的100的倍数
+};
+const setChart1 = () => {
+  data.valueList = [];
+  data.xxname = [];
+  if (data.list.length !== 0) {
+    data.list.forEach((item) => {
+      data.xxname.push(item.name); //信息名
+      data.valueList.push(item.num); //信息数
+    });
+  }
+};
+
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.xxname.forEach((item, index) => {
+      props.list.forEach((itemm, indexx) => {
+        if (item == itemm.xzjd) {
+          data.valueList[index] = itemm.qrrs;
+          data.valueList2[index] = itemm.qcrs;
+        }
+      });
+    });
+    getOption();
+    setChart();
+  }, 800);
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/view/echarts_jz/zwfw1.vue b/src/view/echarts_jz/zwfw1.vue
new file mode 100644
index 0000000..86908d1
--- /dev/null
+++ b/src/view/echarts_jz/zwfw1.vue
@@ -0,0 +1,209 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref ,onBeforeMount } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return {};
+    },
+  },
+});
+const data = reactive({
+  dataList: [
+    {
+      name: "2.0收件数",
+      value: 42277,
+    },
+    {
+      name: "总收件数",
+      value: 42632,
+    },
+  ],
+  percent: 0,
+  option: {},
+});
+const chart = ref(); // 创建DOM引用
+
+//内圈数据
+var data2 = [
+  {
+    value: data.dataList[0].value,
+    name: "2.0收件数",
+    itemStyle: {
+      normal: {
+        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+          {
+            offset: 0,
+            color: "rgba(255, 224, 0, 0.29)",
+          },
+          {
+            offset: 1,
+            color: "rgba(255, 224, 0, 1)",
+          },
+        ]),
+        shadowColor: "rgba(1,1,1,0.5)",
+        shadowBlur: 1,
+      },
+    },
+  },
+  {
+    value: data.dataList[1].value - data.dataList[0].value,
+    name: "",
+    itemStyle: {
+      normal: {
+        color: "rgba(255, 224, 0, 0.1)", // 未完成的圆环的颜色
+        label: {
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+      },
+      emphasis: {
+        color: "rgba(255, 224, 0, 0.1)", // 未完成的圆环的颜色
+      },
+    },
+  },
+  {
+    value: data.dataList[1].value,
+    name: "总收件数",
+    itemStyle: {
+      normal: {
+        color: "rgba(0,0,0,0)",
+      },
+    },
+  },
+];
+//外圈数据
+const data1 = [
+  {
+    value: data.dataList[1].value,
+    name: "",
+    itemStyle: {
+      normal: {
+        borderWidth: 1,
+        borderColor: "rgba(193, 229, 255, .1)",
+        color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
+          {
+            offset: 1,
+            color: "rgba(127, 242, 255, .2)",
+          },
+          {
+            offset: 0,
+            color: "rgba(109, 195, 255, 0)",
+          },
+        ]),
+      },
+    },
+  },
+  {
+    value: data.dataList[1].value,
+    name: "",
+    itemStyle: {
+      normal: {
+        color: "rgba(0,0,0,0)",
+      },
+    },
+  },
+];
+
+const getOption = () => {
+  data.option = {
+    // legend: {
+    //   selectedMode: false,
+    //   itemWidth: 10,
+    //   itemHeight: 10,
+    //   itemGap: 10,
+    //   icon: "circle",
+    //   data: ["2.0收件数", "", "总收件数"],
+    //   bottom: "3%",
+    //   width: 380,
+    //   textStyle: {
+    //     color: "#ffffff", // 修改图例颜色为红色
+    //   },
+    //   formatter: function (params) {
+    //     var num = "";
+    //     for (let i = 0; i < data.dataList.length; i++) {
+    //       if (data.dataList[i].name == params) {
+    //         num = data.dataList[i].value;
+    //       }
+    //     }
+    //     if(params == "总收件数"){
+    //       return params + "   " +num;
+    //     }else{
+    //       return params + "  " +num;
+    //     }
+        
+    //   },
+    // },
+
+    title: [
+      {
+        text: `${data.percent}%`,
+        right: "18%",
+        bottom: "40%",
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 18,
+        },
+      },
+    ],
+    series: [
+      {
+        // name:'访问来源',
+        type: "pie",
+        hoverAnimation: false,
+        radius: ["60%", "80%"],
+        center: ["53%", "54%"],
+        startAngle: 180,
+        label: {
+          normal: {
+            show: false,
+            position: "center",
+          },
+        },
+        data: data2,
+      },
+      {
+        type: "pie",
+        center: ["53%", "54%"],
+        radius: ["80%", "95%"],
+        hoverAnimation: false,
+        startAngle: 180,
+        label: {
+          normal: {
+            show: false,
+            position: "center",
+          },
+        },
+        data: data1,
+      },
+    ],
+  };
+};
+
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+};
+
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.dataList[0].value=props.list.finish;
+    data.dataList[1].value=props.list.total;
+    data.percent=props.list.percent;
+    getOption();
+    setChart();
+  }, 600);
+});
+
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/view/echarts_jz/zwfw2.vue b/src/view/echarts_jz/zwfw2.vue
new file mode 100644
index 0000000..7dd0b5c
--- /dev/null
+++ b/src/view/echarts_jz/zwfw2.vue
@@ -0,0 +1,213 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref ,onBeforeMount } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return {};
+    },
+  },
+});
+const data = reactive({
+  dataList: [
+    {
+      name: "2.0收件数",
+      value: 42277,
+    },
+    {
+      name: "总收件数",
+      value: 42632,
+    },
+  ],
+  percent: 0,
+  option: {},
+});
+const chart = ref(); // 创建DOM引用
+
+//内圈数据
+var data2 = [
+  {
+    value: data.dataList[0].value,
+    name: "2.0收件数",
+    itemStyle: {
+      normal: {
+        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+          {
+            offset: 0,
+            color: "rgba(0, 255, 250, 0.29)",
+          },
+          {
+            offset: 0.5,
+            color: "rgba(0, 255, 250, 0.8)",
+          },
+          {
+            offset: 1,
+            color: "rgba(0, 255, 250, 1)",
+          },
+        ]),
+        shadowColor: "rgba(1,1,1,0.5)",
+        shadowBlur: 1,
+      },
+    },
+  },
+  {
+    value: data.dataList[1].value - data.dataList[0].value,
+    name: "",
+    itemStyle: {
+      normal: {
+        color: "#095b9b", // 未完成的圆环的颜色
+        label: {
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+      },
+      emphasis: {
+        color: "#095b9b", // 未完成的圆环的颜色
+      },
+    },
+  },
+  {
+    value: data.dataList[1].value,
+    name: "总收件数",
+    itemStyle: {
+      normal: {
+        color: "rgba(0,0,0,0)",
+      },
+    },
+  },
+];
+//外圈数据
+const data1 = [
+  {
+    value: data.dataList[1].value,
+    name: "",
+    itemStyle: {
+      normal: {
+        borderWidth: 1,
+        borderColor: "rgba(193, 229, 255, .1)",
+        color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
+          {
+            offset: 1,
+            color: "rgba(127, 242, 255, .2)",
+          },
+          {
+            offset: 0,
+            color: "rgba(109, 195, 255, 0)",
+          },
+        ]),
+      },
+    },
+  },
+  {
+    value: data.dataList[1].value,
+    name: "",
+    itemStyle: {
+      normal: {
+        color: "rgba(0,0,0,0)",
+      },
+    },
+  },
+];
+
+const getOption = () => {
+  data.option = {
+    // legend: {
+    //   selectedMode: false,
+    //   itemWidth: 10,
+    //   itemHeight: 10,
+    //   itemGap: 10,
+    //   icon: "circle",
+    //   data: ["2.0收件数", "", "总收件数"],
+    //   bottom: "3%",
+    //   width: 380,
+    //   textStyle: {
+    //     color: "#ffffff", // 修改图例颜色为红色
+    //   },
+    //   formatter: function (params) {
+    //     var num = "";
+    //     for (let i = 0; i < data.dataList.length; i++) {
+    //       if (data.dataList[i].name == params) {
+    //         num = data.dataList[i].value;
+    //       }
+    //     }
+    //     if(params == "总收件数"){
+    //       return params + "   " +num;
+    //     }else{
+    //       return params + "  " +num;
+    //     }
+        
+    //   },
+    // },
+
+    title: [
+      {
+        text: `${data.percent}%`,
+        right: "18%",
+        bottom: "40%",
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 18,
+        },
+      },
+    ],
+    series: [
+      {
+        // name:'访问来源',
+        type: "pie",
+        hoverAnimation: false,
+        radius: ["60%", "80%"],
+        center: ["53%", "54%"],
+        startAngle: 180,
+        label: {
+          normal: {
+            show: false,
+            position: "center",
+          },
+        },
+        data: data2,
+      },
+      {
+        type: "pie",
+        center: ["53%", "54%"],
+        radius: ["80%", "95%"],
+        hoverAnimation: false,
+        startAngle: 180,
+        label: {
+          normal: {
+            show: false,
+            position: "center",
+          },
+        },
+        data: data1,
+      },
+    ],
+  };
+};
+
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+};
+
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.dataList[0].value=props.list.finish;
+    data.dataList[1].value=props.list.total;
+    data.percent=props.list.percent;
+    getOption();
+    setChart();
+  }, 600);
+});
+
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/view/sy_details.vue b/src/view/sy_details.vue
index f960498..988d5a3 100644
--- a/src/view/sy_details.vue
+++ b/src/view/sy_details.vue
@@ -70,12 +70,12 @@
             <i></i>
           </div>
           <div class="lampState">
-            <div @click="openSf()">
-              <!-- <img
-                :src="selectedLamp == 0 ? lampImages[1] : lampImages[4]"
-                @click="lampScreen(0)"
-              /> -->
-              算法模型
+            <div >
+              <img
+                src="@/assets/sy-table/sfmx.png"
+                @click="openSf()"
+                style="cursor: pointer; width: 63px; height: 44px"
+              />
             </div>
           </div>
         </div>
@@ -530,12 +530,14 @@ const closeJj = () => {
 };
 //获取算法模型数据
 const openSf=()=>{
-  dialogShowSf.value = true;
-  // http.get(`/api/ggfwyth/pg/sfmx?xh=${routers.query.xh}`).then((res) => {
-  //   if (res.code == 200) {
-  //     tableType.data = res.data;
-  //   }
-  // });
+  
+  http.get(`/api/ggfwyth/pg/sfljqd?xh=${routers.query.xh}`).then((res) => {
+    if (res.code == 200) {
+      sfType.title=routers.query.name;
+      sfType.data=res.data;
+      dialogShowSf.value = true;
+    }
+  });
 }
 const getTable = (pagination) => {
   http
diff --git a/src/view/sy_table.vue b/src/view/sy_table.vue
index 84245f6..958a28e 100644
--- a/src/view/sy_table.vue
+++ b/src/view/sy_table.vue
@@ -153,6 +153,7 @@
     <education v-if="gaikuangList.education"></education>
     <yl v-if="gaikuangList.yl"></yl>
     <hygiene v-if="gaikuangList.hygiene"></hygiene>
+    <jz v-if="gaikuangList.jz"></jz>
   </div>
 </template>
 
@@ -179,6 +180,7 @@ import work from "./table_gk/gk_work.vue";
 import education from "./table_gk/gk_education.vue";
 import yl from "./table_gk/gk_yl.vue";
 import hygiene from "./table_gk/gk_hygiene.vue";
+import jz from "./table_gk/gk_jz.vue";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/utils/request.js";
 import { ElMessage } from "element-plus";
@@ -525,6 +527,7 @@ const gaikuangList = reactive({
   education: false,
   yl: false,
   hygiene: false,
+  jz:false,
 });
 //是否显示七优享
 const show_7yx = ref(true);
@@ -534,7 +537,8 @@ const gk = computed(() => {
     gaikuangList.work ||
     gaikuangList.hygiene ||
     gaikuangList.education ||
-    gaikuangList.yl
+    gaikuangList.yl ||
+    gaikuangList.jz
   ) {
     return false;
   } else {
@@ -618,8 +622,8 @@ const gaikuang = (name) => {
     gaikuangList.yl = true;
   } else if (name == "病有所医") {
     gaikuangList.hygiene = true;
-  }  else if (name == "住有所居") {
-    gaikuangList.infant = true;
+  }else if(name == "住有所居") {
+    gaikuangList.jz = true;
   }
 };
 // 服务表格样式
diff --git a/src/view/table_gk/gk_jz.vue b/src/view/table_gk/gk_jz.vue
new file mode 100644
index 0000000..dd17ab7
--- /dev/null
+++ b/src/view/table_gk/gk_jz.vue
@@ -0,0 +1,389 @@
+<template>
+  <div class="module11">
+    <div class="displayFlex left_bg">
+      <div class="flex1" style="margin-top: 10px">
+        <div class="yd_title left_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <eP3 :list="data.jsbgl" v-if="showEchart"></eP3>
+      </div>
+      <div class="flex1">
+        <div class="yd_title left_2">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <eP2
+          :list="data.medicalInsurance.ffrc"
+          :year="data.medicalInsurance.year"
+        ></eP2>
+      </div>
+    </div>
+    <div class="displayFlex center_bg">
+      <div class="flex1">
+        <div class="yd_title center_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <div class="shang">
+          <div class="shang_item">
+            <div class="title">物业小区</div>
+            <div class="i">
+              <zwfw1 :list="data.fgl.list1" />
+            </div>
+          </div>
+          <div class="shang_item">
+            <div class="title">专业物业</div>
+            <div class="i">
+              <zwfw2 :list="data.fgl.list2"/>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex1" style="margin-top: 20px">
+        <div class="yd_title center_2">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="displayFlex right_bg">
+      <div class="flex1">
+        <div class="yd_title right_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+      </div>
+      <div class="flex1">
+        <div class="yd_title right_2">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script setup>
+import { ref, reactive, onMounted, onBeforeMount } from "vue";
+import eP2 from "../echarts_jz/eP2.vue";
+import eP3 from "../echarts_jz/eP3.vue";
+import http from "@/utils/request.js";
+import zwfw1 from "../echarts_jz/zwfw1.vue";
+import zwfw2 from "../echarts_jz/zwfw2.vue";
+const data = reactive({
+  medicalInsurance: {}, //医疗保险
+  fgl: {
+    list1: {
+      finish: "60",
+      total: "100",
+      percent: "60",
+    },
+    list2: {
+      finish: "40",
+      total: "100",
+      percent: "40",
+    },
+  },//覆盖率
+  jkda: {
+    jdfs: "336993",
+    jdl: "91.82",
+    jtysqyl: "49.37",
+  }, //健康档案
+  
+});
+const showEchart = ref(false);
+
+const getData = async () => {
+  showEchart.value = true;
+  // await http.get("/api/ggfwyth/health").then((res) => {
+  //   if (res.code == 200) {
+  //     data.medicalInsurance = res.data.medicalInsurance;
+  //     data.lmb = res.data.lmb;
+  //     data.mz = res.data.mz;
+  //     // data.jkda = res.data.jkda;
+  //     data.jsbgl = res.data.jsbgl;
+  //     data.fyglrs = res.data.fyglrs;
+  //     data.jktj = res.data.jktj;
+  //     data.jkhd = res.data.jkhd;
+  //     data.lxbx = res.data.lxbx;
+
+  //   }
+  // });
+};
+
+onBeforeMount(async () => {
+  getData();
+});
+onMounted(() => {});
+</script>
+  
+  <style lang="scss" scoped>
+.displayFlex {
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  // flex: 1;
+  width: 33.333333333%;
+}
+
+.flex1 {
+  // flex: 1;
+  // padding: 0 28px;
+  box-sizing: border-box;
+}
+
+.flex2 {
+  // flex: 1;
+  // padding: 0 38px;
+  box-sizing: border-box;
+}
+
+.module11 {
+  display: flex;
+  width: 100%;
+  //   margin-top: 112px;
+}
+
+.yd_title {
+  // background-image: url(@/assets/img_04.png);
+  // background-repeat: no-repeat;
+  // background-size: 100% 100%;
+  box-sizing: border-box;
+  width: 94%;
+  height: 42px;
+  position: relative;
+  overflow: hidden;
+  /* 利用伪元素和两个i元素产生4条线 */
+  .animate-border {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 2px;
+    }
+    i {
+      position: absolute;
+      display: inline-block;
+      height: 100%;
+      width: 2px;
+    }
+    &::before {
+      top: 0;
+      left: -100%;
+      background-image: linear-gradient(
+        90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+
+      animation: one 4s linear infinite;
+    }
+    i:nth-child(1) {
+      top: -100%;
+      right: 0;
+      background-image: linear-gradient(
+        180deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      /* 动画名称  动画持续时间  动画渲染函数 动画延迟时间 动画执行次数 */
+      animation: two 4s linear 1s infinite;
+    }
+    &::after {
+      bottom: 0;
+      right: -100%;
+      background-image: linear-gradient(
+        -90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: three 4s linear 2s infinite;
+    }
+    i:nth-child(2) {
+      bottom: -100%;
+      left: 0;
+      background-image: linear-gradient(
+        360deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: four 4s linear 3s infinite;
+    }
+  }
+
+  .text {
+    display: flex;
+    position: absolute;
+    font-size: 16px;
+    font-family: SourceHanSansCN;
+    font-weight: bold;
+    color: #ffffff;
+    position: absolute;
+    right: 5px;
+    top: 1px;
+  }
+  .c {
+    width: 130px;
+    height: 42px;
+    cursor: pointer;
+  }
+}
+@keyframes one {
+  0% {
+    left: -100%;
+  }
+  50%,
+  100% {
+    left: 100%;
+  }
+}
+
+@keyframes two {
+  0% {
+    top: -100%;
+  }
+  50%,
+  100% {
+    top: 100%;
+  }
+}
+
+@keyframes three {
+  0% {
+    right: -100%;
+  }
+  50%,
+  100% {
+    right: 100%;
+  }
+}
+
+@keyframes four {
+  0% {
+    bottom: -100%;
+  }
+  50%,
+  100% {
+    bottom: 100%;
+  }
+}
+
+.left_1 {
+  background-image: url(@/assets/images/jz/gzf.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.left_2 {
+  background-image: url(@/assets/images/jz/wfjw.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+
+.center_1 {
+  background-image: url(@/assets/images/jz/fgl.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.center_2 {
+  background-image: url(@/assets/images/jz/wlsq.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.right_1 {
+  background-image: url(@/assets/images/jz/zzgc.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.right_2 {
+  background-image: url(@/assets/images/jz/phqgz.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.left_bg {
+  width: 520px;
+  // height: 100%;
+  box-sizing: border-box;
+  padding-left: 20px;
+  margin-right: 28px;
+  background-image: url(@/assets/images/left_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.center_bg {
+  width: 560px;
+  // height: 100%;
+  box-sizing: border-box;
+  padding-left: 10px;
+  margin-right: 28px;
+  background-image: url(@/assets/images/center_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.right_bg {
+  width: 520px;
+  box-sizing: border-box;
+  padding-left: 20px;
+  margin-right: 28px;
+  background-image: url(@/assets/images/right_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.font {
+  font-size: 18px !important;
+}
+.shang {
+  margin-top:20px;
+    display: flex;
+    justify-content: space-around;
+    &_item {
+      width: 45%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .title {
+        width: 50%;
+        background-image: url(@/assets/images/sy/zwfw_title.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        text-align: center;
+        font-weight: 400;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 20px;
+        letter-spacing: 2px;
+      }
+      .i {
+        width: 100%;
+        height: 200px;
+      }
+    }
+  }
+</style>
+  
\ No newline at end of file