Merge branch 'main' of git.zdool.com:xs/ggfwjsc

src/view/echarts_sy/zwfw1.vue

@@ -0,0 +1,230 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+const dataList = [
+  {
+    name: "2.0收件数",
+    value: 90,
+  },
+  {
+    name: "总收件数",
+    value: 100,
+  },
+];
+//内圈数据
+var data = [
+  {
+    value: 90,
+    name: "2.0收件数",
+    itemStyle: {
+      normal: {
+        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+          {
+            offset: 0,
+            color: "rgba(0, 255, 250, 0.29)",
+          },
+          {
+            offset: 0.5,
+            color: "rgba(0, 255, 250, 0.8)",
+          },
+          {
+            offset: 1,
+            color: "rgba(0, 255, 250, 1)",
+          },
+        ]),
+        shadowColor: "rgba(1,1,1,0.5)",
+        shadowBlur: 1,
+      },
+    },
+  },
+  {
+    value: 10,
+    name: "",
+    itemStyle: {
+      normal: {
+        color: "#095b9b", // 未完成的圆环的颜色
+        label: {
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+      },
+      emphasis: {
+        color: "#095b9b", // 未完成的圆环的颜色
+      },
+    },
+  },
+  {
+    value: 100,
+    name: "总收件数",
+    itemStyle: {
+      normal: {
+        color: "rgba(0,0,0,0)",
+      },
+    },
+  },
+];
+//外圈数据
+const data1 = [
+  {
+    value: 100,
+    name: "",
+    itemStyle: {
+      normal: {
+        borderWidth: 1,
+        borderColor: "rgba(193, 229, 255, .1)",
+        color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
+          {
+            offset: 1,
+            color: "rgba(127, 242, 255, .2)",
+          },
+          {
+            offset: 0,
+            color: "rgba(109, 195, 255, 0)",
+          },
+        ]),
+      },
+    },
+  },
+  {
+    value: 100,
+    name: "",
+    itemStyle: {
+      normal: {
+        color: "rgba(0,0,0,0)",
+      },
+    },
+  },
+];
+
+const option = {
+  legend: [
+    {
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 20,
+      icon: "circle",
+      data: ["2.0收件数"],
+      bottom: "20%",
+      width: 380,
+      textStyle: {
+        color: "#ffffff", // 修改图例颜色为红色
+      },
+      formatter: function (params) {
+        var num = "";
+        for (let i = 0; i < dataList.length; i++) {
+          if (dataList[i].name == params) {
+            num = dataList[i].value;
+          }
+        }
+        return params + "  " + num;
+      },
+    },
+    {
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 20,
+      icon: "circle",
+      data: ["总收件数"],
+      bottom: "5%",
+      width: 380,
+      textStyle: {
+        color: "#ffffff", // 修改图例颜色为红色
+      },
+      formatter: function (params) {
+        var num = "";
+        for (let i = 0; i < dataList.length; i++) {
+          if (dataList[i].name == params) {
+            num = dataList[i].value;
+          }
+        }
+        return params + "  " + num;
+      },
+    },
+  ],
+  title: [
+    {
+      text: "90%",
+      right: "24%",
+      bottom: "40%",
+      textStyle: {
+        color: "#ffffff",
+        fontSize: 18,
+      },
+    },
+  ],
+  series: [
+    {
+      // name:'访问来源',
+      type: "pie",
+      hoverAnimation: false,
+      radius: ["60%", "80%"],
+      center: ["53%", "54%"],
+      startAngle: 180,
+      label: {
+        normal: {
+          show: false,
+          position: "center",
+        },
+      },
+      data: data,
+    },
+    {
+      type: "pie",
+      center: ["53%", "54%"],
+      radius: ["80%", "95%"],
+      hoverAnimation: false,
+      startAngle: 180,
+      //   itemStyle: {
+      //     normal: {
+      //       borderWidth: 1,
+      //       borderColor: "rgba(193, 229, 255, .1)",
+      //       color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
+      //         {
+      //           offset: 1,
+      //           color: "rgba(127, 242, 255, .2)",
+      //         },
+      //         {
+      //           offset: 0,
+      //           color: "rgba(109, 195, 255, 0)",
+      //         },
+      //       ]),
+      //     },
+      //   },
+      label: {
+        normal: {
+          show: false,
+          position: "center",
+        },
+      },
+      data: data1,
+    },
+  ],
+};
+// 使用生命钩子
+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_sy/zwfw2.vue

@@ -0,0 +1,223 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+const dataList = [
+  {
+    name: "超期受理数",
+    value: 90,
+  },
+  {
+    name: "应受理数",
+    value: 100,
+  },
+];
+var data = [
+  {
+    value: 90,
+    name: "超期受理数",
+    itemStyle: {
+      normal: {
+        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+          {
+            offset: 0,
+            color: "rgba(255, 224, 0, 0.29)",
+          },
+          {
+            offset: 1,
+            color: "rgba(255, 224, 0, 1)",
+          },
+        ]),
+        shadowColor: "rgba(1,1,1,0.5)",
+        shadowBlur: 1,
+      },
+    },
+  },
+  {
+    value: dataList[1].value - dataList[0].value,
+    name: "",
+    itemStyle: {
+      normal: {
+        color: "rgba(255, 224, 0, 0.1)", // 未完成的圆环的颜色
+        label: {
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+      },
+      emphasis: {
+        color: "rgba(255, 224, 0, 0.1)", // 未完成的圆环的颜色
+      },
+    },
+  },
+  {
+    value: 100,
+    name: "应受理数",
+    itemStyle: {
+      normal: {
+        color: "rgba(0,0,0,0)",
+      },
+    },
+  },
+];
+const data1 = [
+  {
+    value: 100,
+    name: "",
+    itemStyle: {
+      normal: {
+        borderWidth: 1,
+        borderColor: "rgba(193, 229, 255, .1)",
+        color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
+          {
+            offset: 1,
+            color: "rgba(127, 242, 255, .2)",
+          },
+          {
+            offset: 0,
+            color: "rgba(109, 195, 255, 0)",
+          },
+        ]),
+      },
+    },
+  },
+  {
+    value: 100,
+    name: "",
+    itemStyle: {
+      normal: {
+        color: "rgba(0,0,0,0)",
+      },
+    },
+  },
+];
+
+const option = {
+  legend: [
+    {
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 20,
+      icon: "circle",
+      data: ["超期受理数"],
+      bottom: "20%",
+
+      textStyle: {
+        color: "#ffffff", // 修改图例颜色为红色
+      },
+      formatter: function (params) {
+        var num = "";
+        for (let i = 0; i < dataList.length; i++) {
+          if (dataList[i].name == params) {
+            num = dataList[i].value;
+          }
+        }
+        return params + "  " + num;
+      },
+    },
+    {
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 20,
+      icon: "circle",
+      data: ["应受理数"],
+      bottom: "5%",
+      textStyle: {
+        color: "#ffffff", // 修改图例颜色为红色
+      },
+      formatter: function (params) {
+        var num = "";
+        for (let i = 0; i < dataList.length; i++) {
+          if (dataList[i].name == params) {
+            num = dataList[i].value;
+          }
+        }
+        return params + "  " + num;
+      },
+    },
+  ],
+  title: [
+    {
+      text: "90%",
+      right: "24%",
+      bottom: "40%",
+      textStyle: {
+        color: "#ffffff",
+        fontSize: 18,
+      },
+    },
+  ],
+  series: [
+    {
+      // name:'访问来源',
+      type: "pie",
+      hoverAnimation: false,
+      radius: ["60%", "80%"],
+      center: ["53%", "54%"],
+      startAngle: 180,
+      label: {
+        normal: {
+          show: false,
+          position: "center",
+        },
+      },
+      data: data,
+    },
+    {
+      type: "pie",
+      center: ["53%", "54%"],
+      radius: ["80%", "95%"],
+      hoverAnimation: false,
+      startAngle: 180,
+      //   itemStyle: {
+      //     normal: {
+      //       borderWidth: 1,
+      //       borderColor: "rgba(193, 229, 255, .1)",
+      //       color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
+      //         {
+      //           offset: 1,
+      //           color: "rgba(127, 242, 255, .2)",
+      //         },
+      //         {
+      //           offset: 0,
+      //           color: "rgba(109, 195, 255, 0)",
+      //         },
+      //       ]),
+      //     },
+      //   },
+      label: {
+        normal: {
+          show: false,
+          position: "center",
+        },
+      },
+      data: data1,
+    },
+  ],
+};
+// 使用生命钩子
+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_sy/zwfw3.vue

@@ -0,0 +1,224 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+const dataList = [
+  {
+    name: "超期办理数",
+    value: 90,
+  },
+  {
+    name: "应办理数",
+    value: 100,
+  },
+];
+var data = [
+  {
+    value: 90,
+    name: "超期办理数",
+    itemStyle: {
+      normal: {
+        color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+          {
+            offset: 0,
+            color: "rgba(0, 255, 134, 0.29)",
+          },
+          {
+            offset: 1,
+            color: "rgba(0, 255, 134, 1)",
+          },
+        ]),
+        shadowColor: "rgba(1,1,1,0.5)",
+        shadowBlur: 1,
+      },
+    },
+  },
+  {
+    value: dataList[1].value - dataList[0].value,
+    name: "",
+    itemStyle: {
+      normal: {
+        color: "#095b9b", // 未完成的圆环的颜色
+        label: {
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+      },
+      emphasis: {
+        color: "#095b9b", // 未完成的圆环的颜色
+      },
+    },
+  },
+  {
+    value: 100,
+    name: "应办理数",
+    itemStyle: {
+      normal: {
+        color: "rgba(0,0,0,0)",
+      },
+    },
+  },
+];
+const data1 = [
+  {
+    value: 100,
+    name: "",
+    itemStyle: {
+      normal: {
+        borderWidth: 1,
+        borderColor: "rgba(193, 229, 255, .1)",
+        color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
+          {
+            offset: 1,
+            color: "rgba(127, 242, 255, .2)",
+          },
+          {
+            offset: 0,
+            color: "rgba(109, 195, 255, 0)",
+          },
+        ]),
+      },
+    },
+  },
+  {
+    value: 100,
+    name: "",
+    itemStyle: {
+      normal: {
+        color: "rgba(0,0,0,0)",
+      },
+    },
+  },
+];
+
+const option = {
+  legend: [
+    {
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 20,
+      icon: "circle",
+      data: ["超期办理数"],
+      bottom: "20%",
+      width: 380,
+      textStyle: {
+        color: "#ffffff", // 修改图例颜色为红色
+      },
+      formatter: function (params) {
+        var num = "";
+        for (let i = 0; i < dataList.length; i++) {
+          if (dataList[i].name == params) {
+            num = dataList[i].value;
+          }
+        }
+        return params + "  " + num;
+      },
+    },
+    {
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 20,
+      icon: "circle",
+      data: ["应办理数"],
+      bottom: "5%",
+      width: 380,
+      textStyle: {
+        color: "#ffffff", // 修改图例颜色为红色
+      },
+      formatter: function (params) {
+        var num = "";
+        for (let i = 0; i < dataList.length; i++) {
+          if (dataList[i].name == params) {
+            num = dataList[i].value;
+          }
+        }
+        return params + "  " + num;
+      },
+    },
+  ],
+  title: [
+    {
+      text: "90%",
+      right: "24%",
+      bottom: "40%",
+      textStyle: {
+        color: "#ffffff",
+        fontSize: 18,
+      },
+    },
+  ],
+  series: [
+    {
+      // name:'访问来源',
+      type: "pie",
+      hoverAnimation: false,
+      radius: ["60%", "80%"],
+      center: ["53%", "54%"],
+      startAngle: 180,
+      label: {
+        normal: {
+          show: false,
+          position: "center",
+        },
+      },
+      data: data,
+    },
+    {
+      type: "pie",
+      center: ["53%", "54%"],
+      radius: ["80%", "95%"],
+      hoverAnimation: false,
+      startAngle: 180,
+      //   itemStyle: {
+      //     normal: {
+      //       borderWidth: 1,
+      //       borderColor: "rgba(193, 229, 255, .1)",
+      //       color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
+      //         {
+      //           offset: 1,
+      //           color: "rgba(127, 242, 255, .2)",
+      //         },
+      //         {
+      //           offset: 0,
+      //           color: "rgba(109, 195, 255, 0)",
+      //         },
+      //       ]),
+      //     },
+      //   },
+      label: {
+        normal: {
+          show: false,
+          position: "center",
+        },
+      },
+      data: data1,
+    },
+  ],
+};
+// 使用生命钩子
+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/sy.vue

@@ -247,28 +247,32 @@
             <div class="shang">
               <div class="shang_item">
                 <div class="title">一网通办事</div>
+                <div class="i"><zwfw1 /></div>
               </div>
               <div class="shang_item">
                 <div class="title">超期受理率</div>
+                <div class="i"><zwfw2 /></div>
               </div>
               <div class="shang_item">
                 <div class="title">超期办理率</div>
+                <div class="i"><zwfw3 /></div>
               </div>
             </div>
             <div class="xia">
               <div class="xia_item">
-                <div class="left"></div>
+                <img class="left" src="@/assets/images/sy/zwfw_sl.png" />
                 <div class="right">
                   <div class="name">平均受理时长</div>
-                  <img class="line" src="" />
+                  <img class="line" src="@/assets/images/sy/zwfw_line.png" />
                   <div class="time"><span>0.22</span>小时</div>
                 </div>
               </div>
+              <div class="fgx"></div>
               <div class="xia_item">
-                <div class="left"></div>
+                <img class="left" src="@/assets/images/sy/zwfw_bl.png" />
                 <div class="right">
                   <div class="name">平均办理时长</div>
-                  <img class="line" src="" />
+                  <img class="line" src="@/assets/images/sy/zwfw_line.png" />
                   <div class="time"><span>0.54</span>小时</div>
                 </div>
               </div>
@@ -324,13 +328,9 @@
       </div>
       <div class="flex1" style="margin-top: 10px">
         <div class="yd_title last_1"></div>
-        <table class="table">
+        <!-- <table class="table">
           <tbody>
-            <tr
+            <tr v-for="(item, index) in jtsyList" :key="index" style="display: flex; box-sizing: border-box">
-              v-for="(item, index) in jtsyList"
-              :key="index"
-              style="display: flex; box-sizing: border-box"
-            >
               <td>{{ item.name }}</td>
               <td>
                 <div class="s1" style="font-size: 16px">{{ item.key1 }}</div>
@@ -339,14 +339,90 @@
                 }}</span>
               </td>
               <td>
-                <span class="s1" style="font-size: 16px">{{ item.key2 }}</span
+                <span class="s1" style="font-size: 16px">{{ item.key2 }}</span>:<span class="s2"
-                >:<span class="s2" style="font-size: 15px">{{
+                  style="font-size: 15px">{{
                     item.key2_value
                   }}</span>
               </td>
             </tr>
           </tbody>
-        </table>
+        </table> -->
+        <div class="jtsyBox">
+          <div class="jtsyBoxtop">
+            <div class="jtsyBoxtop1">
+              <img :src="data.jtsyList[0].img" alt="" />
+              <div>
+                <div class="jtsyname">{{ data.jtsyList[0].name }}</div>
+                <div class="jtsytext">
+                  {{ data.jtsyList[0].key1 }}：
+                  <span>{{ data.jtsyList[0].key1_value }}</span>
+                </div>
+                <div>
+                  {{ data.jtsyList[0].key2 }}：
+                  <span>{{ data.jtsyList[0].key2_value }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="jtsyBoxtop1">
+              <img :src="data.jtsyList[1].img" alt="" />
+              <div>
+                <div class="jtsyname">{{ data.jtsyList[1].name }}</div>
+                <div class="jtsytext">
+                  {{ data.jtsyList[1].key1 }}：
+                  <span>{{ data.jtsyList[1].key1_value }}</span>
+                </div>
+                <div>
+                  {{ data.jtsyList[1].key2 }}：
+                  <span>{{ data.jtsyList[1].key2_value }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="jtsyBoxbot">
+            <div class="jtsyBoxtop1">
+              <img :src="data.jtsyList[2].img" alt="" />
+              <div>
+                <div class="jtsyname">{{ data.jtsyList[2].name }}</div>
+                <div class="jtsytext">
+                  {{ data.jtsyList[2].key1 }}：
+                  <span>{{ data.jtsyList[2].key1_value }}</span>
+                </div>
+                <div>
+                  {{ data.jtsyList[2].key2 }}：
+                  <span>{{ data.jtsyList[2].key2_value }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="jtsyBoxtop1">
+              <img :src="data.jtsyList[3].img" alt="" />
+              <div>
+                <div class="jtsyname">{{ data.jtsyList[3].name }}</div>
+                <div class="jtsytext">
+                  {{ data.jtsyList[3].key1 }}：
+                  <span>{{ data.jtsyList[3].key1_value }}</span>
+                </div>
+                <div>
+                  {{ data.jtsyList[3].key2 }}：
+                  <span>{{ data.jtsyList[3].key2_value }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="jtsyBoxtop1">
+              <img :src="data.jtsyList[4].img" alt="" />
+              <div>
+                <div class="jtsyname">{{ data.jtsyList[4].name }}</div>
+                <div class="jtsytext">
+                  {{ data.jtsyList[4].key1 }}：
+                  <span>{{ data.jtsyList[4].key1_value }}</span>
+                </div>
+                <div>
+                  {{ data.jtsyList[4].key2 }}：
+                  <span>{{ data.jtsyList[4].key2_value }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <Dialog
@@ -363,12 +439,22 @@
 <script setup>
 import ePie from "./echarts_sy/pie.vue";
 import ePie2 from "./echarts_sy/pie2.vue";
+import zwfw1 from "./echarts_sy/zwfw1.vue";
+import zwfw2 from "./echarts_sy/zwfw2.vue";
+import zwfw3 from "./echarts_sy/zwfw3.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 Dialog from "./dialog/dialog.vue";
 import tableTennis from "../assets/images/sy/tableTennis.png";
+
+import ggjtimg from "../assets/images/sy/ggjt.png";
+import ggjtimg1 from "../assets/images/sy/ggjt1.png";
+import ggjtimg2 from "../assets/images/sy/ggjt2.png";
+import ggjtimg3 from "../assets/images/sy/ggjt3.png";
+import ggjtimg4 from "../assets/images/sy/ggjt4.png";
+
+import Dialog from "./dialog/dialog.vue";
 import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
 import http from "@/utils/request.js";
 import { CircleCloseFilled } from "@element-plus/icons-vue";
@@ -634,6 +720,7 @@ const data = reactive({
       key1_value: "1172491",
       key2: "骑行时长",
       key2_value: "1283h",
+      img: ggjtimg,
     },
     {
       name: "电动单车",
@@ -641,6 +728,7 @@ const data = reactive({
       key1_value: "1172491",
       key2: "骑行时长",
       key2_value: "1283h",
+      img: ggjtimg1,
     },
     {
       name: "公共汽车",
@@ -648,6 +736,7 @@ const data = reactive({
       key1_value: "176",
       key2: "乘坐人次",
       key2_value: "239741",
+      img: ggjtimg2,
     },
     {
       name: "长途汽车",
@@ -655,6 +744,7 @@ const data = reactive({
       key1_value: "133",
       key2: "客流量",
       key2_value: "192874",
+      img: ggjtimg3,
     },
     {
       name: "高铁",
@@ -662,6 +752,7 @@ const data = reactive({
       key1_value: "23",
       key2: "客流量",
       key2_value: "113414",
+      img: ggjtimg4,
     },
   ],
 });
@@ -1156,19 +1247,19 @@ onBeforeMount(async () => {
   background-size: 100% 100%;
 }
 
-.center_1 {
+// .center_1 {
-  width: 96%;
+//   width: 96%;
-  background-image: url(@/assets/images/hygiene/center_title_1.png);
+//   background-image: url(@/assets/images/hygiene/center_title_1.png);
-  background-repeat: no-repeat;
+//   background-repeat: no-repeat;
-  background-size: 100% 100%;
+//   background-size: 100% 100%;
-}
+// }
 
-.center_2 {
+// .center_2 {
-  width: 96%;
+//   width: 96%;
-  background-image: url(@/assets/images/hygiene/new_center.png);
+//   background-image: url(@/assets/images/hygiene/new_center.png);
-  background-repeat: no-repeat;
+//   background-repeat: no-repeat;
-  background-size: 100% 100%;
+//   background-size: 100% 100%;
-}
+// }
 
 .center_top {
   width: 95%;
@@ -1695,6 +1786,111 @@ onBeforeMount(async () => {
     right: 50px;
   }
 }
+// 交通事业
+.jtsyBox {
+  width: 97%;
+  // background-color: skyblue;
+  display: flex;
+  flex-direction: column;
+
+  font-size: 14px;
+  font-weight: 400;
+  color: #ffffff;
+  text-align: left;
+  font-style: normal;
+  font-family: PingFangSC, PingFang SC;
+
+  img {
+    width: 68px;
+    height: 96px;
+    margin-right: 4px;
+  }
+  .jtsyBoxtop {
+    display: flex;
+    justify-content: space-evenly;
+    margin-bottom: 15px;
+    padding-top: 20px;
+    .jtsyBoxtop1 {
+      display: flex;
+      span {
+        font-family: TCloudNumber, TCloudNumber;
+        font-weight: 400;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 22px;
+        text-shadow: 0px 0px 4px #12fbff;
+        text-align: left;
+        font-style: normal;
+      }
+      .jtsyname {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 22px;
+        text-shadow: 0px 2px 4px #35e0f9;
+        text-align: left;
+        font-style: normal;
+        position: relative;
+      }
+      .jtsyname::after {
+        content: "";
+        display: block;
+        width: 60px;
+        border-bottom: 1px dashed rgba(0, 238, 250, 1); /* 设置虚线 */
+        position: absolute;
+        bottom: -6px;
+        left: 0;
+      }
+      .jtsytext {
+        margin-top: 14px;
+        margin-bottom: 2px;
+        // width: 80px;
+      }
+    }
+  }
+  .jtsyBoxbot {
+    display: flex;
+    justify-content: space-between;
+    .jtsyBoxtop1 {
+      display: flex;
+      span {
+        font-family: TCloudNumber, TCloudNumber;
+        font-weight: 400;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 22px;
+        text-shadow: 0px 0px 4px #12fbff;
+        text-align: left;
+        font-style: normal;
+      }
+      .jtsyname {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 22px;
+        text-shadow: 0px 2px 4px #35e0f9;
+        text-align: left;
+        font-style: normal;
+        position: relative;
+      }
+      .jtsyname::after {
+        content: "";
+        display: block;
+        width: 60px;
+        border-bottom: 1px dashed rgba(0, 238, 250, 1); /* 设置虚线 */
+        position: absolute;
+        bottom: -6px;
+        left: 0;
+      }
+      .jtsytext {
+        margin-top: 14px;
+        margin-bottom: 2px;
+      }
+    }
+  }
+}
 
 .table {
   width: 94%;
@@ -1739,6 +1935,81 @@ onBeforeMount(async () => {
   border-radius: 4px;
   border: 0px solid #7aceff;
   padding: 16px 19px;
+  .shang {
+    display: flex;
+    justify-content: space-around;
+    &_item {
+      width: 28%;
+      display: flex;
+      flex-direction: column;
+      .title {
+        background-image: url(@/assets/images/sy/zwfw_title.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        text-align: center;
+        font-weight: 400;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 20px;
+        letter-spacing: 2px;
+      }
+      .i {
+        width: 130px;
+        height: 130px;
+      }
+    }
+  }
+  .xia {
+    display: flex;
+    align-items: center;
+    height: 88px;
+    box-sizing: border-box;
+    justify-content: space-around;
+    background-image: url(@/assets/images/sy/zwfw_bg.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    .fgx {
+      width: 3px;
+      height: 40px;
+      border-right: 2px dashed rgba(92, 118, 162, 0.8); /* 设置虚线 */
+    }
+    &_item {
+      width: 49%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .left {
+        width: 72px;
+        height: 68px;
+      }
+      .right {
+        margin-left: 5px;
+        display: flex;
+        flex-direction: column;
+        .name {
+          font-weight: 400;
+          font-size: 16px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+        .line {
+          margin: 3px 0;
+          width: 100px;
+        }
+        .time {
+          font-weight: 400;
+          font-size: 16px;
+          color: #ffffff;
+          line-height: 20px;
+          span {
+            font-size: 18px;
+            margin-right: 3px;
+            font-weight: 600;
+          }
+        }
+      }
+    }
+  }
 }
 :deep(.el-table) {
   background: rgba(32, 64, 115, 1);