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

src/router/index.js

@@ -60,6 +60,11 @@ const router = createRouter({
           path: '/home/index/table',
           component: () => import('../view/sy_table.vue'),
         },
+        {
+          name: '首页表格详情',
+          path: '/home/index/table/details',
+          component: () => import('../view/sy_details.vue'),
+        }
       ]
     },
   ]

src/view/education.vue

@@ -557,7 +557,7 @@ const selectChange2 = () => {
   });
 
   selectData.list = roseData1.value;
-  console.log(selectData.list);
+  // console.log(selectData.list);
 
   setTimeout(() => {
     showR.value = true;

src/view/sy.vue

@@ -605,6 +605,7 @@
         </div>
       </template>
     </DialogTab>
+    
   </div>
 </template>
 
@@ -1745,6 +1746,7 @@ onBeforeMount(async () => {
 </script>
 
 <style lang="scss" scoped>
+
 :deep(.el-dialog) {
   --el-dialog-bg-color: none;
 }
@@ -1806,9 +1808,7 @@ onBeforeMount(async () => {
     background-color: rgba(0, 116, 255, 0) !important;
   }
 }
-</style>
 
-<style lang="scss" scoped>
 .displayFlex {
   box-sizing: border-box;
   height: 100%;

src/view/sy_details.vue

@@ -0,0 +1,786 @@
+<template>
+  <div class="module">
+    <div class="displayFlex left_bg">
+      <div class="bt_title">
+        <div class="yd_title left_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+          服务对象（低保）
+        </div>
+      </div>
+      <div style="width: 97.5%">
+        <el-table
+          border
+          :data="data.tableData"
+          style="width: 100%; height: 700px; margin-bottom: 20px"
+          max-height="800"
+          class="table_border"
+          :row-style="rowState"
+          :header-cell-style="tableHeaderColor"
+        >
+          <el-table-column prop="fullName" label="姓名" width="60" />
+          <el-table-column prop="address" label="地址" />
+          <el-table-column prop="age" label="年龄" />
+          <el-table-column prop="IDNumber" label="身份证号" />
+          <el-table-column prop="PopulationLabel" label="人口标签" />
+        </el-table>
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          prev-text="上一页"
+          next-text="下一页"
+          @current-change="handle"
+          v-model:current-page="pagination.currentPage"
+        />
+      </div>
+    </div>
+    <div class="displayFlex center_bg">
+      <div class="bt_title">
+        <div class="yd_title left_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+          服务内容清单（共32项）
+        </div>
+      </div>
+      <div style="width: 97.5%">
+        <el-table
+          border
+          :data="data.tableData1"
+          style="width: 100%; height: 700px; margin-bottom: 20px"
+          max-height="800"
+          class="table_border"
+          :row-style="rowState"
+          :header-cell-style="tableHeaderColor"
+        >
+          <el-table-column prop="SerialNumber" label="序号" width="50" />
+          <el-table-column prop="SubsidyType" label="补助类型" />
+          <el-table-column prop="SubsidRecipients" label="补助对象或条件" />
+          <el-table-column prop="SubsidyStandards" label="补助标准或内容" />
+          <el-table-column prop="ProcessingMethod" label="办理方式或时间" />
+        </el-table>
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :page-size="pagination1.pageSize"
+          :total="pagination1.total"
+          prev-text="上一页"
+          next-text="下一页"
+          @current-change="handle"
+          v-model:current-page="pagination1.currentPage"
+        />
+      </div>
+    </div>
+    <div class="displayFlex right_bg">
+      <div class="bt_title">
+        <div class="yd_title left_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+          服务结果清单
+        </div>
+      </div>
+      <div style="width: 97.5%">
+        <el-table
+          border
+          :data="data.tableData2"
+          style="width: 100%; height: 700px; margin-bottom: 20px"
+          max-height="800"
+          class="table_border"
+          :row-style="rowState"
+          :header-cell-style="tableHeaderColor"
+        >
+          <el-table-column prop="fullName" label="姓名" width="60" />
+          <el-table-column prop="address" label="地址" />
+          <el-table-column prop="age" label="年龄" />
+          <el-table-column prop="IDNumber" label="身份证号" />
+          <el-table-column prop="PopulationLabel" label="人口标签" />
+        </el-table>
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :page-size="pagination2.pageSize"
+          :total="pagination2.total"
+          prev-text="上一页"
+          next-text="下一页"
+          @current-change="handle"
+          v-model:current-page="pagination2.currentPage"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+
+const data = reactive({
+  tableData: [
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+  ],
+  tableData1: [
+    {
+      SerialNumber: "01",
+      SubsidyType: "城乡最低生活 保障补助",
+      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
+      SubsidyStandards: "330-110元/月 （补差发放）",
+      ProcessingMethod: "自主申报",
+    },
+    {
+      SerialNumber: "02",
+      SubsidyType: "城乡最低生活 保障补助",
+      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
+      SubsidyStandards: "330-110元/月 （补差发放）",
+      ProcessingMethod: "自主申报",
+    },
+    {
+      SerialNumber: "03",
+      SubsidyType: "城乡最低生活 保障补助",
+      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
+      SubsidyStandards: "330-110元/月 （补差发放）",
+      ProcessingMethod: "自主申报",
+    },
+    {
+      SerialNumber: "04",
+      SubsidyType: "城乡最低生活 保障补助",
+      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
+      SubsidyStandards: "330-110元/月 （补差发放）",
+      ProcessingMethod: "自主申报",
+    },
+    {
+      SerialNumber: "05",
+      SubsidyType: "城乡最低生活 保障补助",
+      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
+      SubsidyStandards: "330-110元/月 （补差发放）",
+      ProcessingMethod: "自主申报",
+    },
+    {
+      SerialNumber: "06",
+      SubsidyType: "城乡最低生活 保障补助",
+      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
+      SubsidyStandards: "330-110元/月 （补差发放）",
+      ProcessingMethod: "自主申报",
+    },
+    {
+      SerialNumber: "07",
+      SubsidyType: "城乡最低生活 保障补助",
+      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
+      SubsidyStandards: "330-110元/月 （补差发放）",
+      ProcessingMethod: "自主申报",
+    },
+    {
+      SerialNumber: "08",
+      SubsidyType: "城乡最低生活 保障补助",
+      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
+      SubsidyStandards: "330-110元/月 （补差发放）",
+      ProcessingMethod: "自主申报",
+    },
+    {
+      SerialNumber: "09",
+      SubsidyType: "城乡最低生活 保障补助",
+      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
+      SubsidyStandards: "330-110元/月 （补差发放）",
+      ProcessingMethod: "自主申报",
+    },
+    {
+      SerialNumber: "10",
+      SubsidyType: "城乡最低生活 保障补助",
+      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
+      SubsidyStandards: "330-110元/月 （补差发放）",
+      ProcessingMethod: "自主申报",
+    },
+  ],
+  tableData2: [
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+    {
+      fullName: "王*",
+      address: "龙游县东华街道",
+      age: "13",
+      IDNumber: "330825****92022011",
+      PopulationLabel: "低保、 困难儿童",
+    },
+  ],
+});
+// 表格分页
+const pagination = reactive({
+  total: 100,
+  pageSize: 10,
+  currentPage: 1,
+});
+const pagination1 = reactive({
+  total: 100,
+  pageSize: 10,
+  currentPage: 1,
+});
+const pagination2 = reactive({
+  total: 100,
+  pageSize: 10,
+  currentPage: 1,
+});
+//表格分页
+const handlePagination = (current) => {
+  pagination.currentPage = current;
+  // getTable(tableType.url, pagination.currentPage);
+};
+//Tab切换分页
+const handlePaginationTab = (current) => {
+  pagination.currentPage = current;
+  getTableTab(dataTab.url, pagination.currentPage);
+};
+
+// 服务表格样式
+const tableHeaderColor = (arg) => {
+  return {
+    // paddingLeft: "10px",
+    letterSpacing: "1px",
+    fontSize: "15px",
+    height: "79px",
+    backgroundColor: "#455F8A",
+    color: "#fff",
+    border: "none",
+    // boxShadow: " inset 0px 0px 56px 0px rgba(173,221,255,0.5)",
+  };
+};
+const rowState = (row) => {
+  if (row.rowIndex % 2 == 0) {
+    return {
+      letterSpacing: "1px",
+      fontSize: "14px",
+      height: "36px",
+      backgroundColor: "rgba(31, 63, 113, 1)",
+      color: "#fff",
+    };
+  } else if (row.rowIndex % 2 !== 0) {
+    return {
+      letterSpacing: "1px",
+      fontSize: "14px",
+      height: "36px",
+      backgroundColor: "rgba(43, 74, 121, 1)",
+      color: "#fff",
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.module {
+  width: 100%;
+  height: 943px;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 45px;
+  box-sizing: border-box;
+  .displayFlex {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    .bt_title {
+      font-size: 24px;
+      color: #ffffff;
+      letter-spacing: 2px;
+      text-shadow: inset 0px -2px 2px rgba(255, 255, 255, 0.65);
+      text-align: left;
+      font-style: normal;
+      margin-bottom: 20px;
+    }
+    .title {
+      font-size: 28px;
+      color: #ffffff;
+      text-align: left;
+      font-style: normal;
+      font-family: YouSheBiaoTiHei;
+      text-shadow: 0px 2px 4px rgba(56, 50, 50, 0.5);
+    }
+    .lineEnd {
+      height: 3px;
+      border-top: 1px solid #fff;
+      border-bottom: 1px dashed #fff;
+      margin: 17px 0;
+    }
+    .tabPosition {
+      display: flex;
+      flex-direction: column;
+      color: #ffffff;
+      font-size: 22px;
+      font-weight: 500;
+      letter-spacing: 1px;
+
+      img {
+        width: 18px;
+        height: 18px;
+        margin-right: 10px;
+        vertical-align: middle;
+      }
+
+      .tabPositionBox {
+        display: flex;
+        align-items: center;
+        margin: 12px 0 12px 19px;
+        cursor: pointer;
+      }
+      .tabPositionminBox {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 200px;
+        height: 50px;
+
+        border-radius: 4px;
+        cursor: pointer;
+        // opacity: 0.45;
+      }
+      .tabPositionminBoxBgc {
+        background: #92bdff;
+      }
+    }
+  }
+  .left_bg {
+    width: 33.333%;
+    box-sizing: border-box;
+    // background-color: pink;
+  }
+  .center_bg {
+    width: 33.333%;
+    box-sizing: border-box;
+    margin: 0 20px;
+    // background-color: pink;
+    // background-image: url(@/assets/images/center_bg.png);
+    // background-repeat: no-repeat;
+    // background-size: 100% 100%;
+  }
+  .right_bg {
+    width: 33.333%;
+    // background-color: pink;
+    .formText {
+      // .formText_top {
+      // }
+      .formText_bootom {
+        .a {
+          display: flex;
+          flex-wrap: wrap;
+          .a1 {
+            width: 510px;
+            height: 210px;
+            // background-image: url(@/assets/sy-table/sy-table3.png);
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            // background-color: pink;
+            padding: 15px 28px;
+            box-sizing: border-box;
+            margin-left: 20px;
+            margin-bottom: 20px;
+            .b1 {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              .c1 {
+                display: flex;
+                align-items: center;
+              }
+            }
+            .b2 {
+              width: 470px;
+              height: 90px;
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 400;
+              font-size: 22px;
+              color: #ffffff;
+              line-height: 30px;
+              text-align: left;
+              font-style: normal;
+              margin-top: 10px;
+            }
+          }
+          img {
+            width: 24px;
+            height: 24px;
+          }
+          .a2 {
+            font-size: 26px;
+            color: #ffffff;
+            letter-spacing: 2px;
+          }
+          .a3 {
+            width: 70px;
+            height: 29px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 15px;
+            border: 0px solid #ffffff;
+
+            color: #ffffff;
+            font-weight: 400;
+            font-size: 20px;
+            letter-spacing: 1px;
+            text-align: center;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+// 表格
+:deep(.el-table) {
+  background: rgba(32, 64, 115, 1) !important ;
+  color: #ffffff;
+  --el-table-tr-bg-color: none;
+  --el-table-header-bg-color: none;
+  --el-table-header-text-color: none;
+  border: 1px solid #7aceff;
+}
+.table {
+  :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
+    border: none !important;
+    padding-left: 10px !important;
+  }
+
+  :deep(.el-table td.el-table__cell) {
+    padding-left: 10px;
+  }
+}
+
+:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
+  background-color: #2f4b74;
+}
+
+:deep(.el-table__empty-block) {
+  background-color: #122560;
+}
+
+:deep(.el-table .el-table__row) {
+  border-bottom: none;
+}
+// 分页
+.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;
+  // }
+  // :deep(.el-pagination > .is-last) {
+  //   color: #ffffff;
+  // }
+}
+
+.yd_title {
+  box-sizing: border-box;
+  width: 98%;
+  height: 31px;
+  position: relative;
+  overflow: hidden;
+  /* 利用伪元素和两个i元素产生4条线 */
+  .animate-border {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 2px;
+    }
+    i {
+      position: absolute;
+      display: inline-block;
+      height: 100%;
+      width: 2px;
+    }
+    &::before {
+      top: 0;
+      left: -100%;
+      background-image: linear-gradient(
+        90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+
+      animation: one 4s linear infinite;
+    }
+    i:nth-child(1) {
+      top: -100%;
+      right: 0;
+      background-image: linear-gradient(
+        180deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      /* 动画名称  动画持续时间  动画渲染函数 动画延迟时间 动画执行次数 */
+      animation: two 4s linear 1s infinite;
+    }
+    &::after {
+      bottom: 0;
+      right: -100%;
+      background-image: linear-gradient(
+        -90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: three 4s linear 2s infinite;
+    }
+    i:nth-child(2) {
+      bottom: -100%;
+      left: 0;
+      background-image: linear-gradient(
+        360deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: four 4s linear 3s infinite;
+    }
+  }
+
+  .text {
+    display: flex;
+    position: absolute;
+    font-size: 16px;
+    font-family: SourceHanSansCN;
+    font-weight: bold;
+    color: #ffffff;
+    position: absolute;
+    right: 5px;
+    top: 1px;
+  }
+  .gTitle {
+    position: absolute;
+    color: #acd1f1;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    left: 156px;
+  }
+
+  .c {
+    width: 130px;
+    height: 42px;
+    cursor: pointer;
+  }
+}
+@keyframes one {
+  0% {
+    left: -100%;
+  }
+  50%,
+  100% {
+    left: 100%;
+  }
+}
+
+@keyframes two {
+  0% {
+    top: -100%;
+  }
+  50%,
+  100% {
+    top: 100%;
+  }
+}
+
+@keyframes three {
+  0% {
+    right: -100%;
+  }
+  50%,
+  100% {
+    right: 100%;
+  }
+}
+
+@keyframes four {
+  0% {
+    bottom: -100%;
+  }
+  50%,
+  100% {
+    bottom: 100%;
+  }
+}
+</style>
+<style lang="scss" scoped>
+:deep(.el-pagination.is-background .el-pager li) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+  margin: 0;
+}
+:deep(.el-pagination.is-background .el-pager li.is-active) {
+  background: rgba(0, 144, 255, 0.49);
+  border: 1px solid #6bade1;
+}
+:deep(.el-pagination.is-background .btn-prev:disabled) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+}
+:deep(.el-pagination.is-background .btn-next:disabled) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+}
+:deep(.el-pagination.is-background .btn-prev) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+}
+:deep(.el-pagination.is-background .btn-next) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+}
+</style>

src/view/sy_table.vue

@@ -1,10 +1,649 @@
 <template>
-  <div>table</div>
+  <div class="module">
+    <div class="displayFlex left_bg">
+      <div class="title">基本公共服务</div>
+      <div class="lineEnd"></div>
+      <div class="tabPosition" v-for="(item, index) in data.tabPosition">
+        <div class="tabPositionBox">
+          <div class="img"><img :src="item.img" alt="" /></div>
+          <div class="tabsItem">
+            {{ item.name }}
+          </div>
+        </div>
+        <div
+          class="tabPositionminBox"
+          v-for="(item1, index1) in item.son"
+          :class="data.taps == item1.id ? 'tabPositionminBoxBgc' : ''"
+          @click="tapshow(index1)"
+        >
+          {{ item1.name }}
+        </div>
+      </div>
+    </div>
+    <div class="displayFlex right_bg">
+      <div class="formText">
+        <div class="formText_top">
+          <div class="yd_title left_1">
+            <div class="animate-border">
+              <i></i>
+              <i></i>
+            </div>
+          </div>
+          <div style="width: 97.5%">
+            <el-table
+              border
+              :data="data.tableData"
+              style="width: 100%; height: 280x"
+              class="table_border"
+              :row-style="rowState"
+              :header-cell-style="tableHeaderColor"
+            >
+              <el-table-column
+                prop="highFrequencyApp"
+                label="指标"
+                width="200"
+              />
+
+              <el-table-column prop="targetValue" label="2024年目标值(市)" />
+              <el-table-column prop="targetValue1" label="2024年目标值(县)" />
+              <el-table-column prop="targetValue2" label="半年度预计 完成值" />
+              <el-table-column
+                prop="targetValue3"
+                label="半年度预计 全市排名"
+              />
+              <el-table-column prop="targetValue4" label="是否已达年度 目标" />
+              <el-table-column prop="targetValue5" label="牵头单位" />
+              <el-table-column prop="targetValue6" label="责任单位" />
+            </el-table>
+          </div>
+        </div>
+        <div class="formText_bootom">
+          <div class="yd_title left_2">
+            <div class="animate-border">
+              <i></i>
+              <i></i>
+            </div>
+          </div>
+          <div class="tableBox">
+            <div
+              class="tableBoxTop"
+              :style="{ backgroundImage: 'url(' + item.Bj + ')' }"
+              v-for="(item, index) in data.tabPublicService"
+            >
+              <div class="tableBoxTops">
+                <div class="tableBoxCenter">
+                  <img src="@/assets/sy-table/sy-table3.png" />
+                  <div class="tableli">{{ item.name }}</div>
+                </div>
+                <div class="tableBoxCenter1" @click="goto('/home/index/table/details')">
+                  详情
+                </div>
+              </div>
+              <div class="tableBoxTopa">{{ item.text }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import { ref, reactive } from "vue";
+import icon1 from "@/assets/sy-table/sy-table9.png";
+import icon2 from "@/assets/sy-table/sy-table10.png";
+import icon3 from "@/assets/sy-table/sy-table11.png";
+import icon4 from "@/assets/sy-table/sy-table12.png";
+import icon5 from "@/assets/sy-table/sy-table13.png";
+import icon6 from "@/assets/sy-table/sy-table14.png";
+import icon7 from "@/assets/sy-table/sy-table15.png";
+import icon8 from "@/assets/sy-table/sy-table16.png";
+import icon9 from "@/assets/sy-table/sy-table17.png";
+import icon10 from "@/assets/sy-table/sy-table18.png";
+import icon11 from "@/assets/sy-table/sy-table19.png";
+import Bj from "@/assets/sy-table/sy-table8.png";
+import Bj1 from "@/assets/sy-table/sy-table7.png";
+import Bj2 from "@/assets/sy-table/sy-table4.png";
+import Bj3 from "@/assets/sy-table/sy-table5.png";
+import Bj4 from "@/assets/sy-table/sy-table6.png";
 
+import { useRouter, useRoute } from "vue-router";
+const router = useRouter();
+const routers = useRoute();
+// 路由跳转
+const goto = (url) => {
+  router.push({
+    path: `${url}`,
+  });
+};
+
+const data = reactive({
+  taps: "0",
+  taps1: "0",
+  tabPosition: [
+    {
+      id: "0",
+      name: "幼有所育",
+      img: icon1,
+    },
+    {
+      id: "1",
+      name: "学有所教",
+      img: icon2,
+    },
+    {
+      id: "2",
+      name: "老有所得",
+      img: icon3,
+    },
+    {
+      id: "3",
+      name: "病有所医",
+      img: icon4,
+    },
+    {
+      id: "4",
+      name: "老有所养",
+      img: icon5,
+    },
+    {
+      id: "5",
+      name: "住有所居",
+      img: icon6,
+    },
+    {
+      id: "6",
+      name: "弱有所扶",
+      img: icon7,
+      son: [
+        {
+          id: "0",
+          name: "社会救助服务",
+        },
+        {
+          id: "1",
+          name: "公共法律服务",
+        },
+        {
+          id: "2",
+          name: "扶残助残服务",
+        },
+        {
+          id: "3",
+          name: "儿童健康服务",
+        },
+      ],
+    },
+    {
+      id: "7",
+      name: "军有所扶",
+      img: icon8,
+    },
+    {
+      id: "8",
+      name: "文有所化",
+      img: icon9,
+    },
+    {
+      id: "9",
+      name: "体有所育",
+      img: icon10,
+    },
+    {
+      id: "10",
+      name: "事有所便",
+      img: icon11,
+    },
+  ],
+  tableData: [
+    {
+      highFrequencyApp: "最低生活保障标准金额(元)",
+      targetValue: ">13200",
+      targetValue1: ">13200",
+      targetValue2: "13200",
+      targetValue3: "暂未排名",
+      targetValue4: "",
+      targetValue5: "县民政局",
+      targetValue6: "县民政局",
+    },
+    {
+      highFrequencyApp: "社会救助服务联合体规范运行指数",
+      targetValue: "80",
+      targetValue1: "80",
+      targetValue2: "100",
+      targetValue3: "暂未排名",
+      targetValue4: "✓",
+      targetValue5: "县民政局",
+      targetValue6: "县医保局",
+    },
+    {
+      highFrequencyApp: "困难群众医疗费用综合保障率(%%)",
+      targetValue: ">83",
+      targetValue1: ">83",
+      targetValue2: "86.59(1-5月)",
+      targetValue3: "第2(1-5月)",
+      targetValue4: "✓",
+      targetValue5: "县民政局",
+      targetValue6: "县医保局",
+    },
+    {
+      highFrequencyApp: "“群帮惠”因难群体帮扶数(万人次)",
+      targetValue: "0.5960",
+      targetValue1: "0.05",
+      targetValue2: "0.0359",
+      targetValue3: "中等",
+      targetValue4: " ",
+      targetValue5: "县民政局",
+      targetValue6: "县总工会",
+    },
+  ],
+  tabPublicService: [
+    {
+      id: "0",
+      name: "最低生活保障",
+      Bj: Bj,
+      text: "我县在册低保对象7374户9463人，为",
+    },
+    {
+      id: "1",
+      name: "重特困人员救助供养",
+      Bj: Bj1,
+      text: "我县特困供养对象329户331人，2023",
+    },
+    {
+      id: "2",
+      name: "医疗救助",
+      Bj: Bj2,
+      text: "我县医疗救助的对象为民政部门认定的特困供",
+    },
+    {
+      id: "3",
+      name: "临时救助",
+      Bj: Bj3,
+      text: "为数助对象发放临时救助金，2023年共救",
+    },
+    {
+      id: "4",
+      name: "受灾人员救助",
+      Bj: Bj4,
+      text: "机构改革以来(2019年)，我县自然灾害",
+    },
+  ],
+});
+
+const tapshow = (val) => {
+  console.log(val);
+  data.taps = val;
+};
+// 服务表格样式
+const tableHeaderColor = (arg) => {
+  return {
+    // paddingLeft: "10px",
+    letterSpacing: "1px",
+    fontSize: "15px",
+    height: "79px",
+    backgroundColor: "#455F8A",
+    color: "#fff",
+    border: "none",
+    // boxShadow: " inset 0px 0px 56px 0px rgba(173,221,255,0.5)",
+  };
+};
+const rowState = (row) => {
+  if (row.rowIndex % 2 == 0) {
+    return {
+      letterSpacing: "1px",
+      fontSize: "14px",
+      height: "36px",
+      backgroundColor: "rgba(31, 63, 113, 1)",
+      color: "#fff",
+    };
+  } else if (row.rowIndex % 2 !== 0) {
+    return {
+      letterSpacing: "1px",
+      fontSize: "14px",
+      height: "36px",
+      backgroundColor: "rgba(43, 74, 121, 1)",
+      color: "#fff",
+    };
+  }
+};
 </script>
 
 <style lang="scss" scoped>
+.module {
+  width: 100%;
+  display: flex;
+  .displayFlex {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    .title {
+      font-size: 28px;
+      color: #ffffff;
+      text-align: left;
+      font-style: normal;
+      font-family: YouSheBiaoTiHei;
+      text-shadow: 0px 2px 4px rgba(56, 50, 50, 0.5);
+    }
+    .lineEnd {
+      height: 3px;
+      border-top: 1px solid #fff;
+      border-bottom: 1px dashed #fff;
+      margin: 17px 0;
+    }
+    .tabPosition {
+      display: flex;
+      flex-direction: column;
+      color: #ffffff;
+      font-size: 22px;
+      font-weight: 500;
+      letter-spacing: 1px;
+
+      img {
+        width: 18px;
+        height: 18px;
+        margin-right: 10px;
+        vertical-align: middle;
+      }
+
+      .tabPositionBox {
+        display: flex;
+        align-items: center;
+        margin: 12px 0 12px 19px;
+        cursor: pointer;
+      }
+      .tabPositionminBox {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 200px;
+        height: 50px;
+
+        border-radius: 4px;
+        cursor: pointer;
+        // opacity: 0.45;
+      }
+      .tabPositionminBoxBgc {
+        background: #92bdff;
+      }
+    }
+  }
+  .left_bg {
+    // width: 642px;
+    width: 230px;
+    height: 943px;
+    box-sizing: border-box;
+    padding: 19px 17px;
+    // margin-right: 28px;
+    background: linear-gradient(
+      270deg,
+      rgba(3, 56, 127, 0.77) 0%,
+      rgba(3, 56, 127, 0.74) 100%
+    );
+    box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
+    border-radius: 0px 24px 24px 0px;
+    backdrop-filter: blur(3px);
+  }
+  .right_bg {
+    width: 100%;
+    height: 943px;
+    margin: 0 30px 30px 30px;
+    // background-color: pink;
+    .formText {
+      // .formText_top {
+      // }
+      .formText_bootom {
+        .tableBox {
+          display: flex;
+          flex-wrap: wrap;
+          .tableBoxTop {
+            width: 510px;
+            height: 210px;
+            // background-image: url(@/assets/sy-table/sy-table3.png);
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            // background-color: pink;
+            padding: 15px 28px;
+            box-sizing: border-box;
+            margin-left: 20px;
+            margin-bottom: 20px;
+            .tableBoxTops {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              .tableBoxCenter {
+                display: flex;
+                align-items: center;
+              }
+            }
+            .tableBoxTopa {
+              width: 470px;
+              height: 90px;
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 400;
+              font-size: 22px;
+              color: #ffffff;
+              line-height: 30px;
+              text-align: left;
+              font-style: normal;
+              margin-top: 10px;
+            }
+          }
+          img {
+            width: 24px;
+            height: 24px;
+          }
+          .tableli {
+            font-size: 26px;
+            color: #ffffff;
+            letter-spacing: 2px;
+          }
+          .tableBoxCenter1 {
+            width: 70px;
+            height: 29px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 15px;
+            border: 0px solid #ffffff;
+
+            color: #ffffff;
+            font-weight: 400;
+            font-size: 20px;
+            letter-spacing: 1px;
+            text-align: center;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+.left_1 {
+  background-image: url(@/assets/sy-table/sy-table1.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin-bottom: 30px;
+  // cursor: pointer;
+}
+.left_2 {
+  background-image: url(@/assets/sy-table/sy-table2.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  // cursor: pointer;
+  margin-bottom: 30px;
+  margin-top: 40px;
+}
+</style>
+<style lang="scss" scoped>
+:deep(.el-table) {
+  background: rgba(32, 64, 115, 1) !important ;
+  color: #ffffff;
+  --el-table-tr-bg-color: none;
+  --el-table-header-bg-color: none;
+  --el-table-header-text-color: none;
+  border: 1px solid #7aceff;
+}
+.table {
+  :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
+    border: none !important;
+    padding-left: 10px !important;
+  }
+
+  :deep(.el-table td.el-table__cell) {
+    padding-left: 10px;
+  }
+}
+
+:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
+  background-color: #2f4b74;
+}
+
+:deep(.el-table__empty-block) {
+  background-color: #122560;
+}
+
+:deep(.el-table .el-table__row) {
+  border-bottom: none;
+}
+
+.yd_title {
+  box-sizing: border-box;
+  width: 96%;
+  height: 31px;
+  position: relative;
+  overflow: hidden;
+  /* 利用伪元素和两个i元素产生4条线 */
+  .animate-border {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 2px;
+    }
+    i {
+      position: absolute;
+      display: inline-block;
+      height: 100%;
+      width: 2px;
+    }
+    &::before {
+      top: 0;
+      left: -100%;
+      background-image: linear-gradient(
+        90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+
+      animation: one 4s linear infinite;
+    }
+    i:nth-child(1) {
+      top: -100%;
+      right: 0;
+      background-image: linear-gradient(
+        180deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      /* 动画名称  动画持续时间  动画渲染函数 动画延迟时间 动画执行次数 */
+      animation: two 4s linear 1s infinite;
+    }
+    &::after {
+      bottom: 0;
+      right: -100%;
+      background-image: linear-gradient(
+        -90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: three 4s linear 2s infinite;
+    }
+    i:nth-child(2) {
+      bottom: -100%;
+      left: 0;
+      background-image: linear-gradient(
+        360deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: four 4s linear 3s infinite;
+    }
+  }
+
+  .text {
+    display: flex;
+    position: absolute;
+    font-size: 16px;
+    font-family: SourceHanSansCN;
+    font-weight: bold;
+    color: #ffffff;
+    position: absolute;
+    right: 5px;
+    top: 1px;
+  }
+  .gTitle {
+    position: absolute;
+    color: #acd1f1;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    left: 156px;
+  }
+
+  .c {
+    width: 130px;
+    height: 42px;
+    cursor: pointer;
+  }
+}
+@keyframes one {
+  0% {
+    left: -100%;
+  }
+  50%,
+  100% {
+    left: 100%;
+  }
+}
+
+@keyframes two {
+  0% {
+    top: -100%;
+  }
+  50%,
+  100% {
+    top: 100%;
+  }
+}
+
+@keyframes three {
+  0% {
+    right: -100%;
+  }
+  50%,
+  100% {
+    right: 100%;
+  }
+}
+
+@keyframes four {
+  0% {
+    bottom: -100%;
+  }
+  50%,
+  100% {
+    bottom: 100%;
+  }
+}
 </style>