diff --git a/src/assets/images/sy/badminton.png b/src/assets/images/sy/badminton.png
new file mode 100644
index 0000000..78c5b2c
Binary files /dev/null and b/src/assets/images/sy/badminton.png differ
diff --git a/src/assets/images/sy/baskerball.png b/src/assets/images/sy/baskerball.png
new file mode 100644
index 0000000..40ffaad
Binary files /dev/null and b/src/assets/images/sy/baskerball.png differ
diff --git a/src/assets/images/sy/bq.png b/src/assets/images/sy/bq.png
new file mode 100644
index 0000000..10a4c80
Binary files /dev/null and b/src/assets/images/sy/bq.png differ
diff --git a/src/assets/images/sy/center_1_bg.png b/src/assets/images/sy/center_1_bg.png
new file mode 100644
index 0000000..853bbd6
Binary files /dev/null and b/src/assets/images/sy/center_1_bg.png differ
diff --git a/src/assets/images/sy/footerball.png b/src/assets/images/sy/footerball.png
new file mode 100644
index 0000000..ecf65fe
Binary files /dev/null and b/src/assets/images/sy/footerball.png differ
diff --git a/src/assets/images/sy/jyfw.png b/src/assets/images/sy/jyfw.png
new file mode 100644
index 0000000..0d3c9a0
Binary files /dev/null and b/src/assets/images/sy/jyfw.png differ
diff --git a/src/assets/images/sy/left_1.png b/src/assets/images/sy/left_1.png
new file mode 100644
index 0000000..8586158
Binary files /dev/null and b/src/assets/images/sy/left_1.png differ
diff --git a/src/assets/images/sy/left_1_1.png b/src/assets/images/sy/left_1_1.png
new file mode 100644
index 0000000..6b9b37c
Binary files /dev/null and b/src/assets/images/sy/left_1_1.png differ
diff --git a/src/assets/images/sy/left_1_2.png b/src/assets/images/sy/left_1_2.png
new file mode 100644
index 0000000..40c186f
Binary files /dev/null and b/src/assets/images/sy/left_1_2.png differ
diff --git a/src/assets/images/sy/left_1_3.png b/src/assets/images/sy/left_1_3.png
new file mode 100644
index 0000000..b2a6768
Binary files /dev/null and b/src/assets/images/sy/left_1_3.png differ
diff --git a/src/assets/images/sy/left_1_bg.png b/src/assets/images/sy/left_1_bg.png
new file mode 100644
index 0000000..b56b986
Binary files /dev/null and b/src/assets/images/sy/left_1_bg.png differ
diff --git a/src/assets/images/sy/left_2.png b/src/assets/images/sy/left_2.png
new file mode 100644
index 0000000..ec8cdbe
Binary files /dev/null and b/src/assets/images/sy/left_2.png differ
diff --git a/src/assets/images/sy/left_3.png b/src/assets/images/sy/left_3.png
new file mode 100644
index 0000000..0f9c842
Binary files /dev/null and b/src/assets/images/sy/left_3.png differ
diff --git a/src/assets/images/sy/man.png b/src/assets/images/sy/man.png
new file mode 100644
index 0000000..19c3041
Binary files /dev/null and b/src/assets/images/sy/man.png differ
diff --git a/src/assets/images/sy/people_total.png b/src/assets/images/sy/people_total.png
new file mode 100644
index 0000000..e292ee3
Binary files /dev/null and b/src/assets/images/sy/people_total.png differ
diff --git a/src/assets/images/sy/right_1.png b/src/assets/images/sy/right_1.png
new file mode 100644
index 0000000..7f18e12
Binary files /dev/null and b/src/assets/images/sy/right_1.png differ
diff --git a/src/assets/images/sy/right_2.png b/src/assets/images/sy/right_2.png
new file mode 100644
index 0000000..5af981f
Binary files /dev/null and b/src/assets/images/sy/right_2.png differ
diff --git a/src/assets/images/sy/right_3.png b/src/assets/images/sy/right_3.png
new file mode 100644
index 0000000..ebab8cf
Binary files /dev/null and b/src/assets/images/sy/right_3.png differ
diff --git a/src/assets/images/sy/right_4.png b/src/assets/images/sy/right_4.png
new file mode 100644
index 0000000..eec9704
Binary files /dev/null and b/src/assets/images/sy/right_4.png differ
diff --git a/src/assets/images/sy/running.png b/src/assets/images/sy/running.png
new file mode 100644
index 0000000..f6d04cf
Binary files /dev/null and b/src/assets/images/sy/running.png differ
diff --git a/src/assets/images/sy/school.png b/src/assets/images/sy/school.png
new file mode 100644
index 0000000..351c7cb
Binary files /dev/null and b/src/assets/images/sy/school.png differ
diff --git a/src/assets/images/sy/student.png b/src/assets/images/sy/student.png
new file mode 100644
index 0000000..fd16a2c
Binary files /dev/null and b/src/assets/images/sy/student.png differ
diff --git a/src/assets/images/sy/tableTennis.png b/src/assets/images/sy/tableTennis.png
new file mode 100644
index 0000000..53f7b47
Binary files /dev/null and b/src/assets/images/sy/tableTennis.png differ
diff --git a/src/assets/images/sy/teacher.png b/src/assets/images/sy/teacher.png
new file mode 100644
index 0000000..6546d91
Binary files /dev/null and b/src/assets/images/sy/teacher.png differ
diff --git a/src/assets/images/sy/whsy.png b/src/assets/images/sy/whsy.png
new file mode 100644
index 0000000..24b9c79
Binary files /dev/null and b/src/assets/images/sy/whsy.png differ
diff --git a/src/assets/images/sy/woman.png b/src/assets/images/sy/woman.png
new file mode 100644
index 0000000..dd107ce
Binary files /dev/null and b/src/assets/images/sy/woman.png differ
diff --git a/src/assets/images/sy/ylws.png b/src/assets/images/sy/ylws.png
new file mode 100644
index 0000000..6542cef
Binary files /dev/null and b/src/assets/images/sy/ylws.png differ
diff --git a/src/view/echarts_education/eP1.vue b/src/view/echarts_education/eP1.vue
index 8db8a85..8e9fc21 100644
--- a/src/view/echarts_education/eP1.vue
+++ b/src/view/echarts_education/eP1.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 300px"></div>
+  <div ref="chart" style="width: 100%; height: 250px"></div>
 </template>
 
 <script setup>
diff --git a/src/view/echarts_education/pieRose.vue b/src/view/echarts_education/pieRose.vue
index d3272e7..4e9a677 100644
--- a/src/view/echarts_education/pieRose.vue
+++ b/src/view/echarts_education/pieRose.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="chart" style="width: 100%; height:350px;"></div>
+    <div ref="chart" style="width: 100%; height:300px;"></div>
 </template>
 
 <script setup>
diff --git a/src/view/echarts_hygiene/eP2.vue b/src/view/echarts_hygiene/eP2.vue
index e6c9747..4d28998 100644
--- a/src/view/echarts_hygiene/eP2.vue
+++ b/src/view/echarts_hygiene/eP2.vue
@@ -105,7 +105,7 @@ let option = {
       label: {
         show: true,
         position: "right", // 位置
-        color: "#ccc",
+        color: "#ffffff",
         fontSize: 12,
         distance: 10, // 距离
         // formatter: '{c}%' // 这里是数据展示的时候显示的数据
diff --git a/src/view/echarts_hygiene/eP3.vue b/src/view/echarts_hygiene/eP3.vue
index 415aa61..4becaf0 100644
--- a/src/view/echarts_hygiene/eP3.vue
+++ b/src/view/echarts_hygiene/eP3.vue
@@ -86,7 +86,7 @@ let option = {
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
         },
       },
     },
diff --git a/src/view/echarts_hygiene/eP7.vue b/src/view/echarts_hygiene/eP7.vue
index f53498d..0780201 100644
--- a/src/view/echarts_hygiene/eP7.vue
+++ b/src/view/echarts_hygiene/eP7.vue
@@ -102,7 +102,7 @@ let option = {
     {
       name: "体检人数",
       type: "bar",
-      data: [120, 49, 70, 23.2, 25.6],
+      data: [120, 49, 70, 232, 25.6],
       barWidth: 20,
       itemStyle: {
         normal: {
diff --git a/src/view/echarts_hygiene/gxy.vue b/src/view/echarts_hygiene/gxy.vue
index 9787dce..4bc1cfb 100644
--- a/src/view/echarts_hygiene/gxy.vue
+++ b/src/view/echarts_hygiene/gxy.vue
@@ -38,7 +38,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
@@ -54,7 +54,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
diff --git a/src/view/echarts_hygiene/pie.vue b/src/view/echarts_hygiene/pie.vue
index d194f84..781f6a5 100644
--- a/src/view/echarts_hygiene/pie.vue
+++ b/src/view/echarts_hygiene/pie.vue
@@ -19,7 +19,7 @@ let option = {
     right: "11%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff",
     },
   },
   grid: {
@@ -36,7 +36,7 @@ let option = {
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
         },
       },
       data: ["2019", "2020", "2021", "2022", "2023"],
@@ -64,7 +64,7 @@ let option = {
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
         },
       },
     },
diff --git a/src/view/echarts_hygiene/pie2.vue b/src/view/echarts_hygiene/pie2.vue
index a77d857..7d634a5 100644
--- a/src/view/echarts_hygiene/pie2.vue
+++ b/src/view/echarts_hygiene/pie2.vue
@@ -21,7 +21,7 @@ let option = {
     right: "11%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff",
     },
   },
   grid: {
@@ -39,7 +39,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
@@ -55,7 +55,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
diff --git a/src/view/echarts_hygiene/tnb.vue b/src/view/echarts_hygiene/tnb.vue
index 5c18c80..ae6776a 100644
--- a/src/view/echarts_hygiene/tnb.vue
+++ b/src/view/echarts_hygiene/tnb.vue
@@ -38,7 +38,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
@@ -54,7 +54,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
diff --git a/src/view/echarts_sy/bubble.vue b/src/view/echarts_sy/bubble.vue
deleted file mode 100644
index 5e5f966..0000000
--- a/src/view/echarts_sy/bubble.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<template> 
-  <div ref="chart" style="width:100%;height:300px;"></div>
-</template>
-
-<script setup >
-import {onMounted, reactive, ref} from "vue";
-// 局部引入echarts核心模块
-import * as echarts from 'echarts'
- 
-const chart =ref(); // 创建DOM引用
-
-var plantCap = [{
-    name: '中国工程院 \n\n 院士' 
-}, {
-    name: '计算机应用 \n\n 专家'
-}, {
-    name: '浙江大学计算机 \n\n 科学与技术学院 \n\n 教授' 
-}, {
-    name: '国家数码喷印工程 \n\n 技术研究中心 \n\n 首席科学家'
-}, {
-    name: '浙江大学信息 \n\n 学部主任'
-}, {
-    name: '博士生导师'
-}];
-
-var datalist = [{
-    offset: [10, 73],
-    symbolSize: 90,
-    opacity: .95,
-    color: '#C58F5A'
-}, {
-    offset: [40, 63],
-    symbolSize: 90,
-    opacity: .88,
-    color: '#076097'
-}, {
-    offset: [80, 73],
-    symbolSize: 130,
-    opacity: .84,
-    color: '#BF74CF'
-}, {
-    offset: [20, 23],
-    symbolSize: 140,
-    opacity: .84,
-    color: '#2D90ED'
-}, {
-    offset: [60, 23],
-    symbolSize: 95,
-    opacity: .84,
-    color: '#079773'
-}, {
-    offset: [90, 33],
-    symbolSize: 80,
-    opacity: .84,
-    color: '#C89D4A'
-}];
-var datas = [];
-for (var i = 0; i < plantCap.length; i++) {
-    var item = plantCap[i];
-    var itemToStyle = datalist[i];
-    datas.push({
-        name:   item.name,
-        value: itemToStyle.offset,
-        symbolSize: itemToStyle.symbolSize,
-        label: {
-            normal: {
-                textStyle: {
-                    fontSize: 12
-                }
-            }
-        },
-        itemStyle: {
-            normal: { 
-                color: itemToStyle.color,
-                opacity: itemToStyle.opacity
-            }
-        },
-    })
-}
-
-let option = {
-    grid: {
-        show: false,
-        top: 10,
-        bottom: 10
-    },
-    xAxis: [{
-        gridIndex: 0,
-        type: 'value',
-        show: false,
-        min: 0,
-        max: 100,
-        nameLocation: 'middle',
-        nameGap: 5
-    }],
-    yAxis: [{
-        gridIndex: 0,
-        min: 0,
-        show: false,
-        max: 100,
-        nameLocation: 'middle',
-        nameGap: 30
-    }],
-    series: [{
-        type: 'scatter',
-        symbol: 'circle',
-        symbolSize: 120,
-        label: {
-            normal: {
-                show: true,
-                formatter: '{b}',
-                color: '#fff',
-                textStyle: {
-                    fontSize: '20'
-                }
-            },
-        },
-        itemStyle: {
-            normal: {
-                color: '#00acea'
-            }
-        },
-        data: datas
-    }]
-};
-
-
-// 使用生命钩子
-onMounted(() => {
-  // 基于准备好的dom，初始化echarts实例
-  // var myChart = echarts.init(document.getElementById('main'));
-  // Vue3中： 需要引入
-  var myChart = echarts.init(chart.value)
-
-  // init(); // vue3.2没有this
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
-
-  // 单图表响应式: 跟随浏览器大小改变
-  window.addEventListener('resize',()=>{
-      myChart.resize()
-  })
-
-})
-
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/view/echarts_sy/pie.vue b/src/view/echarts_sy/pie.vue
new file mode 100644
index 0000000..6bf29c9
--- /dev/null
+++ b/src/view/echarts_sy/pie.vue
@@ -0,0 +1,200 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 250px"></div>
+</template>
+
+<script setup >
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+//展示数据
+const optionData = [];
+//扇形图颜色数据
+const colorList = [
+  { color1: "rgba(76,167,163,0.9)", color2: "rgba(90,255,223,1)" },
+  { color1: "rgba(65,149,99,0.9)", color2: "rgba(115,255,145,1)" },
+  { color1: "rgba(98,167,131,0.9)", color2: "rgba(153,255,179,1)" },
+  { color1: "rgba(127,177,108,0.9)", color2: "rgba(193,255,138,1)" },
+  { color1: "rgba(190,164,75,0.9)", color2: "rgba(255,207,74,1)" },
+  { color1: "rgba(165,123,98,0.9)", color2: "rgba(254,178,128,1)" },
+  { color1: "rgba(105,123,186,0.9)", color2: "rgba(151,176,255,1)" },
+  { color1: "rgba(106,102,173,0.9)", color2: "rgba(164,151,255,1)" },
+  { color1: "rgba(106,76,178,0.9)", color2: "rgba(159,110,254,1)" },
+  { color1: "rgba(134,109,188,0.9)", color2: "rgba(180,143,241,1)" },
+  { color1: "rgba(54,122,194,0.9)", color2: "rgba(76,174,254,1)" },
+];
+//请求的数据
+const resultData = [
+  {
+    name: "1-10岁",
+    value: 95,
+  },
+  {
+    name: "11-20岁",
+    value: 120,
+  },
+  {
+    name: "21-30岁",
+    value: 98,
+  },
+  {
+    name: "31-40岁",
+    value: 90,
+  },
+  {
+    name: "41-50岁",
+    value: 100,
+  },
+  {
+    name: "51-60岁",
+    value: 97,
+  },
+  {
+    name: "61-70岁",
+    value: 100,
+  },
+  {
+    name: "71-80岁",
+    value: 100,
+  },
+  {
+    name: "81-90岁",
+    value: 100,
+  },
+  {
+    name: "91-100岁",
+    value: 100,
+  },
+  {
+    name: "100岁以上",
+    value: 100,
+  },
+];
+let sum = 0;
+resultData.forEach((item) => {
+  sum += item.value;
+});
+resultData.forEach((item) => {
+  optionData.push({ value: item.value, name: item.name });
+  optionData.push({
+    name: "",
+    value: sum / 100,
+    itemStyle: { color: "transparent" },
+  });
+});
+let option = {
+  //你的代码
+  legend: [
+    {
+      orient: "vertical",
+      right: "10%",
+      top: "20%",
+      itemGap: 15,
+      textStyle: {
+        color: "#ccc",
+        fontSize: 12,
+        rich: {
+          name: {
+            width: 80,
+            fontSize: 16,
+          },
+        },
+      },
+      data: resultData,
+      formatter: (name) => {
+        if (resultData.length) {
+          const item = resultData.filter((item) => item.name === name)[0];
+          return `{name|${name}}`;
+        }
+      },
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+    
+    formatter(params) {
+      let res = "";
+      const { marker, name, value } = params;
+      if (name !== "") {
+        res += `${marker}${name}:${value}`;
+      }
+      return res;
+    },
+  },
+  series: [
+    {
+      type: "pie",
+      roseType: "radius",
+      radius: ["20%", "85%"],
+      center: ["25%", "53%"],
+      label: {
+        position: "inside",
+        formatter(item) {
+          if (item.name === "") {
+            return "";
+          }
+          return "";
+        },
+        textStyle: {
+          fontSize: 16,
+          color: "#ffffff",
+        },
+      },
+      labelLine: {
+        show: false,
+      },
+      itemStyle: {
+        normal: {
+          color(params) {
+            return colorList[parseInt(params.dataIndex / 2)].color1;
+          },
+        },
+      },
+      z: 3,
+      data: optionData,
+    },
+    {
+      type: "pie",
+      roseType: "radius",
+      radius: ["20%", "87%"],
+      center: ["25%", "53%"],
+      label: {
+        show: false,
+      },
+      labelLine: {
+        show: false,
+      },
+      itemStyle: {
+        normal: {
+          color(params) {
+            return colorList[parseInt(params.dataIndex / 2)].color2;
+          },
+        },
+      },
+      z: 2,
+      data: optionData,
+    },
+  ],
+};
+// 使用生命钩子
+onMounted(() => {
+  // 基于准备好的dom，初始化echarts实例
+  // var myChart = echarts.init(document.getElementById('main'));
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // init(); // vue3.2没有this
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option);
+
+  // 单图表响应式: 跟随浏览器大小改变
+  //   window.addEventListener("resize", () => {
+  //     myChart.resize();
+  //   });
+});
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/view/echarts_sy/pie2.vue b/src/view/echarts_sy/pie2.vue
new file mode 100644
index 0000000..68c9a32
--- /dev/null
+++ b/src/view/echarts_sy/pie2.vue
@@ -0,0 +1,231 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 120px"></div>
+</template>
+
+<script setup >
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+const option = {
+  legend: {
+    show: true,
+
+    itemHeight: 12,
+    itemWidth: 30,
+    textStyle: {
+      fontSize: 20,
+      color: "#fff",
+    },
+    top: 70,
+    left: 30,
+    itemGap: 10, // 垂直间距
+    y: "top", // 延Y轴居中
+    data: ["17岁以下", "18-34岁", "35-69岁", "60岁以上"],
+  },
+  grid: { left: "2%", right: "2%", top: "10%" },
+  xAxis: [
+    { type: "value", show: false, max: 106 },
+    { type: "value", show: false, max: 106 },
+  ],
+  yAxis: [
+    {
+      type: "category",
+      show: false,
+      axisTick: {
+        show: false,
+      },
+    },
+    {
+      type: "category",
+      show: false,
+      axisTick: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      type: "bar",
+      data: [3],
+      stack: "income",
+      barWidth: 18,
+      itemStyle: {
+        normal: {
+          color: "rgba(255,255,255,0)",
+        },
+      },
+    },
+    {
+      type: "bar",
+      name: "17岁以下",
+      data: [14],
+      stack: "income",
+      barWidth: 18,
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            {
+              offset: 0,
+              color: "#62CDFF",
+            },
+            {
+              offset: 1,
+              color: "#9BE8FF",
+            },
+          ]),
+          barBorderRadius: [100, 0, 0, 100],
+        },
+      },
+      label: {
+        normal: {
+          show: true,
+          position: ["25%", "-50%"],
+          formatter: "{c}%",
+          color: "#fff",
+          fontSize: 25,
+          fontWeight: 600,
+        },
+      },
+    },
+    {
+      type: "bar",
+      name: "18-34岁",
+      data: [26],
+      stack: "income",
+      barWidth: 18,
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            {
+              offset: 0,
+              color: "#2355EA",
+            },
+            {
+              offset: 1,
+              color: "#3873DD",
+            },
+          ]),
+          barBorderRadius: [0, 0, 0, 0],
+        },
+      },
+      label: {
+        normal: {
+          show: true,
+          position: ["35%", "-50%"],
+          formatter: "{c}%",
+          color: "#fff",
+          fontSize: 25,
+          fontWeight: 600,
+        },
+      },
+    },
+    {
+      type: "bar",
+      name: "35-69岁",
+      data: [33],
+      stack: "income",
+      barWidth: 18,
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            {
+              offset: 0,
+              color: "#42D6B2",
+            },
+            {
+              offset: 1,
+              color: "#9BFFD3",
+            },
+          ]),
+          barBorderRadius: [0, 0, 0, 0],
+        },
+      },
+      label: {
+        normal: {
+          show: true,
+          position: ["35%", "-50%"],
+          formatter: "{c}%",
+          color: "#fff",
+          fontSize: 25,
+          fontWeight: 600,
+        },
+      },
+    },
+    {
+      type: "bar",
+      name: "60岁以上",
+      data: [27],
+      stack: "income",
+      barWidth: 18,
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            {
+              offset: 0,
+              color: "#FFAA62",
+            },
+            {
+              offset: 1,
+              color: "#FFE89B",
+            },
+          ]),
+          barBorderRadius: [0, 100, 100, 0],
+        },
+      },
+      label: {
+        normal: {
+          show: true,
+          position: ["35%", "-50%"],
+          formatter: "{c}%",
+          color: "#fff",
+          fontSize: 25,
+          fontWeight: 600,
+        },
+      },
+    },
+        {
+      type: "bar",
+      data: [3],
+      stack: "income",
+      barWidth: 18,
+      itemStyle: {
+        normal: {
+          color: "rgba(255,255,255,0)",
+        },
+      },
+    },
+    {
+      type: "bar",
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      itemStyle: {
+        color: "rgba(255,255,255,0.1)",
+        barBorderRadius: [100, 100, 100, 100],
+      },
+      data: ["2019"].map(() => 106),
+      barWidth: 50,
+    },
+  ],
+};
+onMounted(() => {
+  // 基于准备好的dom，初始化echarts实例
+  // var myChart = echarts.init(document.getElementById('main'));
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // init(); // vue3.2没有this
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option);
+
+  // 单图表响应式: 跟随浏览器大小改变
+  //   window.addEventListener("resize", () => {
+  //     myChart.resize();
+  //   });
+});
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/view/echarts_yl/eP2.vue b/src/view/echarts_yl/eP2.vue
index ec2b56f..55c2b76 100644
--- a/src/view/echarts_yl/eP2.vue
+++ b/src/view/echarts_yl/eP2.vue
@@ -21,7 +21,7 @@ let option = {
     right: "15%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff",
     },
   },
   grid: {
@@ -46,7 +46,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
@@ -62,7 +62,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
diff --git a/src/view/echarts_yl/eP2_2.vue b/src/view/echarts_yl/eP2_2.vue
index ec2b56f..55c2b76 100644
--- a/src/view/echarts_yl/eP2_2.vue
+++ b/src/view/echarts_yl/eP2_2.vue
@@ -21,7 +21,7 @@ let option = {
     right: "15%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff",
     },
   },
   grid: {
@@ -46,7 +46,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
@@ -62,7 +62,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
diff --git a/src/view/echarts_yl/eP3.vue b/src/view/echarts_yl/eP3.vue
index 2bccd28..9241a28 100644
--- a/src/view/echarts_yl/eP3.vue
+++ b/src/view/echarts_yl/eP3.vue
@@ -21,7 +21,7 @@ let option = {
     right: "11%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff",
     },
   },
   grid: {
@@ -38,7 +38,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
@@ -54,7 +54,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
diff --git a/src/view/echarts_yl/eP3_2.vue b/src/view/echarts_yl/eP3_2.vue
index 4ae1777..e740184 100644
--- a/src/view/echarts_yl/eP3_2.vue
+++ b/src/view/echarts_yl/eP3_2.vue
@@ -19,7 +19,7 @@ let option = {
     right: "11%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff",
     },
   },
   grid: {
@@ -35,7 +35,7 @@ let option = {
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
         },
       },
       data: ["2019", "2020", "2021", "2022", "2023"],
@@ -64,7 +64,7 @@ let option = {
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
         },
       },
     },
diff --git a/src/view/echarts_yl/pie.vue b/src/view/echarts_yl/pie.vue
index 0a1d1bf..69218ca 100644
--- a/src/view/echarts_yl/pie.vue
+++ b/src/view/echarts_yl/pie.vue
@@ -19,7 +19,7 @@ let option = {
     right: "11%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff",
     },
   },
   grid: {
@@ -35,7 +35,7 @@ let option = {
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
         },
       },
       data: ["2019", "2020", "2021", "2022", "2023"],
@@ -63,7 +63,7 @@ let option = {
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
         },
       },
     },
diff --git a/src/view/echarts_yl/pie2.vue b/src/view/echarts_yl/pie2.vue
index ca1cbf5..0b6b60a 100644
--- a/src/view/echarts_yl/pie2.vue
+++ b/src/view/echarts_yl/pie2.vue
@@ -21,7 +21,7 @@ let option = {
     right: "11%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff",
     },
   },
   grid: {
@@ -38,7 +38,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
@@ -54,7 +54,7 @@ let option = {
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
-        color: "#ccc",
+        color: "#ffffff",
       },
     },
   },
diff --git a/src/view/echarts_yl/pie3d.vue b/src/view/echarts_yl/pie3d.vue
index e40ec46..6c11250 100644
--- a/src/view/echarts_yl/pie3d.vue
+++ b/src/view/echarts_yl/pie3d.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="chart" style="width:100%;height:calc(100% - 200px);min-height:200px;"></div>
+    <div ref="chart" style="width:100%;height:250px;"></div>
 </template>
 
 <script setup>
diff --git a/src/view/echarts_yl/ylJHSY.vue b/src/view/echarts_yl/ylJHSY.vue
index f1bf112..be8d3e2 100644
--- a/src/view/echarts_yl/ylJHSY.vue
+++ b/src/view/echarts_yl/ylJHSY.vue
@@ -60,7 +60,7 @@ const option = {
   grid: {
     left: "6%",
     right: "9%",
-    bottom: "0%",
+    bottom: "2%",
     containLabel: true,
     color: "#ffffff",
   },
diff --git a/src/view/hygiene.vue b/src/view/hygiene.vue
index e535637..bf052c2 100644
--- a/src/view/hygiene.vue
+++ b/src/view/hygiene.vue
@@ -388,7 +388,7 @@ const change = (name, index) => {
 .right_bg {
   width: 642px;
   box-sizing: border-box;
-  padding-left: 10px;
+  padding-left: 20px;
   margin-right: 28px;
   background-image: url(@/assets/images/right_bg.png);
   background-repeat: no-repeat;
diff --git a/src/view/sy.vue b/src/view/sy.vue
index ca3956f..31075bc 100644
--- a/src/view/sy.vue
+++ b/src/view/sy.vue
@@ -1,460 +1,1364 @@
 <template>
   <div class="module">
-    <div class="module_left">
-      <div class="displayFlex">
-        <div class="flex1">
-          <div class="yd_title">
-            <span class="text">助乡兴趣点</span>
+    <div class="displayFlex left_bg">
+      <div class="flex1">
+        <div class="yd_title left_1"></div>
+        <div class="left_1_bg">
+          <div class="item yl_1">
+            <div class="item_title">
+              职工基本<span class="blue">养老</span>保险
+            </div>
+            <div class="item_content">
+              <div class="sr">
+                <span class="left">收入：</span
+                ><span class="right">147.380.290</span>
+              </div>
+              <div class="sr" style="margin-top: 5px">
+                <span class="left">支出：</span
+                ><span class="right">147.380.290</span>
+              </div>
+            </div>
+          </div>
+          <div class="item yl_2">
+            <div class="item_title"><span class="blue">工伤</span>保险</div>
+            <div class="item_content">
+              <div class="sr">
+                <span class="left">收入：</span
+                ><span class="right">147.380.290</span>
+              </div>
+              <div class="sr" style="margin-top: 5px">
+                <span class="left">支出：</span
+                ><span class="right">147.380.290</span>
+              </div>
+            </div>
+          </div>
+          <div class="item yl_3">
+            <div class="item_title">
+              城乡居民<span class="blue">养老</span>保险
+            </div>
+            <div class="item_content">
+              <div class="sr">
+                <span class="left">收入：</span
+                ><span class="right">147.380.290</span>
+              </div>
+              <div class="sr" style="margin-top: 5px">
+                <span class="left">支出：</span
+                ><span class="right">147.380.290</span>
+              </div>
+            </div>
+          </div>
+          <div class="item yl_4">
+            <div class="item_title">
+              职工基本<span class="yellow">医疗</span>保险
+            </div>
+            <div class="item_content">
+              <div class="sr">
+                <span class="left">收入：</span
+                ><span class="right">147.380.290</span>
+              </div>
+              <div class="sr" style="margin-top: 5px">
+                <span class="left">支出：</span
+                ><span class="right">147.380.290</span>
+              </div>
+            </div>
+          </div>
+          <div class="item yl_5">
+            <div class="item_title">
+              城乡居民<span class="yellow">医疗</span>保险
+            </div>
+            <div class="item_content">
+              <div class="sr">
+                <span class="left">收入：</span
+                ><span class="right">147.380.290</span>
+              </div>
+              <div class="sr" style="margin-top: 5px">
+                <span class="left">支出：</span
+                ><span class="right">147.380.290</span>
+              </div>
+            </div>
           </div>
-          <ePie></ePie>
         </div>
-        <div class="flex1">
-          <div class="yd_title">
-            <span class="text">基本信息</span>
+        <div class="left_1_1"></div>
+        <div class="left_jzfw">
+          <div class="left_1_2">
+            <div class="top">救助人数</div>
+            <div class="bottom">79.972</div>
           </div>
-          <div class="basicInformation">
-            <div class="basicInformation_item">
-              <img class="icon" src="../assets/img_01.png" alt="" />
+          <div class="left_1_3">
+            <div class="top">救助金额</div>
+            <div class="bottom">812,471,092</div>
+          </div>
+        </div>
+      </div>
+      <div class="flex1" style="margin-top: 10px">
+        <div class="yd_title left_2"></div>
+        <div class="left_2_top">
+          <div class="item school">
+            <div class="shang">学校</div>
+            <div class="xia">100</div>
+          </div>
+          <div class="item teacher">
+            <div class="shang">教师</div>
+            <div class="xia">4.827</div>
+          </div>
+          <div class="item student">
+            <div class="shang">学生</div>
+            <div class="xia">42.827</div>
+          </div>
+        </div>
+        <div class="left_2_bottom">
+          <div class="left_2_bottom_item">
+            <div class="left_2_bottom_item_shang">
+              <div class="left">
+                <span class="span1">{{ jysyList[0].title }}</span
+                >学校师生比
+              </div>
               <div class="right">
-                <div class="label">
-                  <span>学历</span>
-                </div>
-                <p>浙江大学研究生</p>
+                {{ jysyList[0].teacher }}:{{ jysyList[0].student }}
               </div>
             </div>
-            <div class="basicInformation_item">
-              <img class="icon" src="../assets/img_01.png" alt="" />
+            <div class="left_2_bottom_item_xia">
+              <div class="csbl" :style="cs"></div>
+            </div>
+          </div>
+          <div class="left_2_bottom_item">
+            <div class="left_2_bottom_item_shang">
+              <div class="left">
+                <span class="span2">{{ jysyList[1].title }}</span
+                >学校师生比
+              </div>
               <div class="right">
-                <div class="label">
-                  <span>性格</span>
-                </div>
-                <p>沉稳</p>
+                {{ jysyList[1].teacher }}:{{ jysyList[1].student }}
               </div>
             </div>
-            <div class="basicInformation_item">
-              <img class="icon" src="../assets/img_01.png" alt="" />
-              <div class="right">
-                <div class="label">
-                  <span>分类</span>
-                </div>
-                <p>乡贤代表</p>
-              </div>
-            </div>
-            <div class="basicInformation_item">
-              <img class="icon" src="../assets/img_01.png" alt="" />
-              <div class="right">
-                <div class="label">
-                  <span>所属行业</span>
-                </div>
-                <p>计算机<br />应用专家</p>
-              </div>
-            </div>
-            <div class="basicInformation_item">
-              <img class="icon" src="../assets/img_01.png" alt="" />
-              <div class="right">
-                <div class="label">
-                  <span>家属情况</span>
-                </div>
-                <p>父母去世，姨妈 在象</p>
-              </div>
-            </div>
-            <div class="basicInformation_item">
-              <img class="icon" src="../assets/img_01.png" alt="" />
-              <div class="right">
-                <div class="label">
-                  <span>对乡情感</span>
-                </div>
-                <p>积极参与</p>
-              </div>
+            <div class="left_2_bottom_item_xia">
+              <div class="ncbl" :style="nc"></div>
             </div>
           </div>
         </div>
       </div>
-      <div class="displayFlex">
-        <div class="flex1">
-          <div class="yd_title">
-            <span class="text">活动数据分析</span>
+      <div class="flex1" style="margin-top: 10px">
+        <div class="yd_title left_3"></div>
+        <div class="left_3_1">
+          <div class="left_3_1_item">
+            <div>2,087</div>
+            <div>就业培训</div>
           </div>
-          <eGraph></eGraph>
-        </div>
-        <div class="flex1">
-          <div class="yd_title">
-            <span class="text">走访日志</span>
+          <div class="left_3_1_item">
+            <div>2,087</div>
+            <div>就业见习服务</div>
           </div>
-          <div class="visitLog">
-            <div class="visitLog_item">
-              <img
-                src="../assets/img_02.png"
-                width="48px"
-                height="51px"
-                alt=""
-              />
-              <div class="visitLog_item_box">
-                <h4>故居走访</h4>
-                <p>走访人员：陈思思</p>
-                <p>走访时间：2023-03-19 09:00:03</p>
-              </div>
-              <span class="check">点击查看</span>
-            </div>
-            <div class="visitLog_item">
-              <img
-                src="../assets/img_02.png"
-                width="48px"
-                height="51px"
-                alt=""
-              />
-              <div class="visitLog_item_box">
-                <h4>节日走访</h4>
-                <p>走访人员：陈思思</p>
-                <p>走访时间：2023-03-19 09:00:03</p>
-              </div>
-              <span class="check">点击查看</span>
-            </div>
-            <div class="visitLog_item">
-              <img
-                src="../assets/img_02.png"
-                width="48px"
-                height="51px"
-                alt=""
-              />
-              <div class="visitLog_item_box">
-                <h4>新年走访</h4>
-                <p>走访人员：陈思思</p>
-                <p>走访时间：2023-03-19 09:00:03</p>
-              </div>
-              <span class="check">点击查看</span>
-            </div>
+          <div class="left_3_1_item">
+            <div>2,087</div>
+            <div>就业援助</div>
           </div>
         </div>
       </div>
-      <div class="displayFlex">
-        <div class="flex1">
-          <div class="yd_title">
-            <span class="text">个人经历</span>
-          </div>
-          <div class="history">
-            <p>2002年至2009年担任浙江大学计算机学院和软件学院院长；</p>
-            <p>1984年获得浙江大学计算机应用专业硕士学位，之后留校任教；</p>
-            <p>1990年获得浙江大学计算机应用专业博士学位；</p>
-            <p>1994年至1996年担任浙江大学计算机系副系主任；</p>
-            <p>1997年至2002年担任浙江大学计算机系系主任；</p>
-            <p>2002年至2009年担任浙江大学计算机学院和软件学院院长；</p>
-          </div>
-        </div>
-        <div class="flex1">
-          <div class="yd_title">
-            <span class="text">职位</span>
-          </div>
-          <eBubble></eBubble>
-        </div>
-      </div>
-      <div></div>
     </div>
-    <!-- <div class="module_right">
+    <div class="displayFlex center_bg">
       <div class="flex1">
-        <div class="yd_title">
-          <span class="text">关注标签</span>
+        <div class="people_total">
+          <div class="people_total_item left">
+            <div class="number">891,284</div>
+            <img src="../assets/images/sy/man.png" alt="" />
+            <div class="sex">男性人口</div>
+          </div>
+          <div class="people_total_item2 center">
+            <img src="../assets/images/sy/people_total.png" alt="" />
+            <div class="number">2,791,284</div>
+            <div class="total">人口总数</div>
+          </div>
+          <div class="people_total_item right">
+            <div class="number">291.284</div>
+            <img src="../assets/images/sy/woman.png" alt="" />
+            <div class="sex">女性人口</div>
+          </div>
         </div>
-        <div class="concernLabel">
-          <span>计算机</span>
-          <span>大数据</span>
-          <span>互联网</span>
+        <ePie2 style="margin-top: 20px;"></ePie2>
+        <ePie style="margin-bottom:30px;"></ePie>
+        <div class="table">
+          <div class="table_choose">
+            <div
+              :class="choose == '1' ? 'choose' : 'noChoose'"
+              @click="change('1')"
+            >
+              公共服务
+            </div>
+            <div
+              :class="choose == '2' ? 'choose' : 'noChoose'"
+              @click="change('2')"
+            >
+              企业服务
+            </div>
+            <div
+              :class="choose == '3' ? 'choose' : 'noChoose'"
+              @click="change('3')"
+            >
+              政务服务
+            </div>
+          </div>
+          <el-table
+            :data="tableData"
+            style="width: 100%; height: 272px"
+            class="table_border"
+            :row-style="rowState"
+            :header-cell-style="tableHeaderColor"
+          >
+            <el-table-column prop="company" label="企业名称" width="180" />
+            <el-table-column
+              prop="address"
+              label="项目事项牵头单位"
+              width="180"
+            />
+            <el-table-column prop="finish" label="完成情况">
+              <template #default="scope">
+                <div
+                  style="letter-spacing: 3px"
+                  :style="scope.row.finish ? 'color:#FFFFFF' : 'color:#FFC06E'"
+                >
+                  {{ scope.row.finish ? "已完成" : "未完成" }}
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
       </div>
+    </div>
+    <div class="displayFlex right_bg">
       <div class="flex1">
-        <div class="yd_title">
-          <span class="text">助乡属性</span>
-        </div>
-        <div class="property">
-          <div class="property_box">
-            <h5>助乡方式</h5>
-            <p>科技助乡</p>
-          </div>
-          <div class="property_box">
-            <h5>助乡意向</h5>
-            <p>积极</p>
+        <div class="yd_title mechanism"></div>
+        <div class="ylws">
+          <div class="ylws_item" v-for="(item, index) in ylwsList" :key="index">
+            <div class="name">{{ item.name }}</div>
+            <div class="value">{{ item.value }}</div>
           </div>
         </div>
-        <div class="activity">
-          <h5>助乡活动</h5>
-          <div class="activity_content">
-            <div class="activity_box">
-              <p>
-                2021.2，象山县委统战部和象山电视台工作人员前往杭州浙江大学，拍摄《天南地北象山人》
-              </p>
-            </div>
-            <div class="activity_box">
-              <p>
-                2020.8.29陈纯院士参加在象山举办的浙江省海外高层次人才联谊会，并作院士报告
-              </p>
+      </div>
+      <div class="flex1" style="margin-top: 10px">
+        <div class="yd_title service"></div>
+        <div class="whsy">
+          <div class="whsy_item" v-for="(item, index) in whsyList" :key="index">
+            <div class="name">{{ item.name }}</div>
+            <div class="value">
+              {{ item.value }}<span>{{ item.dw }}</span>
             </div>
           </div>
         </div>
       </div>
-      <div class="flex1">
-        <div class="yd_title">
-          <span class="text">信息监测</span>
-        </div>
-        <div class="monitor">
-          <div class="monitor_box">
-            <img src="../assets/img_10.png" alt="" />
-            <div class="monitor_box_text">
-              <h4>智汇青春 有梦当燃｜这场全国大赛决赛在西子湖畔收官！</h4>
-              <p>2023-03-18</p>
-            </div>
-          </div>
-          <div class="monitor_box">
-            <img src="../assets/img_09.png" alt="" />
-            <div class="monitor_box_text">
-              <h4>智汇青春 有梦当燃｜这场全国大赛决赛在西子湖畔收官！</h4>
-              <p>2023-03-18</p>
-            </div>
+      <div class="flex1" style="margin-top: 10px">
+        <div class="yd_title last"></div>
+        <div class="tysy">
+          <div class="tysy_item" v-for="(item, index) in tysyList" :key="index">
+            <div class="value">{{ item.value }}</div>
+            <img :src="item.img" />
+            <div class="name">{{ item.name }}</div>
           </div>
         </div>
       </div>
-    </div> -->
+      <div class="flex1" style="margin-top: 10px">
+        <div class="yd_title last_1"></div>
+        <table class="table">
+          <tbody>
+            <tr
+              v-for="(item, index) in jtsyList"
+              :key="index"
+              style="display: flex; box-sizing: border-box"
+            >
+              <td>{{ item.name }}</td>
+              <td>
+                <div class="s1">{{ item.key1 }}</div>
+                :<span class="s2">{{ item.key1_value }}</span>
+              </td>
+              <td>
+                <span class="s1">{{ item.key2 }}</span
+                >:<span class="s2">{{ item.key2_value }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-// import eBubble from "./echarts/bubble.vue";
-// import ePie from "./echarts/pie.vue";
-// import ePie2 from "./echarts/pie2.vue";
-// import eGraph from "./echarts/graph.vue";
+import ePie from "./echarts_sy/pie.vue";
+import ePie2 from "./echarts_sy/pie2.vue";
+import footerball from "../assets/images/sy/footerball.png";
+import baskerball from "../assets/images/sy/baskerball.png";
+import badminton from "../assets/images/sy/badminton.png";
+import running from "../assets/images/sy/running.png";
+import tableTennis from "../assets/images/sy/tableTennis.png";
+import { ref, onMounted, onBeforeMount, computed } from "vue";
+const choose = ref("1");
+
+const change = (index) => {
+  choose.value = index;
+};
+const tableData = ref([
+  {
+    company: "龙游县文旅集团",
+    address: "龙游县五一单位",
+    finish: true,
+  },
+  {
+    company: "龙游县文旅集团",
+    address: "龙游县五一单位",
+    finish: true,
+  },
+  {
+    company: "龙游县文旅集团",
+    address: "龙游县五一单位",
+    finish: true,
+  },
+  {
+    company: "龙游县文旅集团",
+    address: "龙游县五一单位",
+    finish: false,
+  },
+]);
+const rowState = (row) => {
+  if (row.rowIndex % 2 == 0) {
+    return {
+      letterSpacing: "1px",
+      fontSize: "14px",
+      height: "36px",
+      backgroundColor: "rgba(31, 63, 113, 1)",
+      color: "#fff",
+    };
+  } else if (row.rowIndex % 2 !== 0) {
+    return {
+      letterSpacing: "1px",
+      fontSize: "14px",
+      height: "36px",
+      backgroundColor: "rgba(43, 74, 121, 1)",
+      color: "#fff",
+    };
+  }
+};
+const tableHeaderColor = (arg) => {
+  return {
+    letterSpacing: "1px",
+    fontSize: "15px",
+    height: "50px",
+    backgroundColor: "#455F8A",
+    color: "#fff",
+  };
+};
+const cs =computed(()=>{
+  let str=`--teacher: ${jysyList.value[0].teacher}; --total: ${jysyList.value[0].teacher+jysyList.value[0].student}`;
+  return str
+})
+const nc =computed(()=>{
+   let str=`--teacher: ${jysyList.value[1].teacher}; --total: ${jysyList.value[1].teacher+jysyList.value[1].student}`;
+  return str
+})
+const jysyList = ref([
+  {
+    title: "城市",
+    teacher: 1,
+    student: 8,
+  },
+  {
+    title: "农村",
+    teacher: 1,
+    student: 12,
+  },
+]);
+const ylwsList = ref([
+  {
+    name: "医院卫生院",
+    value: 50,
+  },
+  {
+    name: "注册护士",
+    value: 38.871,
+  },
+  {
+    name: "职业医生",
+    value: 28.871,
+  },
+  {
+    name: "家庭签约医生",
+    value: 6.871,
+  },
+  {
+    name: "医院卫生院床位数",
+    value: 18.261,
+  },
+  {
+    name: "健康档案建档",
+    value: 129.371,
+  },
+  {
+    name: "村社卫生服务站",
+    value: 98,
+  },
+]);
+
+const whsyList = ref([
+  {
+    name: "公共图书馆(南孔书院)",
+    value: "198",
+    dw: "家",
+  },
+  {
+    name: "总藏书",
+    value: "1983",
+    dw: "万册",
+  },
+  {
+    name: "送戏下乡次数",
+    value: "2787",
+    dw: "次",
+  },
+  {
+    name: "博物馆观展人次",
+    value: "1.292.874",
+    dw: "次",
+  },
+  {
+    name: "图书借阅",
+    value: "1.724.012",
+    dw: "次",
+  },
+]);
+
+const tysyList = ref([
+  {
+    name: "足球场",
+    value: "100",
+    img: footerball,
+  },
+  {
+    name: "篮球场",
+    value: "100",
+    img: baskerball,
+  },
+  {
+    name: "乒乓球馆",
+    value: "100",
+    img: tableTennis,
+  },
+  {
+    name: "羽毛球馆",
+    value: "100",
+    img: badminton,
+  },
+  {
+    name: "绿色跑道",
+    value: "100",
+    img: running,
+  },
+]);
+
+const jtsyList = ref([
+  {
+    name: "公共自行车",
+    key1: "骑行次数",
+    key1_value: "1172491",
+    key2: "骑行时长",
+    key2_value: "1283h",
+  },
+  {
+    name: "电动单车",
+    key1: "骑行次数",
+    key1_value: "1172491",
+    key2: "骑行时长",
+    key2_value: "1283h",
+  },
+  {
+    name: "公共汽车",
+    key1: "公交线路",
+    key1_value: "176",
+    key2: "乘坐人次",
+    key2_value: "239741",
+  },
+  {
+    name: "长途汽车",
+    key1: "班车次数",
+    key1_value: "133",
+    key2: "客流量",
+    key2_value: "192874",
+  },
+  {
+    name: "高铁",
+    key1: "列车班次",
+    key1_value: "23",
+    key2: "客流量",
+    key2_value: "113414",
+  },
+]);
 </script>
 
 <style lang="scss" scoped>
 .displayFlex {
+  box-sizing: border-box;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  width: 100%;
+  // flex: 1;
+  width: 33.333333333%;
 }
+
 .flex1 {
-  flex: 1;
-  padding: 0 38px;
+  // flex: 1;
+  // padding: 0 28px;
   box-sizing: border-box;
 }
+
+.flex2 {
+  // flex: 1;
+  // padding: 0 38px;
+  box-sizing: border-box;
+}
+
 .module {
   display: flex;
-  .module_left {
-    display: flex;
-  }
-  //   .module_right {
-  //     flex: 0 0 25%;
-  //   }
+  width: 100%;
 }
 
 .yd_title {
-  background-image: url(@/assets/img_04.png);
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
+  // background-image: url(@/assets/img_04.png);
+  // background-repeat: no-repeat;
+  // background-size: 100% 100%;
   box-sizing: border-box;
-  width: 100%;
-  height: 36px;
+  width: 94%;
+  height: 42px;
   position: relative;
+
   .text {
+    display: flex;
+    position: absolute;
     font-size: 16px;
     font-family: SourceHanSansCN;
     font-weight: bold;
     color: #ffffff;
     position: absolute;
-    left: 33px;
-    top: 3px;
+    right: 5px;
+    top: 1px;
+  }
+  .c {
+    width: 130px;
+    height: 42px;
+    cursor: pointer;
   }
 }
 
-.basicInformation {
+.mechanism {
+  background-image: url(@/assets/images/sy/right_1.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.service {
+  background-image: url(@/assets/images/sy/right_2.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.last {
+  background-image: url(@/assets/images/sy/right_3.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.last_1 {
+  background-image: url(@/assets/images/sy/right_4.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.serviceBox {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  padding-top: 22px;
-  .basicInformation_item {
-    flex: 0 0 50%;
-    padding: 0 2px;
-    margin-bottom: 10px;
-    margin-top: 10px;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  .serviceimg {
+    width: 182px;
+    height: 35px;
+  }
+
+  .serviceTop {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 36px 0px 20px;
     box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    .icon {
-      width: 79px;
-      height: 47px;
-    }
-    .right {
-      margin-left: 4px;
-
-      .label {
-        background-image: url(@/assets/img_11.png);
-        background-size: 100%;
-        background-repeat: no-repeat;
-        background-position: bottom;
-        margin-bottom: 4px;
-        span {
-          font-size: 12px;
-          font-weight: 400;
-          color: #eff0f1;
-          line-height: 19px;
-          margin-left: 2px;
-        }
-      }
-      p {
-        font-size: 16px;
-        font-weight: bold;
-        color: #6acbff;
-        line-height: 24px;
-      }
-    }
-  }
-}
-
-.visitLog {
-  .visitLog_item {
-    display: flex;
-    align-items: center;
-    background-image: url(@/assets/img_12.png);
-    background-size: 100% 100%;
-    margin-top: 16px;
-    padding: 15px 8px;
-    box-sizing: border-box;
-    img {
-      display: inline-block;
-      margin-right: 10px;
-    }
-    .visitLog_item_box {
-      flex: auto;
-      h4 {
-        font-size: 18px;
-        font-family: MicrosoftYaHei;
-        font-weight: bold;
-        color: #0096ff;
-        margin-bottom: 2px;
-      }
-      p {
-        font-size: 12px;
-        font-family: SourceHanSansCN;
-        font-weight: 400;
-        color: #ffffff;
-        margin-top: 6px;
-      }
-    }
-    .check {
-      font-size: 12px;
-      font-family: SourceHanSansCN;
-      font-weight: 400;
-      color: #0096ff;
-      line-height: 20px;
-    }
-  }
-}
-
-.history {
-  padding-top: 12px;
-  p {
-    margin-top: 12px;
-    font-size: 12px;
-    font-weight: 400;
-    color: #ffffff;
-    line-height: 28px;
-    border-bottom: 13px solid rgba(57, 59, 109, 1);
-  }
-}
-
-.concernLabel {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 12px 0 20px;
-  span {
-    text-align: center;
-    background: rgba(0, 89, 130, 0.73);
-    border-radius: 10px;
-    width: 118px;
-    height: 49px;
-    line-height: 49px;
-    font-size: 18px;
-    font-weight: 400;
-    color: #ffffff;
-    margin: 0 10px;
-  }
-}
-.property {
-  display: flex;
-  padding: 14px 0 10px;
-  .property_box {
-    background-image: url(@/assets/img_05.png);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    width: 179px;
-    height: 91px;
-    margin: 0 12px;
-    text-align: center;
-    h5 {
-      font-size: 14px;
-      font-weight: 400;
-      color: #ffffff;
-      margin: 9px 0 16px;
-    }
-    p {
-      font-size: 21px;
-      font-weight: bold;
-      color: #48ece7;
-    }
-  }
-}
-.activity {
-  h5 {
-    font-size: 14px;
-    font-weight: bold;
-    color: rgba(0, 164, 250, 0.8);
-    line-height: 47px;
-    border-bottom: 2px solid rgba(0, 164, 250, 1);
-    margin-bottom: 17px;
-  }
-  .activity_content {
-    margin: 0 -6px 12px;
-    display: flex;
-    .activity_box {
-      width: 50%;
-      display: inline-block;
-      margin: 0 6px;
-      box-sizing: border-box;
-      background-color: rgba(15, 28, 54, 1);
-      padding: 12px 12px 19px;
-      p {
-        font-size: 14px;
-        font-weight: 400;
-        color: #ffffff;
-        line-height: 27px;
-        height: 100%;
-      }
-    }
-  }
-}
-.monitor {
-  .monitor_box {
-    display: flex;
-    padding: 8px 0;
-    border-bottom: 2px solid rgba(255, 255, 255, 0.67);
-    img {
-      width: 115px;
-      height: 84px;
-      margin-right: 21px;
-    }
-    .monitor_box_text {
+    .visit {
       display: flex;
       flex-direction: column;
-      justify-content: space-between;
-      h4 {
-        font-size: 14px;
-        font-weight: 400;
+      align-items: center;
+    }
+    .medicalService {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .ylimg {
+        width: 200px;
+        height: 220px;
+      }
+
+      .medicalServiceTop {
+        position: relative;
+
+        span {
+          position: absolute;
+          left: 39px;
+          top: 35%;
+          font-weight: bold;
+          font-size: 32px;
+          color: #ffffff;
+          line-height: 41px;
+          letter-spacing: 1px;
+          text-align: center;
+          font-style: normal;
+          font-family: DINAlternate, DINAlternate;
+        }
+      }
+    }
+  }
+}
+.mealAssistance {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .mealAssistanceimg {
+    width: 495px;
+    height: 35px;
+  }
+}
+
+.left_1 {
+  background-image: url(@/assets/images/sy/left_1.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.left_2 {
+  background-image: url(@/assets/images/sy/left_2.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.left_3 {
+  background-image: url(@/assets/images/sy/left_3.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.center_1 {
+  width: 96%;
+  background-image: url(@/assets/images/hygiene/center_title_1.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.center_2 {
+  width: 96%;
+  background-image: url(@/assets/images/hygiene/new_center.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.center_top {
+  width: 95%;
+  height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  .item {
+    display: flex;
+    align-items: center;
+    .left {
+      width: 102px;
+      height: 102px;
+    }
+    .right {
+      margin-left: 10px;
+      .right_top {
+        font-size: 16px;
         color: #ffffff;
+        line-height: 22px;
+        letter-spacing: 2px;
+      }
+      .right_center {
+        width: 100px;
+        height: 7px;
+      }
+      .right_bottom {
+        margin-top: 3px;
+        padding: 5px;
+        font-size: 22px;
+        color: #2ef1ff;
+        line-height: 26px;
+        text-shadow: 0px 0px 13px rgba(0, 252, 255, 0.5);
+        background: linear-gradient(
+          270deg,
+          rgba(255, 255, 255, 0) 0%,
+          #3976a1 100%
+        );
+      }
+    }
+  }
+}
+.left_bg {
+  width: 642px;
+  // height: 100%;
+  box-sizing: border-box;
+  padding-left: 50px;
+  margin-right: 28px;
+  background-image: url(@/assets/images/left_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.center_bg {
+  width: 582px;
+  // 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: 642px;
+  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%;
+}
+//左边
+//民生福祉
+.left_1_bg {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  width: 602px;
+  height: 279px;
+  background-image: url(@/assets/images/sy/left_1_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin-left: -25px;
+  position: relative;
+  .item {
+    display: flex;
+    flex-direction: column;
+    .item_title {
+      font-weight: 600;
+      font-family: PangMenZhengDao;
+      font-size: 18px;
+      color: #ffffff;
+      line-height: 21px;
+      letter-spacing: 1px;
+      .blue {
+        font-family: PangMenZhengDao;
+        font-size: 18px;
+        color: rgba(0, 234, 255, 1);
+        line-height: 21px;
+        letter-spacing: 1px;
+      }
+      .yellow {
+        font-family: PangMenZhengDao;
+        font-size: 18px;
+        color: rgba(255, 216, 99, 1);
+        line-height: 21px;
+        letter-spacing: 1px;
+      }
+    }
+    .item_content {
+      margin-top: 15px;
+      .sr {
+        display: flex;
+        align-items: center;
+        .left {
+          font-weight: 400;
+          font-size: 12px;
+          color: #ffffff;
+          line-height: 17px;
+        }
+        .right {
+          font-weight: 400;
+          font-size: 16px;
+          color: #ffffff;
+          line-height: 19px;
+        }
+      }
+    }
+  }
+}
+.yl_1 {
+  position: absolute;
+  top: 50px;
+  left: 75px;
+}
+.yl_2 {
+  position: absolute;
+  top: 50px;
+  left: 233px;
+  align-items: center;
+}
+.yl_3 {
+  position: absolute;
+  top: 50px;
+  left: 370px;
+  align-items: flex-end;
+}
+.yl_4 {
+  position: absolute;
+  top: 160px;
+  left: 90px;
+  align-items: center;
+}
+.yl_5 {
+  position: absolute;
+  top: 160px;
+  left: 350px;
+  align-items: center;
+}
+.left_1_1 {
+  width: 551px;
+  height: 25px;
+  background-image: url(@/assets/images/sy/left_1_1.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.left_jzfw {
+  display: flex;
+  width: 96%;
+  margin-top: 18px;
+  margin-bottom: 18px;
+  justify-content: space-around;
+  .left_1_2 {
+    box-sizing: border-box;
+    padding: 18px 21px;
+    width: 225px;
+    height: 78px;
+    background-image: url(@/assets/images/sy/left_1_2.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    .top {
+      font-weight: 400;
+      font-size: 14px;
+      color: #ffffff;
+      line-height: 20px;
+      letter-spacing: 1px;
+      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
+    }
+    .bottom {
+      margin-top: 6px;
+      font-weight: normal;
+      font-size: 16px;
+      color: #00f5ff;
+      line-height: 18px;
+      letter-spacing: 1px;
+      text-shadow: 0px 0px 24px rgba(0, 252, 255, 0.5);
+    }
+  }
+  .left_1_3 {
+    box-sizing: border-box;
+    padding: 18px 21px;
+    width: 225px;
+    height: 78px;
+    background-image: url(@/assets/images/sy/left_1_3.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    .top {
+      font-weight: 400;
+      font-size: 14px;
+      color: #ffffff;
+      line-height: 20px;
+      letter-spacing: 1px;
+      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
+    }
+    .bottom {
+      margin-top: 6px;
+      font-weight: normal;
+      font-size: 16px;
+      color: #00f5ff;
+      line-height: 18px;
+      letter-spacing: 1px;
+      text-shadow: 0px 0px 24px rgba(0, 252, 255, 0.5);
+    }
+  }
+}
+//教育事业
+.left_2_top {
+  width: 94%;
+  margin-top: 22px;
+  display: flex;
+  justify-content: space-around;
+  .item {
+    box-sizing: border-box;
+    width: 174px;
+    height: 75px;
+    padding: 12px 20px;
+    .shang {
+      font-weight: 400;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 22px;
+      letter-spacing: 1px;
+      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
+      margin-bottom: 5px;
+    }
+  }
+  .school {
+    background-image: url(@/assets/images/sy/school.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    .xia {
+      font-weight: normal;
+      font-size: 18px;
+      color: #00f5ff;
+      line-height: 21px;
+      letter-spacing: 3px;
+      text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
+    }
+  }
+  .teacher {
+    background-image: url(@/assets/images/sy/teacher.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    .xia {
+      font-weight: normal;
+      font-size: 18px;
+      color: #00c1ff;
+      line-height: 21px;
+      letter-spacing: 2px;
+      text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
+    }
+  }
+  .student {
+    background-image: url(@/assets/images/sy/student.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    .xia {
+      font-weight: normal;
+      font-size: 18px;
+      color: #ffe689;
+      line-height: 21px;
+      letter-spacing: 2px;
+      text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
+    }
+  }
+}
+.left_2_bottom {
+  width: 94%;
+  margin-top: 5px;
+  display: flex;
+  justify-content: space-around;
+  &_item {
+    box-sizing: border-box;
+    padding: 20px;
+    width: 267px;
+    height: 74px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    border: 0px solid #7aceff;
+    display: flex;
+    flex-direction: column;
+    &_shang {
+      display: flex;
+      justify-content: space-between;
+      font-weight: 500;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 22px;
+      letter-spacing: 1px;
+      .span1 {
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 22px;
+        letter-spacing: 1px;
+        color: #00f5ff;
+      }
+      .span2 {
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 22px;
+        letter-spacing: 1px;
+        color: #ffd863;
+      }
+      .right {
+        letter-spacing: 3px;
+      }
+    }
+    &_xia {
+      margin-top: 10px;
+      width: 100%;
+      height: 1px;
+      border: 1px solid rgba(255, 255, 255, 0.77);
+      position: relative;
+      .csbl {
+        position: absolute;
+        top: -2px;
+        left: 0;
+        width: calc(var(--teacher) / var(--total) * 100%);
+        border-radius: 3px;
+        border: 3px solid #00f5ff;
+      }
+      .ncbl {
+        position: absolute;
+        top: -2px;
+        left: 0;
+        width: calc(var(--teacher) / var(--total) * 100%);
+        border-radius: 3px;
+        border: 3px solid #ffd863;
+      }
+    }
+  }
+  margin-bottom: 22px;
+}
+//就业服务
+.left_3_1 {
+  width: 94%;
+  margin-top: 15px;
+  display: flex;
+  justify-content: space-around;
+  &_item {
+    box-sizing: border-box;
+    width: 160px;
+    height: 133px;
+    background-image: url(@/assets/images/sy/jyfw.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    text-align: center;
+    padding-top: 22px;
+    div:nth-child(1) {
+      font-family: PangMenZhengDao, PangMenZhengDao;
+      font-weight: normal;
+      font-size: 22px;
+      color: #ffffff;
+      line-height: 25px;
+      letter-spacing: 1px;
+      text-shadow: 0px 0px 24px rgba(0, 252, 255, 0.5);
+    }
+    div:nth-child(2) {
+      margin-top: 5px;
+      font-weight: 500;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 22px;
+      letter-spacing: 1px;
+      text-shadow: 0px 0px 4px rgba(27, 87, 110, 0.65);
+    }
+  }
+}
+//中间
+.people_total {
+  width: 522px;
+  height: 172px;
+  margin-left: 15px;
+  background-image: url(@/assets/images/sy/center_1_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  &_item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .number {
+      font-weight: normal;
+      font-size: 16px;
+      color: #00f5ff;
+      line-height: 18px;
+      letter-spacing: 2px;
+      text-shadow: 0px 0px 24px rgba(0, 252, 255, 0.5);
+    }
+    img {
+      margin: 3px 0;
+      width: 80px;
+      height: 56px;
+    }
+    .sex {
+      color: #ffffff;
+    }
+  }
+  &_item2 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .number {
+      margin: 3px 0;
+      font-weight: normal;
+      font-size: 16px;
+      color: #00f5ff;
+      line-height: 18px;
+      letter-spacing: 2px;
+      text-shadow: 0px 0px 24px rgba(0, 252, 255, 0.5);
+    }
+    img {
+      width: 60px;
+      height: 59px;
+    }
+    .total {
+      font-size: 18px;
+      color: #ffffff;
+    }
+  }
+  .left {
+    position: absolute;
+    top: 40px;
+    left: 50px;
+  }
+  .center {
+    position: absolute;
+    top: 35px;
+    left: 215px;
+  }
+  .right {
+    position: absolute;
+    top: 40px;
+    right: 50px;
+  }
+}
+.table {
+  width: 94%;
+  margin-left: 5px;
+  .table_choose {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+    .choose {
+      text-align: center;
+      line-height: 40px;
+      width: 170px;
+      height: 40px;
+      background: linear-gradient(
+        180deg,
+        rgba(0, 142, 255, 0.35) 0%,
+        rgba(0, 142, 255, 0.52) 100%
+      );
+      box-shadow: inset 0px -2px 0px 0px #00b4ff;
+      border-radius: 2px 0px 0px 2px;
+      color: #ffffff;
+    }
+    .noChoose {
+      text-align: center;
+      line-height: 40px;
+      width: 170px;
+      height: 40px;
+      background: #073e84;
+      border-radius: 2px 0px 0px 2px;
+      color: #ccc;
+    }
+  }
+}
+:deep(.el-table) {
+  background: rgba(32, 64, 115, 1);
+
+  --el-table-border-color: none;
+  border: 1px solid #7aceff;
+}
+:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
+  border: none !important;
+}
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #2f4b74;
+}
+
+::v-deep .el-table__empty-block {
+  background-color: #122560;
+}
+
+.el-table .el-table__row {
+  border-bottom: none;
+}
+//右边
+//医疗卫生
+.ylws {
+  width: 96%;
+  height: 150px;
+  padding-top: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  &_item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 35px;
+    .name {
+      padding: 8px 20px 8px 32px;
+      background-image: url(@/assets/images/sy/ylws.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      font-weight: 500;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 22px;
+      letter-spacing: 1px;
+      text-shadow: 0px 2px 2px #005473;
+    }
+    .value {
+      margin-top: 5px;
+      font-family: DINAlternate, DINAlternate;
+      font-weight: bold;
+      font-size: 24px;
+      color: #ffffff;
+      line-height: 28px;
+      letter-spacing: 2px;
+      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.63);
+    }
+  }
+}
+//文化事业
+.whsy {
+  width: 94%;
+  height: 200px;
+  padding-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  &_item {
+    box-sizing: border-box;
+    height: 94px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-image: url(@/assets/images/sy/whsy.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 30%;
+    justify-content: center;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    .name {
+      font-family: PangMenZhengDao;
+      font-size: 18px;
+      color: #ffffff;
+      line-height: 21px;
+      letter-spacing: 2px;
+    }
+    .value {
+      margin-top: 5px;
+      font-weight: 500;
+      font-size: 30px;
+      color: #00f7ff;
+      line-height: 35px;
+      letter-spacing: 1px;
+      span {
+        font-size: 14px;
+        color: #d9f8ff;
         line-height: 20px;
       }
-      p {
-        font-size: 14px;
+    }
+  }
+  &_item:nth-child(1) {
+    .name {
+      text-align: center;
+      width: 113px;
+    }
+    .value {
+      margin-top: 0px;
+    }
+  }
+  &_item:nth-child(4) {
+    width: 45%;
+  }
+  &_item:nth-child(5) {
+    width: 45%;
+  }
+}
+//体育事业
+.tysy {
+  width: 94%;
+  padding-top: 10px;
+
+  display: flex;
+  justify-content: space-around;
+  &_item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .value {
+      font-weight: bold;
+      font-size: 22px;
+      color: #ffffff;
+      line-height: 26px;
+      letter-spacing: 3px;
+      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.63);
+    }
+    img {
+      width: 100px;
+      height: 70px;
+    }
+    .name {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 500;
+      font-size: 14px;
+      color: #ffffff;
+      line-height: 20px;
+      letter-spacing: 2px;
+      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
+      padding: 0 20px;
+      background-image: url(@/assets/images/sy/bq.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+//交通事业
+table {
+  margin-top: 20px;
+  width: 94%;
+  border-radius: 4px;
+  border: 0px solid #7aceff;
+  tbody {
+    tr {
+      width: 100%;
+      background: rgba(42, 71, 119, 1);
+      &:nth-of-type(2n + 1) {
+        background: rgba(32, 63, 112, 1);
+        td:nth-child(1) {
+          background: rgba(60, 87, 131, 0.8);
+        }
+      }
+
+      td {
+        width: 40%;
         font-weight: 400;
-        color: #818181;
-        line-height: 23px;
+        font-size: 14px;
+        color: #ffffff;
+        line-height: 43px;
+        display: flex;
+        .s1 {
+          display: block;
+          width: 65px;
+          // background: red;
+          text-align: justify;
+          text-align-last: justify;
+        }
+        .s2 {
+          margin-left: 3px;
+          color: #00ffed;
+        }
+      }
+      td:nth-child(1) {
+        display: block;
+        width: 122px;
+        font-weight: 500;
+        font-size: 14px;
+        color: #ffffff;
+        line-height: 43px;
+        letter-spacing: 1px;
+        text-align: justify;
+        text-align-last: justify;
+        box-sizing: border-box;
+        padding-left: 20px;
+        padding-right: 20px;
+        background: rgba(63, 89, 133, 1);
+      }
+      td:nth-child(2) {
+        padding-left: 60px;
+        box-sizing: border-box;
+        letter-spacing: 2px;
+      }
+      td:nth-child(3) {
+        padding-left: 60px;
+        box-sizing: border-box;
+        letter-spacing: 2px;
       }
     }
   }
diff --git a/src/view/yl.vue b/src/view/yl.vue
index b35aa5f..35e769e 100644
--- a/src/view/yl.vue
+++ b/src/view/yl.vue
@@ -379,7 +379,7 @@ const change = (name, index) => {
 .right_bg {
   width: 642px;
   box-sizing: border-box;
-  padding-left: 10px;
+  padding-left: 20px;
   margin-right: 28px;
   background-image: url(@/assets/images/right_bg.png);
   background-repeat: no-repeat;
@@ -650,6 +650,7 @@ const change = (name, index) => {
   background-repeat: no-repeat;
   background-size: 100% 100%;
   margin: 4px auto;
+  margin-top: 10px;
   position: relative;
 
   .mtpImg1 {