diff --git a/src/main.js b/src/main.js
index c17ee14..41b8efa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,6 @@ import App from './App.vue'
 import router from "./router";
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-import './assets/css/common.css'
+import './assets/css/common.css' 
 
 createApp(App).use(router).use(ElementPlus).mount('#app')
diff --git a/src/view/dialog/dialog.vue b/src/view/dialog/dialog.vue
new file mode 100644
index 0000000..0d8a971
--- /dev/null
+++ b/src/view/dialog/dialog.vue
@@ -0,0 +1,131 @@
+<template>
+    <div class="dialogPage">
+        <el-dialog v-model="dialogShow" width="80vw" :show-close="false" center :close-on-click-modal="false" :close-on-press-escape="false">
+            <template #header="{ close, titleId, titleClass }">
+                <div class="my-header">
+                    <el-icon size="26" color="#fff" @click="closeDialog">
+                        <CircleCloseFilled />
+                    </el-icon>
+                </div>
+            </template>
+            <div class="tabelPart">
+                <el-table :data="data.tableData " height='calc(100% - 40px)' :header-cell-style="{ background: '#008FCD' }">
+                    <el-table-column v-for="(item,index) in data.columns" :key="index" :property="item.property" :label="item.label" :width="item.width" align="center" />
+                </el-table>
+                <div class="pagePart">
+                    <el-pagination background layout="prev, pager, next" :total="1000" prev-text="上一页"
+                        next-text="下一页" />
+                </div>
+            </div>
+
+        </el-dialog>
+    </div>
+</template>
+<script setup>
+import { onMounted, reactive, ref, onBeforeMount, defineProps, watch } from "vue";
+import { CircleCloseFilled } from '@element-plus/icons-vue'
+
+const props = defineProps({
+    dialogShow: {
+        type: Boolean,
+        default: () => {
+            return false;
+        },
+    },
+    columns: {
+        type: Array,
+        default: () => {
+            return [];
+        },
+    },
+    tableData: {
+        type: Array,
+        default: () => {
+            return [];
+        },
+    },
+    title: {
+        type: String,
+        default: () => {
+            return '';
+        },
+    },
+});
+const emit = defineEmits([
+  "close",
+]);
+
+// 详情弹框
+const dialogShow = ref()
+const data = reactive ({
+    title: '',
+    columns: [],
+    tableData: [],
+})
+
+const gridData = [
+]
+
+watch(() => props.dialogShow, (newVal, oldVal) => {
+    dialogShow.value = newVal
+})
+
+// 使用生命钩子
+onMounted(() => {
+    dialogShow.value = props.dialogShow
+    data.columns = props.columns
+    data.title = props.title
+    data.tableData = props.tableData
+});
+
+const closeDialog = () => {
+    dialogShow.value = false
+    emit("close");
+}
+</script>
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  --el-dialog-bg-color: none;
+}
+
+.my-header {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.tabelPart {
+  height: 60vh;
+  padding: 16px;
+  background: linear-gradient(270deg, rgba(0, 77, 131, 0.69) 0%, rgba(0, 51, 83, 0.77) 50%, rgba(0, 77, 131, 0.74) 100%), radial-gradient(66% 40% at 50% 0%, rgba(1, 150, 243, 0.55) 0%, rgba(0, 116, 255, 0) 100%);
+  box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
+  border: 2px solid;
+  border-image: linear-gradient(180deg, rgba(21, 150, 255, 1), rgba(0, 157, 227, 0)) 2 2;
+
+  :deep(.el-table) {
+    --el-table-bg-color: none;
+    --el-table-tr-bg-color: none;
+    --el-table-header-bg-color: none;
+    background: none;
+    border: none;
+    --el-table-text-color: #fff;
+    --el-table-header-text-color: #fff;
+  }
+}
+
+.pagePart {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  :deep(.el-pagination){
+    --el-pagination-button-disabled-bg-color: none;
+    --el-pagination-bg-color: none;
+    --el-pagination-button-bg-color: none;
+    --el-pagination-button-color: #fff;
+    color: #fff;
+  }
+  :deep(.el-pagination button:disabled){
+    background-color: rgba(0, 116, 255, 0) !important;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/view/sy.vue b/src/view/sy.vue
index 48adef2..364903b 100644
--- a/src/view/sy.vue
+++ b/src/view/sy.vue
@@ -10,16 +10,10 @@
             </div>
             <div class="item_content">
               <div class="sr">
-                <span class="left">收入：</span
-                ><span class="right"
-                  >{{ data.LivelihoodWelfare.zgylbxzsr }}万元</span
-                >
+                <span class="left">收入：</span><span class="right">{{ data.LivelihoodWelfare.zgylbxzsr }}万元</span>
               </div>
               <div class="sr" style="margin-top: 5px">
-                <span class="left">支出：</span
-                ><span class="right"
-                  >{{ data.LivelihoodWelfare.zgylbxzzc }}万元</span
-                >
+                <span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.zgylbxzzc }}万元</span>
               </div>
             </div>
           </div>
@@ -27,16 +21,10 @@
             <div class="item_title"><span class="blue">工伤</span>保险</div>
             <div class="item_content">
               <div class="sr">
-                <span class="left">收入：</span
-                ><span class="right"
-                  >{{ data.LivelihoodWelfare.gsbxzsr }}万元</span
-                >
+                <span class="left">收入：</span><span class="right">{{ data.LivelihoodWelfare.gsbxzsr }}万元</span>
               </div>
               <div class="sr" style="margin-top: 5px">
-                <span class="left">支出：</span
-                ><span class="right"
-                  >{{ data.LivelihoodWelfare.gsbxzzc }}万元</span
-                >
+                <span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.gsbxzzc }}万元</span>
               </div>
             </div>
           </div>
@@ -46,16 +34,10 @@
             </div>
             <div class="item_content">
               <div class="sr">
-                <span class="left">收入：</span
-                ><span class="right"
-                  >{{ data.LivelihoodWelfare.cxylbxzsr }}万元</span
-                >
+                <span class="left">收入：</span><span class="right">{{ data.LivelihoodWelfare.cxylbxzsr }}万元</span>
               </div>
               <div class="sr" style="margin-top: 5px">
-                <span class="left">支出：</span
-                ><span class="right"
-                  >{{ data.LivelihoodWelfare.cxylbxzzc }}万元</span
-                >
+                <span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.cxylbxzzc }}万元</span>
               </div>
             </div>
           </div>
@@ -65,16 +47,10 @@
             </div>
             <div class="item_content">
               <div class="sr">
-                <span class="left">收入：</span
-                ><span class="right"
-                  >{{ data.LivelihoodWelfare.zgyilbxzsr }}万元</span
-                >
+                <span class="left">收入：</span><span class="right">{{ data.LivelihoodWelfare.zgyilbxzsr }}万元</span>
               </div>
               <div class="sr" style="margin-top: 5px">
-                <span class="left">支出：</span
-                ><span class="right"
-                  >{{ data.LivelihoodWelfare.zgyilbxzzc }}万元</span
-                >
+                <span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.zgyilbxzzc }}万元</span>
               </div>
             </div>
           </div>
@@ -84,16 +60,10 @@
             </div>
             <div class="item_content">
               <div class="sr">
-                <span class="left">收入：</span
-                ><span class="right"
-                  >{{ data.LivelihoodWelfare.cxyilbxzsr }}万元</span
-                >
+                <span class="left">收入：</span><span class="right">{{ data.LivelihoodWelfare.cxyilbxzsr }}万元</span>
               </div>
               <div class="sr" style="margin-top: 5px">
-                <span class="left">支出：</span
-                ><span class="right"
-                  >{{ data.LivelihoodWelfare.cxyilbxzzc }}万元</span
-                >
+                <span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.cxyilbxzzc }}万元</span>
               </div>
             </div>
           </div>
@@ -130,8 +100,7 @@
           <div class="left_2_bottom_item">
             <div class="left_2_bottom_item_shang">
               <div class="left">
-                <span class="span1">{{ jysyList[0].title }}</span
-                >学校师生比
+                <span class="span1">{{ jysyList[0].title }}</span>学校师生比
               </div>
               <div class="right">
                 {{ jysyList[0].teacher }}:{{ jysyList[0].student }}
@@ -144,8 +113,7 @@
           <div class="left_2_bottom_item">
             <div class="left_2_bottom_item_shang">
               <div class="left">
-                <span class="span2">{{ jysyList[1].title }}</span
-                >学校师生比
+                <span class="span2">{{ jysyList[1].title }}</span>学校师生比
               </div>
               <div class="right">
                 {{ jysyList[1].teacher }}:{{ jysyList[1].student }}
@@ -160,15 +128,15 @@
       <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 class="left_3_1_item" @click="showDialog('就业培训')">
             <div>{{ data.employmentService.jypx }}</div>
             <div>就业培训</div>
           </div>
-          <div class="left_3_1_item">
+          <div class="left_3_1_item" @click="showDialog('就业见习服务')">
             <div>{{ data.employmentService.jyjxfw }}</div>
             <div>就业见习服务</div>
           </div>
-          <div class="left_3_1_item">
+          <div class="left_3_1_item" @click="showDialog('就业援助')">
             <div>{{ data.employmentService.jyyz }}</div>
             <div>就业援助</div>
           </div>
@@ -198,44 +166,23 @@
         <ePie style="margin-bottom: 30px" :list="data.ageGroup"></ePie>
         <div class="table">
           <div class="table_choose">
-            <div
-              :class="choose == '1' ? 'choose' : 'noChoose'"
-              @click="change('1')"
-            >
+            <div :class="choose == '1' ? 'choose' : 'noChoose'" @click="change('1')">
               公共服务
             </div>
-            <div
-              :class="choose == '2' ? 'choose' : 'noChoose'"
-              @click="change('2')"
-            >
+            <div :class="choose == '2' ? 'choose' : 'noChoose'" @click="change('2')">
               企业服务
             </div>
-            <div
-              :class="choose == '3' ? 'choose' : 'noChoose'"
-              @click="change('3')"
-            >
+            <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 :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="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'"
-                >
+                <div style="letter-spacing: 3px" :style="scope.row.finish ? 'color:#FFFFFF' : 'color:#FFC06E'">
                   {{ scope.row.finish ? "已完成" : "未完成" }}
                 </div>
               </template>
@@ -257,11 +204,7 @@
       <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 data.whsyList"
-            :key="index"
-          >
+          <div class="whsy_item" v-for="(item, index) in data.whsyList" :key="index">
             <div class="name">{{ item.name }}</div>
             <div class="value">
               {{ item.value }}<span>{{ item.dw }}</span>
@@ -272,11 +215,7 @@
       <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 data.tysyList"
-            :key="index"
-          >
+          <div class="tysy_item" v-for="(item, index) in data.tysyList" :key="index">
             <div class="value">
               {{ item.value }}<span>{{ item.dw ? item.dw : "" }}</span>
             </div>
@@ -289,11 +228,7 @@
         <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"
-            >
+            <tr 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>
@@ -302,16 +237,18 @@
                 }}</span>
               </td>
               <td>
-                <span class="s1" style="font-size: 16px">{{ item.key2 }}</span
-                >:<span class="s2" style="font-size: 15px">{{
-                  item.key2_value
-                }}</span>
+                <span class="s1" style="font-size: 16px">{{ item.key2 }}</span>:<span class="s2"
+                  style="font-size: 15px">{{
+                    item.key2_value
+                  }}</span>
               </td>
             </tr>
           </tbody>
         </table>
       </div>
     </div>
+    <Dialog :dialogShow="dialogShow" :columns="tableType.columns" :title="tableType.title" :tableData="tableType.data" @close="close">
+    </Dialog>
   </div>
 </template>
 
@@ -322,9 +259,75 @@ 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 { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
 import http from "@/utils/request.js";
+import { CircleCloseFilled } from '@element-plus/icons-vue'
+import { columns } from "element-plus/es/components/table-v2/src/common.mjs";
+
+// 详情弹框
+const dialogShow = ref(false)
+const tableType = reactive({
+  title: '',
+  columns: [
+    {
+      label: '姓名',
+      property: 'name',
+      width: '150'
+    },
+    {
+      label: '人员类别',
+      property: 'type',
+      width: '150'
+    },
+    {
+      label: '就失业状态',
+      property: 'status',
+      width: '150'
+    },
+    {
+      label: '日期',
+      property: 'date',
+    },
+    {
+      label: '地址',
+      property: 'address',
+    },
+  ],
+  data: [
+    {
+      date: '2016-05-02',
+      name: 'John Smith',
+      address: 'No.1518,  Jinshajiang Road, Putuo District',
+    },
+    {
+      date: '2016-05-04',
+      name: 'John Smith',
+      address: 'No.1518,  Jinshajiang Road, Putuo District',
+    },
+    {
+      date: '2016-05-01',
+      name: 'John Smith',
+      address: 'No.1518,  Jinshajiang Road, Putuo District',
+    },
+    {
+      date: '2016-05-03',
+      name: 'John Smith',
+      address: 'No.1518,  Jinshajiang Road, Putuo District',
+    },
+  ]
+})
+
+const showDialog = (title) => {
+  dialogShow.value = true
+  tableType.title = title
+}
+
+const close = () => {
+  dialogShow.value = false
+}
+
 
 const data = reactive({
   PopulationData: {
@@ -651,16 +654,14 @@ const jtsyList = ref([
 
 // 县城学校师生比样式
 const cs = computed(() => {
-  let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${
-    jysyList.value[0].teacher + jysyList.value[0].student
-  }`;
+  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
-  }`;
+  let str = `--teacher: ${jysyList.value[1].teacher}; --total: ${jysyList.value[1].teacher + jysyList.value[1].student
+    }`;
   return str;
 });
 // 服务表格样式
@@ -725,7 +726,7 @@ const getData = async () => {
           // if (value !== undefined) {
           //   data.LivelihoodWelfare[key] = (value / 10000).toFixed(2);
           // }
-          data.LivelihoodWelfare[key] = (res.data.msfz[key] / 10000).toFixed(2) ;
+          data.LivelihoodWelfare[key] = (res.data.msfz[key] / 10000).toFixed(2);
         });
       }
       // 救助服务
@@ -820,6 +821,55 @@ onBeforeMount(async () => {
 });
 </script>
 
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  --el-dialog-bg-color: none;
+}
+
+.my-header {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.tabelPart {
+  height: 60vh;
+  padding: 16px;
+  background: linear-gradient(270deg, rgba(0, 77, 131, 0.69) 0%, rgba(0, 51, 83, 0.77) 50%, rgba(0, 77, 131, 0.74) 100%), radial-gradient(66% 40% at 50% 0%, rgba(1, 150, 243, 0.55) 0%, rgba(0, 116, 255, 0) 100%);
+  box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
+  border: 2px solid;
+  border-image: linear-gradient(180deg, rgba(21, 150, 255, 1), rgba(0, 157, 227, 0)) 2 2;
+
+  :deep(.el-table) {
+    --el-table-bg-color: none;
+    --el-table-tr-bg-color: none;
+    --el-table-header-bg-color: none;
+    background: none;
+    border: none;
+    --el-table-text-color: #fff;
+    --el-table-header-text-color: #fff;
+  }
+}
+
+.pagePart {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  :deep(.el-pagination) {
+    --el-pagination-button-disabled-bg-color: none;
+    --el-pagination-bg-color: none;
+    --el-pagination-button-bg-color: none;
+    --el-pagination-button-color: #fff;
+    color: #fff;
+  }
+
+  :deep(.el-pagination button:disabled) {
+    background-color: rgba(0, 116, 255, 0) !important;
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 .displayFlex {
   box-sizing: border-box;
@@ -867,6 +917,7 @@ onBeforeMount(async () => {
     right: 5px;
     top: 1px;
   }
+
   .c {
     width: 130px;
     height: 42px;
@@ -885,16 +936,19 @@ onBeforeMount(async () => {
   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: column;
@@ -910,11 +964,13 @@ onBeforeMount(async () => {
     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;
@@ -945,6 +1001,7 @@ onBeforeMount(async () => {
     }
   }
 }
+
 .mealAssistance {
   display: flex;
   flex-direction: column;
@@ -981,37 +1038,45 @@ onBeforeMount(async () => {
   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;
@@ -1019,15 +1084,14 @@ onBeforeMount(async () => {
         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%
-        );
+        background: linear-gradient(270deg,
+            rgba(255, 255, 255, 0) 0%,
+            #3976a1 100%);
       }
     }
   }
 }
+
 .left_bg {
   width: 642px;
   // height: 100%;
@@ -1049,6 +1113,7 @@ onBeforeMount(async () => {
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .right_bg {
   width: 642px;
   box-sizing: border-box;
@@ -1058,6 +1123,7 @@ onBeforeMount(async () => {
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 //左边
 //民生福祉
 .left_1_bg {
@@ -1070,9 +1136,11 @@ onBeforeMount(async () => {
   background-size: 100% 100%;
   margin-left: -25px;
   position: relative;
+
   .item {
     display: flex;
     flex-direction: column;
+
     .item_title {
       font-weight: 600;
       font-family: PangMenZhengDao;
@@ -1080,6 +1148,7 @@ onBeforeMount(async () => {
       color: #ffffff;
       line-height: 21px;
       letter-spacing: 1px;
+
       .blue {
         font-family: PangMenZhengDao;
         font-size: 18px;
@@ -1087,6 +1156,7 @@ onBeforeMount(async () => {
         line-height: 21px;
         letter-spacing: 1px;
       }
+
       .yellow {
         font-family: PangMenZhengDao;
         font-size: 18px;
@@ -1095,17 +1165,21 @@ onBeforeMount(async () => {
         letter-spacing: 1px;
       }
     }
+
     .item_content {
       margin-top: 15px;
+
       .sr {
         display: flex;
         align-items: center;
+
         .left {
           font-weight: 400;
           font-size: 15px;
           color: #ffffff;
           line-height: 17px;
         }
+
         .right {
           font-weight: 400;
           font-size: 16px;
@@ -1116,35 +1190,41 @@ onBeforeMount(async () => {
     }
   }
 }
+
 .yl_1 {
   position: absolute;
   top: 50px;
   left: 75px;
 }
+
 .yl_2 {
   position: absolute;
   top: 50px;
   left: 238px;
   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;
@@ -1152,12 +1232,14 @@ onBeforeMount(async () => {
   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;
@@ -1166,6 +1248,7 @@ onBeforeMount(async () => {
     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;
@@ -1174,6 +1257,7 @@ onBeforeMount(async () => {
       letter-spacing: 1px;
       text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
     }
+
     .bottom {
       margin-top: 6px;
       font-weight: normal;
@@ -1184,6 +1268,7 @@ onBeforeMount(async () => {
       text-shadow: 0px 0px 24px rgba(0, 252, 255, 0.5);
     }
   }
+
   .left_1_3 {
     box-sizing: border-box;
     padding: 18px 21px;
@@ -1192,6 +1277,7 @@ onBeforeMount(async () => {
     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;
@@ -1200,6 +1286,7 @@ onBeforeMount(async () => {
       letter-spacing: 1px;
       text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
     }
+
     .bottom {
       margin-top: 6px;
       font-weight: normal;
@@ -1211,17 +1298,20 @@ onBeforeMount(async () => {
     }
   }
 }
+
 //教育事业
 .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;
@@ -1232,10 +1322,12 @@ onBeforeMount(async () => {
       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;
@@ -1245,10 +1337,12 @@ onBeforeMount(async () => {
       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;
@@ -1258,10 +1352,12 @@ onBeforeMount(async () => {
       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;
@@ -1272,11 +1368,13 @@ onBeforeMount(async () => {
     }
   }
 }
+
 .left_2_bottom {
   width: 94%;
   margin-top: 5px;
   display: flex;
   justify-content: space-around;
+
   &_item {
     box-sizing: border-box;
     padding: 20px;
@@ -1287,6 +1385,7 @@ onBeforeMount(async () => {
     border: 0px solid #7aceff;
     display: flex;
     flex-direction: column;
+
     &_shang {
       display: flex;
       justify-content: space-between;
@@ -1295,6 +1394,7 @@ onBeforeMount(async () => {
       color: #ffffff;
       line-height: 22px;
       letter-spacing: 1px;
+
       .span1 {
         font-weight: 500;
         font-size: 16px;
@@ -1302,6 +1402,7 @@ onBeforeMount(async () => {
         letter-spacing: 1px;
         color: #00f5ff;
       }
+
       .span2 {
         font-weight: 500;
         font-size: 16px;
@@ -1309,16 +1410,19 @@ onBeforeMount(async () => {
         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;
@@ -1327,6 +1431,7 @@ onBeforeMount(async () => {
         border-radius: 3px;
         border: 3px solid #00f5ff;
       }
+
       .ncbl {
         position: absolute;
         top: -2px;
@@ -1337,14 +1442,17 @@ onBeforeMount(async () => {
       }
     }
   }
+
   margin-bottom: 22px;
 }
+
 //就业服务
 .left_3_1 {
   width: 94%;
   margin-top: 15px;
   display: flex;
   justify-content: space-around;
+
   &_item {
     box-sizing: border-box;
     width: 160px;
@@ -1354,6 +1462,7 @@ onBeforeMount(async () => {
     background-size: 100% 100%;
     text-align: center;
     padding-top: 22px;
+
     div:nth-child(1) {
       font-family: PangMenZhengDao, PangMenZhengDao;
       font-weight: normal;
@@ -1363,6 +1472,7 @@ onBeforeMount(async () => {
       letter-spacing: 1px;
       text-shadow: 0px 0px 24px rgba(0, 252, 255, 0.5);
     }
+
     div:nth-child(2) {
       margin-top: 5px;
       font-weight: 500;
@@ -1374,6 +1484,7 @@ onBeforeMount(async () => {
     }
   }
 }
+
 //中间
 .people_total {
   width: 522px;
@@ -1383,10 +1494,12 @@ onBeforeMount(async () => {
   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;
@@ -1395,19 +1508,23 @@ onBeforeMount(async () => {
       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;
@@ -1417,52 +1534,59 @@ onBeforeMount(async () => {
       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: 226px;
   }
+
   .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%
-      );
+      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;
@@ -1474,12 +1598,14 @@ onBeforeMount(async () => {
     }
   }
 }
+
 :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;
   padding-left: 10px !important;
@@ -1488,7 +1614,8 @@ onBeforeMount(async () => {
 :deep(.el-table td.el-table__cell) {
   padding-left: 10px;
 }
-::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
   background-color: #2f4b74;
 }
 
@@ -1499,6 +1626,7 @@ onBeforeMount(async () => {
 :deep(.el-table .el-table__row) {
   border-bottom: none;
 }
+
 //右边
 //医疗卫生
 .ylws {
@@ -1508,11 +1636,13 @@ onBeforeMount(async () => {
   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);
@@ -1525,6 +1655,7 @@ onBeforeMount(async () => {
       letter-spacing: 1px;
       text-shadow: 0px 2px 2px #005473;
     }
+
     .value {
       margin-top: 5px;
       font-family: TCloudNumber, TCloudNumber;
@@ -1537,6 +1668,7 @@ onBeforeMount(async () => {
     }
   }
 }
+
 //文化事业
 .whsy {
   width: 94%;
@@ -1545,6 +1677,7 @@ onBeforeMount(async () => {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
+
   &_item {
     box-sizing: border-box;
     height: 94px;
@@ -1558,6 +1691,7 @@ onBeforeMount(async () => {
     justify-content: center;
     padding-top: 10px;
     padding-bottom: 10px;
+
     .name {
       font-family: PangMenZhengDao;
       font-size: 18px;
@@ -1565,6 +1699,7 @@ onBeforeMount(async () => {
       line-height: 21px;
       letter-spacing: 2px;
     }
+
     .value {
       margin-top: 5px;
       font-weight: 500;
@@ -1572,6 +1707,7 @@ onBeforeMount(async () => {
       color: #00f7ff;
       line-height: 35px;
       letter-spacing: 1px;
+
       span {
         font-size: 14px;
         color: #d9f8ff;
@@ -1579,22 +1715,27 @@ onBeforeMount(async () => {
       }
     }
   }
+
   &_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%;
@@ -1602,10 +1743,12 @@ onBeforeMount(async () => {
 
   display: flex;
   justify-content: space-around;
+
   &_item {
     display: flex;
     flex-direction: column;
     align-items: center;
+
     .value {
       font-weight: bold;
       font-size: 22px;
@@ -1614,10 +1757,12 @@ onBeforeMount(async () => {
       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;
@@ -1633,18 +1778,22 @@ onBeforeMount(async () => {
     }
   }
 }
+
 //交通事业
 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);
         }
@@ -1657,6 +1806,7 @@ table {
         color: #ffffff;
         line-height: 43px;
         display: flex;
+
         .s1 {
           display: block;
           width: 76px;
@@ -1664,11 +1814,13 @@ table {
           text-align: justify;
           text-align-last: justify;
         }
+
         .s2 {
           margin-left: 3px;
           color: #00ffed;
         }
       }
+
       td:nth-child(1) {
         display: block;
         width: 136px;
@@ -1684,11 +1836,13 @@ table {
         padding-right: 20px;
         background: rgba(63, 89, 133, 1);
       }
+
       td:nth-child(2) {
         padding-left: 30px;
         box-sizing: border-box;
         letter-spacing: 2px;
       }
+
       td:nth-child(3) {
         padding-left: 30px;
         box-sizing: border-box;