1

src/view/echarts_hygiene/bubble.vue

@@ -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>

src/view/echarts_hygiene/eP2.vue

@@ -0,0 +1,159 @@
+<template>
+  <div
+    ref="chart"
+    style="width: 100%; height: calc(100% - 46px); min-height: 250px"
+  ></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(null); // 创建DOM引用
+const data1 = [
+  "龙游县人民医院",
+  "龙游县中医院",
+  "龙游县横山镇中心卫生院",
+  "龙游县溪水镇中心卫生院",
+  "龙游县龙游街道社区卫生服务中心",
+  "龙游县塔石镇中心卫生院",
+  "龙游县罗家县中心卫生院",
+  "龙游县社阳乡卫生院",
+  "龙游妇幼保健院",
+  "龙游妇幼保健院",
+  "龙游妇幼保健院",
+  "龙游妇幼保健院",
+  "龙游妇幼保健院",
+];
+const data2 = [
+  "200",
+  "200",
+  "120",
+  "200",
+  "420",
+  "100",
+  "100",
+  "100",
+  "120",
+  "333",
+];
+
+let option = {
+  grid: {
+    left: "0%",
+    right: "10%",
+    bottom: "1%",
+    top: "6%",
+    containLabel: true,
+  },
+  tooltip: {
+    trigger: "axis", //axis , item
+  },
+  // backgroundColor: '#002D54',
+  xAxis: {
+    type: "value",
+    splitLine: {
+      lineStyle: {
+        color: "rgba(77, 128, 254, 0.2)",
+        type: "line",
+      },
+    },
+    axisTick: {
+      show: true,
+    },
+    splitLine: {
+      show: false,
+    },
+    axisLabel: {
+      //  改变x轴字体颜色和大小
+      show: false,
+      textStyle: {
+        color: "#00c0fa",
+        fontSize: 16,
+      },
+    },
+  },
+  yAxis: [
+    {
+      type: "category",
+      inverse: true,
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: "#ccc",
+          fontSize: "11",
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
+      data: data1,
+    },
+  ],
+  series: [
+    {
+      name: "道路指数",
+      type: "bar",
+      zlevel: 1,
+      label: {
+        show: true,
+        position: "right", // 位置
+        color: "#ccc",
+        fontSize: 12,
+        distance: 10, // 距离
+        // formatter: '{c}%' // 这里是数据展示的时候显示的数据
+      }, // 柱子上方的数值
+      itemStyle: {
+        normal: {
+          borderWidth: 1,
+        //   borderColor: "rgba(0, 183, 255, 1)",
+          borderRadius: [0, 0, 50, 0], //圆角边框
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            { offset: 0, color: "rgba(0, 183, 255, 0)" },
+            { offset: 1, color: "rgba(0, 183, 255, 1)" },
+          ]),
+        },
+      },
+      barWidth: 10,
+      data: data2,
+    },
+  ],
+};
+
+onMounted(() => {
+  // 基于准备好的dom，初始化echarts实例
+  // var myChart = echarts.init(document.getElementById('main'));
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // init(); // vue3.2没有this
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option);
+
+  myChart.on("scroll", function (event) {
+    // 根据滚动位置动态计算bargap
+    var bargap = event.scrollData / 10000; // 假设滚动1%对应0.5个bargap
+    myChart.setOption({
+      yAxis: {
+        axisLabel: {
+          bargap: bargap,
+        },
+      },
+    });
+  });
+
+  // 单图表响应式: 跟随浏览器大小改变
+  //   window.addEventListener("resize", () => {
+  //     myChart.resize();
+  //   });
+});
+</script>
+
+<style scoped></style>

src/view/echarts_hygiene/eP3.vue

@@ -0,0 +1,141 @@
+<template>
+  <div
+    ref="chart"
+    style="width: 100%; height: calc(100% - 76px); min-height: 205px"
+  ></div>
+</template>
+
+<script setup >
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+const data1 = [
+  "龙游县人民医院",
+  "龙游县中医院",
+  "龙游县横山镇中心卫生院",
+  "龙游县溪水镇中心卫生院",
+  "龙游县龙游街道社区卫生服务中心",
+  "龙游县塔石镇中心卫生院",
+  "龙游县罗家县中心卫生院",
+];
+let option = {
+  tooltip: {
+    trigger: "axis",
+    // formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
+  },
+
+  grid: {
+    top: "20%",
+    left: "1%",
+    right: "10%",
+    bottom: "0%",
+    containLabel: true,
+  },
+  calculable: true,
+  xAxis: [
+    {
+      type: "category",
+      axisLabel: {
+        formatter: function (params) {
+          var str = ""; // 最终拼接成的字符串
+          var paramsLen = params.length; // 获取每项文字的个数
+          var len = 4; // 每行能显示的字的个数（根据实际情况自己设置）
+          var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
+          if (paramsLen > len) {
+            //大于设定的len就换行，不大于就不变化
+            for (var i = 0; i < rowNumber; i++) {
+              var temp = ""; // 表示每一次截取的字符串
+              var start = i * len; // 开始截取的位置
+              var end = start + len; // 结束截取的位置
+              if (i == rowNumber - 1) {
+                // 最后一次不换行
+                temp = params.substring(start, paramsLen);
+              } else {
+                // 每一次拼接字符串并换行
+                temp = params.substring(start, end) + "\n";
+              }
+              str += temp; // 最终拼成的字符串
+            }
+          } else {
+            // 给新的字符串赋值
+            str = params;
+          }
+          return str; //返回字符串
+        },
+        textStyle: {
+          color: "#ccc",
+        },
+        // rotate: 60,
+      },
+      data: data1,
+    },
+  ],
+
+  yAxis: [
+    {
+      type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
+    },
+
+  ],
+  series: [
+    {
+      name: "职工医疗保险发放人次",
+      type: "bar",
+      data: [2.0, 4.9, 7.0, 23.2, 25.6],
+      barWidth: 20,
+      itemStyle: {
+        normal: {
+          color: function (params) {
+            let colorList = [
+              "#FA897B",
+              "#FFDD94",
+              "#D0E6A5",
+              "#FFDD94",
+              "#4675C0",
+              "#B8BFD6",
+              "#FFA876",
+            ];
+            let colorItem = colorList[params.dataIndex];
+            return colorItem;
+          },
+        },
+      },
+    },
+  ],
+};
+
+// 使用生命钩子
+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>

src/view/echarts_hygiene/eP5.vue

@@ -0,0 +1,151 @@
+<template>
+  <div
+    ref="chart"
+    style="width: 100%; height: calc(100% - 66px); min-height: 320px"
+  ></div>
+</template>
+
+<script setup >
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+const data1 = [
+  "龙游县人民医院",
+  "龙游县中医院",
+  "龙游县横山镇中心卫生院",
+  "龙游县溪水镇中心卫生院",
+  "龙游县龙游街道社区卫生服务中心",
+  "龙游县塔石镇中心卫生院",
+  "龙游县罗家县中心卫生院",
+];
+let option = {
+  tooltip: {
+    trigger: "axis",
+    // formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
+  },
+
+  grid: {
+    top: "13%",
+    left: "1%",
+    right: "10%",
+    bottom: "0%",
+    containLabel: true,
+  },
+  calculable: true,
+  xAxis: [
+    {
+      type: "category",
+      axisLabel: {
+        formatter: function (params) {
+          var str = ""; // 最终拼接成的字符串
+          var paramsLen = params.length; // 获取每项文字的个数
+          var len = 5; // 每行能显示的字的个数（根据实际情况自己设置）
+          var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
+          if (paramsLen > len) {
+            //大于设定的len就换行，不大于就不变化
+            for (var i = 0; i < rowNumber; i++) {
+              var temp = ""; // 表示每一次截取的字符串
+              var start = i * len; // 开始截取的位置
+              var end = start + len; // 结束截取的位置
+              if (i == rowNumber - 1) {
+                // 最后一次不换行
+                temp = params.substring(start, paramsLen);
+              } else {
+                // 每一次拼接字符串并换行
+                temp = params.substring(start, end) + "\n";
+              }
+              str += temp; // 最终拼成的字符串
+            }
+          } else {
+            // 给新的字符串赋值
+            str = params;
+          }
+          return str; //返回字符串
+        },
+        textStyle: {
+          color: "#ccc",
+        },
+        rotate: 40,
+      },
+      data: data1,
+    },
+  ],
+
+  yAxis: [
+    {
+        name:'在册数',
+      type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
+          axisLine: {
+        //y轴线的颜色以及宽度
+        show: false,
+        lineStyle: {
+          color: "#ffffff",
+          width: 1,
+          type: "solid",
+        },
+      },
+    },
+  
+  ],
+  series: [
+    {
+      name: "职工医疗保险发放人次",
+      type: "bar",
+      data: [2.0, 4.9, 7.0, 23.2, 25.6],
+      barWidth: 20,
+      itemStyle: {
+        normal: {
+          color: function (params) {
+            let colorList = [
+              "#FA897B",
+              "#FFDD94",
+              "#D0E6A5",
+              "#FFDD94",
+              "#4675C0",
+              "#B8BFD6",
+              "#FFA876",
+            ];
+            let colorItem = colorList[params.dataIndex];
+            return colorItem;
+          },
+        },
+      },
+    },
+  ],
+};
+
+// 使用生命钩子
+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>

src/view/echarts_hygiene/eP6.vue

@@ -0,0 +1,123 @@
+<template>
+  <div ref="chart" style="width: 100%; height: calc(100% - 46px);min-height:205px;"></div>
+</template>
+
+<script setup >
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+let option = {
+  tooltip: {
+    trigger: "axis",
+    padding: [20, 10, 20, 10],
+    // formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
+  },
+  legend: {
+    data: ["高血压", "糖尿病"],
+    top: "5%",
+    right: "11%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ccc",
+    },
+  },
+  grid: {
+    top:'18%',
+    left: "1%",
+    right: "10%",
+    bottom: "3%",
+    containLabel: true,
+  },
+
+  xAxis: {
+    type: "category",
+    // boundaryGap: false,
+    data: ["2019", "2020", "2021", "2022", "2023"],
+    axisLabel: {
+      //坐标轴刻度标签的相关设置
+      textStyle: {
+        color: "#ccc",
+      },
+    },
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "rgba(226, 226, 226, 0.3)",
+        width: 1,
+      },
+    },
+    axisLabel: {
+      //坐标轴刻度标签的相关设置
+      textStyle: {
+        color: "#ccc",
+      },
+    },
+  },
+  series: [
+    {
+      name: "背景",
+      type: "bar",
+      data: [0, 0, 0, 0, 0],
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+    {
+      name: "高血压",
+      type: "line",
+      stack: "Total",
+      symbol: "emptyCircle",
+
+      symbolSize: 10,
+      itemStyle: {
+        borderColor: "#00FCFF",
+        borderWidth: 1,
+        color: "#00FCFF",
+      },
+      data: [120, 132, 101, 134, 90],
+    },
+    {
+      name: "糖尿病",
+      type: "line",
+      stack: "Total",
+      symbol: "emptyCircle",
+
+      symbolSize: 10,
+      itemStyle: {
+        borderColor: "#2468FF",
+        borderWidth: 1,
+        color: "#2468FF",
+      },
+
+      data: [150, 232, 201, 154, 190],
+    },
+  ],
+};
+
+// 使用生命钩子
+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>

src/view/echarts_hygiene/eP7.vue

@@ -0,0 +1,141 @@
+<template>
+  <div
+    ref="chart"
+    style="width: 100%; height: calc(100% - 36px); min-height: 205px"
+  ></div>
+</template>
+
+<script setup >
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+const data1 = [
+  "龙游县人民医院",
+  "龙游县中医院",
+  "龙游县横山镇中心卫生院",
+  "龙游县溪水镇中心卫生院",
+  "龙游县龙游街道社区卫生服务中心",
+  "龙游县塔石镇中心卫生院",
+  "龙游县罗家县中心卫生院",
+];
+let option = {
+  tooltip: {
+    trigger: "axis",
+    // formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
+  },
+
+  grid: {
+    top: "10%",
+    left: "1%",
+    right: "10%",
+    bottom: "0%",
+    containLabel: true,
+  },
+  calculable: true,
+  xAxis: [
+    {
+      type: "category",
+      axisLabel: {
+        formatter: function (params) {
+          var str = ""; // 最终拼接成的字符串
+          var paramsLen = params.length; // 获取每项文字的个数
+          var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
+          var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
+          if (paramsLen > len) {
+            //大于设定的len就换行，不大于就不变化
+            for (var i = 0; i < rowNumber; i++) {
+              var temp = ""; // 表示每一次截取的字符串
+              var start = i * len; // 开始截取的位置
+              var end = start + len; // 结束截取的位置
+              if (i == rowNumber - 1) {
+                // 最后一次不换行
+                temp = params.substring(start, paramsLen);
+              } else {
+                // 每一次拼接字符串并换行
+                temp = params.substring(start, end) + "\n";
+              }
+              str += temp; // 最终拼成的字符串
+            }
+          } else {
+            // 给新的字符串赋值
+            str = params;
+          }
+          return str; //返回字符串
+        },
+        textStyle: {
+          color: "#ccc",
+        },
+        rotate: 30,
+      },
+      data: data1,
+    },
+  ],
+
+  yAxis: [
+    {
+      type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
+    },
+
+  ],
+  series: [
+    {
+      name: "职工医疗保险发放人次",
+      type: "bar",
+      data: [2.0, 4.9, 7.0, 23.2, 25.6],
+      barWidth: 20,
+      itemStyle: {
+        normal: {
+          color: function (params) {
+            let colorList = [
+              "#FA897B",
+              "#FFDD94",
+              "#D0E6A5",
+              "#FFDD94",
+              "#4675C0",
+              "#B8BFD6",
+              "#FFA876",
+            ];
+            let colorItem = colorList[params.dataIndex];
+            return colorItem;
+          },
+        },
+      },
+    },
+  ],
+};
+
+// 使用生命钩子
+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>

src/view/echarts_hygiene/pie.vue

@@ -0,0 +1,165 @@
+<template>
+  <div ref="chart" style="width: 100%; height: calc(100% - 46px);min-height:155px;"></div>
+</template>
+
+<script setup >
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+let option = {
+  tooltip: {
+    trigger: "axis",
+    formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
+  },
+  legend: {
+    top: "8%",
+    right: "11%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ccc",
+    },
+  },
+  grid: {
+    left: "1%",
+    right: "10%",
+    bottom: "0%",
+    containLabel: true,
+  },
+  calculable: true,
+  xAxis: [
+    {
+      type: "category",
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
+      data: ["2019", "2020", "2021", "2022", "2023"],
+    },
+    {
+      axisTick: false,
+      type: "category",
+      data: ["2019", "2020", "2021", "2022", "2023"],
+      axisLabel: {
+        show: false,
+      },
+    },
+  ],
+
+  yAxis: [
+    {
+      type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
+    },
+    {
+      type: "value",
+      min: 0,
+      max: 100,
+      splitLine: {
+        show: false,
+        lineStyle: {
+          type: "solid",
+          color: "rgb(221, 242, 255,0.1)",
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          type: "dotted",
+        },
+      },
+      axisLabel: {
+        show: false,
+        fontSize: 14,
+        fontFamily: "MicrosoftYaHei",
+        color: "#DEF1FF",
+        lineHeight: 19,
+      },
+    },
+  ],
+  series: [
+    {
+      name: "职工医疗保险发放人次",
+      type: "bar",
+      data: [2.0, 4.9, 7.0, 23.2, 25.6],
+      barWidth: "18%",
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(142, 187, 255, 1)",
+          },
+          {
+            offset: 1,
+            color: "rgba(142, 187, 255, 0.20)",
+          },
+        ]),
+      },
+    },
+    {
+      name: "城乡医疗保险发放人次",
+      type: "bar",
+      data: [2.6, 5.9, 9.0, 26.4, 28.7],
+      barWidth: "18%",
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(23, 237, 255, 1)",
+          },
+          {
+            offset: 1,
+            color: "rgba(23, 237, 255, 0.20)",
+          },
+        ]),
+      },
+    },
+    {
+      type: "bar",
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      itemStyle: {
+        color: "rgba(221, 242, 255, 0.1)",
+      },
+      data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
+      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>

src/view/echarts_hygiene/pie2.vue

@@ -0,0 +1,122 @@
+<template>
+  <div ref="chart" style="width: 100%; height: calc(100% - 46px);min-height:155px;"></div>
+</template>
+
+<script setup >
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+let option = {
+  tooltip: {
+    trigger: "axis",
+    padding: [20, 10, 20, 10],
+    formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
+  },
+  legend: {
+    data: ["职工医疗保险金额", "城乡医疗保险金额"],
+    top: "8%",
+    right: "11%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ccc",
+    },
+  },
+  grid: {
+    left: "1%",
+    right: "10%",
+    bottom: "3%",
+    containLabel: true,
+  },
+
+  xAxis: {
+    type: "category",
+    // boundaryGap: false,
+    data: ["1月", "2月", "3月", "4月", "5月"],
+    axisLabel: {
+      //坐标轴刻度标签的相关设置
+      textStyle: {
+        color: "#ccc",
+      },
+    },
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "rgba(226, 226, 226, 0.3)",
+        width: 1,
+      },
+    },
+    axisLabel: {
+      //坐标轴刻度标签的相关设置
+      textStyle: {
+        color: "#ccc",
+      },
+    },
+  },
+  series: [
+    {
+      name: "背景",
+      type: "bar",
+      data: [0, 0, 0, 0, 0],
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+    {
+      name: "职工医疗保险金额",
+      type: "line",
+      stack: "Total",
+      symbol: "emptyCircle",
+
+      symbolSize: 10,
+      itemStyle: {
+        borderColor: "#00FCFF",
+        borderWidth: 1,
+        color: "#00FCFF",
+      },
+      data: [120, 132, 101, 134, 90],
+    },
+    {
+      name: "城乡医疗保险金额",
+      type: "line",
+      stack: "Total",
+      symbol: "emptyCircle",
+
+      symbolSize: 10,
+      itemStyle: {
+        borderColor: "#2468FF",
+        borderWidth: 1,
+        color: "#2468FF",
+      },
+
+      data: [150, 232, 201, 154, 190],
+    },
+  ],
+};
+
+// 使用生命钩子
+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>

src/view/hygiene.vue

@@ -1,273 +1,316 @@
 <template>
   <div class="module">
-    <div class="module_left">
-      <div class="displayFlex">
-        <div class="flex1">
-          <div class="yd_title">
-            <span class="text">助乡兴趣点</span>
-          </div>
-          <ePie></ePie>
-        </div>
-        <div class="flex1">
-          <div class="yd_title">
-            <span class="text">基本信息</span>
-          </div>
-          <div class="basicInformation">
-            <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>
-            <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>
-          </div>
+    <div class="displayFlex left_bg">
+      <div class="flex1" style="flex: 0.8">
+        <div class="yd_title left_1">
+          <span class="text">
+            <img
+              v-if="leftchoose.first == '1'"
+              src="@/assets/images/hygiene/yb_1.png"
+              style="width: 130px; height: 30px; cursor: pointer"
+            />
+            <img
+              v-else
+              src="@/assets/images/hygiene/yb_1_1.png"
+              style="width: 130px; height: 30px; cursor: pointer"
+              @click="change('first', '1')"
+            />
+            <img
+              v-if="leftchoose.first == '2'"
+              src="@/assets/images/hygiene/yb_2.png"
+              style="width: 130px; height: 30px; cursor: pointer"
+            />
+            <img
+              v-else
+              src="@/assets/images/hygiene/yb_1_1.png"
+              style="width: 130px; height: 30px; cursor: pointer"
+              @click="change('first', '2')"
+            />
+          </span>
         </div>
+        <ePie v-if="leftchoose.first == '1'"></ePie>
+        <ePie2 v-else></ePie2>
       </div>
-      <div class="displayFlex">
-        <div class="flex1">
-          <div class="yd_title">
-            <span class="text">活动数据分析</span>
-          </div>
-          <eGraph></eGraph>
-        </div>
-        <div class="flex1">
-          <div class="yd_title">
-            <span class="text">走访日志</span>
-          </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>
-        </div>
+      <div class="flex1" style="margin-top: 10px">
+        <div class="yd_title left_2"></div>
+        <eP2></eP2>
       </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 class="flex1" style="margin-top: 10px">
+        <div class="yd_title left_3"></div>
+        <eP3></eP3>
       </div>
-      <div></div>
     </div>
-    <!-- <div class="module_right">
-      <div class="flex1">
-        <div class="yd_title">
-          <span class="text">关注标签</span>
+    <div class="displayFlex center_bg">
+      <div class="flex1" style="flex: 0.8">
+        <div class="yd_title center_1"></div>
+        <div class="minTopPart">
+          <div class="mtpImg1"></div>
+          <div class="mtpImg2"></div>
+          <div class="mtpText2">33.67万</div>
         </div>
-        <div class="concernLabel">
-          <span>计算机</span>
-          <span>大数据</span>
-          <span>互联网</span>
-        </div>
-      </div>
-      <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>
-        </div>
-        <div class="activity">
-          <h5>助乡活动</h5>
-          <div class="activity_content">
-            <div class="activity_box">
-              <p>
-                2021.2，象山县委统战部和象山电视台工作人员前往杭州浙江大学，拍摄《天南地北象山人》
-              </p>
+        <div class="minTopPart2">
+          <div class="left">
+            <div class="leftImg"></div>
+            <div class="left_me">
+              <div>建档率</div>
+              <div>92.96%</div>
             </div>
-            <div class="activity_box">
-              <p>
-                2020.8.29陈纯院士参加在象山举办的浙江省海外高层次人才联谊会，并作院士报告
-              </p>
+          </div>
+          <div class="right">
+            <div class="rightImg"></div>
+            <div class="right_me">
+              <div>家庭医生</div>
+              <div>2000</div>
             </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>
+      <div class="flex1" style="margin-top: 20px">
+        <div class="yd_title familyPlanning"></div>
+        <!-- 计划生育 -->
+        <!-- <div style="width: 100%; "> -->
+        <eP5></eP5>
+        <!-- </div> -->
+      </div>
+    </div>
+    <div class="displayFlex right_bg">
+      <div class="flex1" style="flex: 0.9">
+        <div class="yd_title mechanism"></div>
+        <eP6></eP6>
+      </div>
+      <div class="flex1" style="flex:0.5">
+        <div class="yd_title service"></div>
+        <eP7></eP7>
+      </div>
+      <div class="flex1" style="flex:0.5">
+        <div class="yd_title last"></div>
+        <div class="table">
+          <div class="item">3月2日健康日，在龙中公园进行健康活动宣</div>
+          <div class="item">3月2日健康日，在龙中公园进行健康活动宣</div>
+          <div class="item">3月2日健康日，在龙中公园进行健康活动宣</div>
+          <div class="item">3月2日健康日，在龙中公园进行健康活动宣</div>
+          <div class="item">3月2日健康日，在龙中公园进行健康活动宣</div>
+          <div class="item">3月2日健康日，在龙中公园进行健康活动宣</div>
         </div>
       </div>
-    </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_hygiene/pie.vue";
+import ePie2 from "./echarts_hygiene/pie2.vue";
+import eP2 from "./echarts_hygiene/eP2.vue";
+import eP3 from "./echarts_hygiene/eP3.vue";
+import eP7 from "./echarts_hygiene/eP7.vue";
+import eP6 from "./echarts_hygiene/eP6.vue";
+import eP5 from "./echarts_hygiene/eP5.vue";
+import ylSMFW from "./echarts_yl/ylSMFW.vue";
+import ylXZZC from "./echarts_yl/ylXZZC.vue";
+import { ref, onMounted, onBeforeMount } from "vue";
+const leftchoose = ref({
+  first: "1",
+  second: "1",
+  third: "1",
+});
+const change = (name, index) => {
+  leftchoose.value[name] = index;
+};
 </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;
+  // 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%;
+  height: calc(100vh - 112px);
 }
 
 .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%;
+  width: 94%;
   height: 36px;
   position: relative;
+
   .text {
+    display: flex;
+    position: absolute;
     font-size: 16px;
     font-family: SourceHanSansCN;
     font-weight: bold;
     color: #ffffff;
     position: absolute;
-    left: 33px;
+    right: 5px;
     top: 3px;
   }
 }
 
+.familyPlanning {
+  background-image: url(@/assets/images/hygiene/center_title_2.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.mechanism {
+  background-image: url(@/assets/images/hygiene/right_title_1.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.service {
+  background-image: url(@/assets/images/hygiene/right_title_2.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.last {
+  background-image: url(@/assets/images/hygiene/right_title_3.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.serviceBox {
+  display: flex;
+  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;
+    .visit {
+      display: flex;
+      flex-direction: column;
+      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/hygiene/left_title_1.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.left_2 {
+  background-image: url(@/assets/images/hygiene/left_title_2.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.left_3 {
+  background-image: url(@/assets/images/hygiene/left_title_3.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.center_1 {
+  background-image: url(@/assets/images/hygiene/center_title_1.png);
+  background-repeat: no-repeat;
+  background-size: 100% 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: 10px;
+  margin-right: 28px;
+  background-image: url(@/assets/images/right_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
 .basicInformation {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   padding-top: 22px;
+
   .basicInformation_item {
     flex: 0 0 50%;
     padding: 0 2px;
@@ -276,10 +319,12 @@
     box-sizing: border-box;
     display: flex;
     align-items: center;
+
     .icon {
       width: 79px;
       height: 47px;
     }
+
     .right {
       margin-left: 4px;
 
@@ -289,6 +334,7 @@
         background-repeat: no-repeat;
         background-position: bottom;
         margin-bottom: 4px;
+
         span {
           font-size: 12px;
           font-weight: 400;
@@ -297,6 +343,7 @@
           margin-left: 2px;
         }
       }
+
       p {
         font-size: 16px;
         font-weight: bold;
@@ -316,12 +363,15 @@
     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;
@@ -329,6 +379,7 @@
         color: #0096ff;
         margin-bottom: 2px;
       }
+
       p {
         font-size: 12px;
         font-family: SourceHanSansCN;
@@ -337,6 +388,7 @@
         margin-top: 6px;
       }
     }
+
     .check {
       font-size: 12px;
       font-family: SourceHanSansCN;
@@ -349,6 +401,42 @@
 
 .history {
   padding-top: 12px;
+  display: flex;
+  justify-content: space-around;
+  .history1 {
+    font-size: 26px;
+    color: #ffffff;
+    line-height: 30px;
+    letter-spacing: 1px;
+    text-align: center;
+    font-style: normal;
+    font-family: PangMenZhengDao;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .unit {
+      font-weight: 500;
+      font-size: 14px;
+      color: #9cdeff;
+      line-height: 20px;
+      text-align: left;
+      font-style: normal;
+      font-family: PingFangSC, PingFang SC;
+    }
+
+    .historyimg {
+      width: 182px;
+      height: 35px;
+    }
+  }
+
+  img {
+    width: 154px;
+    height: 136px;
+  }
+
   p {
     margin-top: 12px;
     font-size: 12px;
@@ -364,6 +452,7 @@
   align-items: center;
   justify-content: center;
   margin: 12px 0 20px;
+
   span {
     text-align: center;
     background: rgba(0, 89, 130, 0.73);
@@ -377,9 +466,11 @@
     margin: 0 10px;
   }
 }
+
 .property {
   display: flex;
   padding: 14px 0 10px;
+
   .property_box {
     background-image: url(@/assets/img_05.png);
     background-size: 100% 100%;
@@ -388,12 +479,14 @@
     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;
@@ -401,6 +494,7 @@
     }
   }
 }
+
 .activity {
   h5 {
     font-size: 14px;
@@ -410,9 +504,11 @@
     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;
@@ -420,6 +516,7 @@
       box-sizing: border-box;
       background-color: rgba(15, 28, 54, 1);
       padding: 12px 12px 19px;
+
       p {
         font-size: 14px;
         font-weight: 400;
@@ -430,26 +527,31 @@
     }
   }
 }
+
 .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 {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
+
       h4 {
         font-size: 14px;
         font-weight: 400;
         color: #ffffff;
         line-height: 20px;
       }
+
       p {
         font-size: 14px;
         font-weight: 400;
@@ -459,4 +561,110 @@
     }
   }
 }
+
+.minTopPart {
+  width: 498px;
+  height: 99px;
+  background-image: url(@/assets/images/hygiene/shang.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin: 50px auto;
+  position: relative;
+  .mtpImg1 {
+    width: 152px;
+    height: 164px;
+    background-image: url(@/assets/images/hygiene/shang_left.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: -30px;
+    left: 63px;
+  }
+  .mtpImg2 {
+    width: 140px;
+    height: 24px;
+    background-image: url(@/assets/minTop2.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 59px;
+    right: 50px;
+  }
+  .mtpText2 {
+    width: 140px;
+    height: 30px;
+    position: absolute;
+    top: 14px;
+    right: 50px;
+    text-align: center;
+    line-height: 30px;
+    font-weight: 600;
+    font-size: 26px;
+    color: #ffffff;
+  }
+}
+.minTopPart2 {
+  width: 498px;
+  height: 118px;
+  background-image: url(@/assets/images/hygiene/xia.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin: 0px auto;
+  position: relative;
+  display: flex;
+  margin-top: 80px;
+  .left {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 60px;
+    .leftImg {
+      width: 81px;
+      height: 81px;
+      background-image: url(@/assets/images/hygiene/xia_right.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    .left_me {
+      margin-left: 10px;
+      display: flex;
+      flex-direction: column;
+      color: #ccc;
+    }
+  }
+  .right {
+    display: flex;
+    align-items: center;
+    // justify-content: center;
+    margin-left: 60px;
+    .rightImg {
+      width: 81px;
+      height: 81px;
+      background-image: url(@/assets/images/hygiene/xia_right.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    .right_me {
+      margin-left: 10px;
+      display: flex;
+      flex-direction: column;
+      color: #ccc;
+    }
+  }
+}
+.table {
+  width: 95%;
+  min-height: 200px;
+  height: calc(100% - 75px);
+  background: red;
+  overflow-y: auto;
+  // .item {
+  //   margin-top: 10px;
+  //   padding: 16px 20px;
+  //   background-image: url(@/assets/images/hygiene/table_bg.png);
+  //   background-repeat: no-repeat;
+  //   background-size: 100% 100%;
+  //   color: #ffffff;
+  // }
+}
 </style>