ggfwjsc/src/view/sy_details.vue

<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%; position: relative">
        <div class="backgroundVirtual"></div>
        <el-table
          border
          :data="data.tableData"
          style="width: 100%; height: 810px; margin-bottom: 20px"
          max-height="850px"
          class="table_border"
          :row-style="rowState"
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column prop="xm" label="姓名" width="90" />
          <el-table-column prop="dz" label="地址" />
          <el-table-column prop="nl" label="年龄" width="60" />
          <!-- <el-table-column prop="sfzhm" label="身份证号" /> -->
          <el-table-column prop="bq" label="人口标签" />
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          prev-text="上一页"
          next-text="下一页"
          v-model:current-page="pagination.currentPage"
          @current-change="handlePagination"
        />
      </div>
    </div>
    <div class="displayFlex center_bg">
      <div class="bt_title">
        <div class="yd_title left_2">
          <div class="animate-border">
            <i></i>
            <i></i>
          </div>
        </div>
      </div>
      <div style="width: 97.5%; position: relative">
        <div class="backgroundVirtual"></div>
        <el-table
          border
          :data="data.pagedData"
          style="width: 100%; height: 810px; margin-bottom: 20px"
          max-height="850"
          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="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          v-model:current-page="pagination1.currentPage"
        />
      </div>
    </div>
    <div class="displayFlex right_bg">
      <div class="bt_title">
        <div class="yd_title left_3">
          <div class="animate-border">
            <i></i>
            <i></i>
          </div>
          <span class="text">
            <img
              v-if="data.first"
              src="@/assets/sy-table/sy_details4.png"
              class="c"
              style="width: 350px"
              @click="change"
            />
            <img
              v-else
              src="@/assets/sy-table/sy_details5.png"
              class="c"
              style="width: 350px"
              @click="change"
            />
          </span>
        </div>
      </div>
      <div style="width: 97.5%; position: relative">
        <div class="backgroundVirtual"></div>
        <el-table
          border
          :data="data.tableData2"
          style="width: 100%; height: 810px; margin-bottom: 20px"
          max-height="850"
          class="table_border"
          :row-style="rowState"
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column prop="fullName" label="姓名" width="90" />
          <el-table-column prop="address" label="地址" />
          <el-table-column prop="age" label="年龄" width="60"/>
          <!-- <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="handle2"
          v-model:current-page="pagination2.currentPage"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import http from "@/utils/request.js";

const data = reactive({
  pagedData: [],
  first: true,
  tableData: [],
  tableData1: [
    {
      SerialNumber: "01",
      SubsidyType: "城乡最低生活保障补助",
      SubsidRecipients: "龙游户籍的公民...",
      SubsidyStandards: "330-1100元/月（补差发放）",
      ProcessingMethod: "自主申报",
    },
    {
      SerialNumber: "02",
      SubsidyType: "困境儿童补助",
      SubsidRecipients: "困境儿童...",
      SubsidyStandards: "困境儿童1714元/月",
      ProcessingMethod: "到户籍所在地乡镇或街道自主申报",
    },
    {
      SerialNumber: "03",
      SubsidyType: "低保低边家庭儿童",
      SubsidRecipients: "低保低边家庭中除困境儿童外的其他儿童",
      SubsidyStandards: "171.4元/月",
      ProcessingMethod: "无需申报",
    },
    {
      SerialNumber: "04",
      SubsidyType: "临时救助",
      SubsidRecipients: "城乡居民因遭遇突发事件...",
      SubsidyStandards: "根据实际情况分类分档进行救助...",
      ProcessingMethod: "自主申报",
    },
    {
      SerialNumber: "05",
      SubsidyType: "困难残疾人生活补贴",
      SubsidRecipients: "户籍、持有《中华人民共和国残疾认证》...",
      SubsidyStandards: "330元/月/人",
      ProcessingMethod: "由本人或监护人向户籍所在乡镇（街道）提出申请...",
    },
    {
      SerialNumber: "06",
      SubsidyType: "雨露计划补贴",
      SubsidRecipients: "低收入农户及其子女在校接受全日制高等职业教育...",
      SubsidyStandards: "3000元/人/年",
      ProcessingMethod: "自主申报，每年10月",
    },
    {
      SerialNumber: "07",
      SubsidyType: "扶贫小额信贷贴息",
      SubsidRecipients: "低收入农户",
      SubsidyStandards: "按3%年利率对其贷款进行贴息",
      ProcessingMethod: "浙里办自主申报",
    },
    {
      SerialNumber: "08",
      SubsidyType: "扶贫健康保险",
      SubsidRecipients: "低收入农户",
      SubsidyStandards: "150元/人/年",
      ProcessingMethod: "统一由扶贫办投保",
    },
    {
      SerialNumber: "09",
      SubsidyType: "农村困难家庭危房改造补助",
      SubsidRecipients: "农村的低保家庭、低保边缘家庭...",
      SubsidyStandards:
        "省级标准：15000元/户;县级配套标准：C级7500元/户、D级22500元/户",
      ProcessingMethod: "自主申报，无时间限制",
    },
    {
      SerialNumber: "10",
      SubsidyType: "公共租赁住房补贴",
      SubsidRecipients: "符合条件的城镇住房困难家庭",
      SubsidyStandards: "人均保障面积15平方米，10元/平方米·月。",
      ProcessingMethod: "浙里办线上办理，常态化受理",
    },
    {
      SerialNumber: "11",
      SubsidyType: "特殊身份人员免缴城乡居民基本医疗保险费",
      SubsidRecipients: "低保、低边、特困供养人员",
      SubsidyStandards: "当年城居医保费个人部分",
      ProcessingMethod:
        "年底根据民政名单统一资助参保次年的城居医保，后每月根据民政实时新增减少数据进行动态更新",
    },
    {
      SerialNumber: "12",
      SubsidyType: "医疗救助",
      SubsidRecipients: "纳入特困、低保、低边的因病致贫人员",
      SubsidyStandards:
        "纳入低保低边的因病致贫人员前6个月的住院自负合规医疗费用救助比例为60%...",
      ProcessingMethod:
        "因病致贫前6个月的费用由医保系统自动获取审核计算，纳入后的费用直接一站式结算。",
    },
    {
      SerialNumber: "13",
      SubsidyType: "学前教育免保育费资助",
      SubsidRecipients:
        "本人及其家庭的经济能力难以满足其在校（或幼儿园）期间的学习和生活基本支出的在籍学生。...",
      SubsidyStandards:
        "学前教育免保育费资助标准为我县三级公办幼儿园保育费350元/月，每学期按5个月1750元的标准进行资助...",
      ProcessingMethod: "每学期初申请，学校认定、公示后给予资助",
    },
    {
      SerialNumber: "14",
      SubsidyType: "义务教育营养改善计划（营养餐）",
      SubsidRecipients: "",
      SubsidyStandards:
        "各学校每周为家庭经济困难学生免费提供5餐荤素搭配、营养合理的营养餐（一般为午餐）。具体金额参照各校实际用餐收费减免。",
      ProcessingMethod: "每学期初申请，学校认定、公示后给予资助",
    },
    {
      SerialNumber: "15",
      SubsidyType: "义务教育家庭经济困难学生生活补助",
      SubsidRecipients: "",
      SubsidyStandards:
        "家庭经济困难寄宿生生活费补助标准：小学生每人1000元/年，初中生1250元/年；非寄宿生生活费补助标准为小学生每人500元/年，初中生625元/年。",
      ProcessingMethod: "每学期初申请，学校认定、公示后给予资助",
    },
    {
      SerialNumber: "16",
      SubsidyType: "普通高中免学杂费",
      SubsidRecipients: "",
      SubsidyStandards: "高一、高二每学期1560元，高三1500元",
      ProcessingMethod: "每学期初申请，学校认定、公示后给予资助",
    },
    {
      SerialNumber: "17",
      SubsidyType: "普通高中国家助学金",
      SubsidRecipients: "",
      SubsidyStandards: "每生每年2000元",
      ProcessingMethod: "每学期初申请，学校认定、公示后给予资助",
    },
    {
      SerialNumber: "18",
      SubsidyType: "中等职业教育免学费",
      SubsidRecipients: "",
      SubsidyStandards:
        "对公办中等职业学校全日制学历教育正式学籍一、二、三年级所有在校生免除学费（非民族地区且非戏曲表演类专业学生除外，具体包括非民族地区中等职业学校设置的音乐表演、舞蹈表演、曲艺表演、戏剧表演、杂技与魔术表演、木偶及皮影表演及制作和服装表演等专业）。对民办中等职业学校学生按当地同类型同专业公办中等职业学校学费标准给予免除，学费标准高于补助的部分，学校按规定继续向学生收取。",
      ProcessingMethod: "每学期初申请，学校认定、公示后给予资助",
    },
    {
      SerialNumber: "19",
      SubsidyType: "中等职业教育国家助学金",
      SubsidRecipients: "",
      SubsidyStandards: "每生每年2000元",
      ProcessingMethod:
        "一年按照10个月进行发放，上报时间一般为每月中旬。由中职学校上报，学校领导审核、教育局复核再报主要领导签批。",
    },
    {
      SerialNumber: "20",
      SubsidyType: "退役军人生活援助",
      SubsidRecipients: "最低生活保障家庭中的退役军人",
      SubsidyStandards: "每月增发当地最低生活保障标准10%的生活补助",
      ProcessingMethod: "每月",
    },
    {
      SerialNumber: "21",
      SubsidyType: "困难职工救助",
      SubsidRecipients:
        "已建立工会组织单位中生活困难的职工家庭。深度困难职工申报标准是家庭人均收入不高于当地最低生活保障标准；相对困难职工申报标准是家庭收入扣除因患病、子女上学、残疾等家庭刚性很必要支出后，家庭人均收入在当地最低生活保障标准1.0－1.5倍之间；意外致困家庭标准是职工本人或家庭成员因突发事件、意外伤害、患重大疾病，在获得各类赔偿、保险支付、社会救助和社会帮扶后，家庭人均收入在当地最低生活保障标准1.5倍和2.0之间的职工家庭。",
      SubsidyStandards: "根据当年救助资金开展生活、教育和医疗救助。",
      ProcessingMethod: "自主申报",
    },
    {
      SerialNumber: "22",
      SubsidyType: "缴纳城乡居民基本养老保险费",
      SubsidRecipients: "低保对象、特困人员、低保边缘户、持证残疾人员",
      SubsidyStandards: "2024年度最低缴费档次200元/年",
      ProcessingMethod:
        "民政、残联部门每月将新增特殊身份人员信息发送至社保相关业务科室进行系统维护。",
    },
    {
      SerialNumber: "23",
      SubsidyType: "求职创业补贴",
      SubsidRecipients:
        "补贴对象：本县中等职业学校（含技工院校）毕业学年内非定向培养毕业生。补贴条件：来自城乡居民最低生活保障家庭；孤儿；持证残疾人；在学期间已获得校园地或生源地国家助学贷款；脱贫人口；来自贫困残疾人家庭（城乡低保边缘家庭且毕业生父母其中一方为持证残疾人）。申领对象中有以上情形之一的，即符合补贴条件。",
      SubsidyStandards: "3000元/人",
      ProcessingMethod:
        "办理程序：毕业前一年的8月15日至9月15日，符合条件的毕业生可通过“浙江政务服务网”个人服务中“求职创业补贴申领”入口申请并上传相关证明材料；9月1日至9月25日，学校通过“浙江政务服务网”进行初审后提交人力社保部门进行网上审核，并将人力社保部门审核通过人员名单在校内公示3个工作日，于10月1日前上传公示原件；10月15前，人力社保部门完成汇总并提交财政部门，并于10月31日前将补贴资金拨付到学生个人账户。",
    },
    {
      SerialNumber: "24",
      SubsidyType: "非全日制公益性岗位补贴",
      SubsidRecipients:
        "补贴对象：本县范围内已开发非全日制公益性岗位的用人单位。补贴条件：用人单位安置符合条件的持证残疾人劳动力、农村低保或低保边缘户劳动力、零就业家庭劳动力就业，按期发放劳动报酬。",
      SubsidyStandards:
        "补贴标准及期限：本县最低工资标准的30%，期限不超过3年。对政策期满后仍难以实现就业的，可通过非全日制公益性岗位再安置一次，补贴期限重新计算。",
      ProcessingMethod:
        "申报材料：《公益性岗位补贴申请表》（附件4-1）、工资发放凭证等材料。办理程序：补贴对象向服务经办机构申请，经审批后办理拨付手续。",
    },
    {
      SerialNumber: "25",
      SubsidyType: "法律援助",
      SubsidRecipients:
        "家庭人均收入低于当地最低工资标准的经济困难公民和符合法定条件、法定案由的当事人",
      SubsidyStandards:
        "无偿提供法律咨询、代拟法律文书、刑事辩护与代理、民事案件、行政案件、国家赔偿案件的诉讼代理及非诉讼代理、值班律师法律帮助、劳动争议调解与仲裁代理等法律服务",
      ProcessingMethod: "自主申请，前往龙游县法律援助中心办理",
    },
    {
      SerialNumber: "26",
      SubsidyType: "安装水表或净水装置",
      SubsidRecipients: "低保、低边、特困供养人员",
      SubsidyStandards: "免费安装，无补助",
      ProcessingMethod: "自主申报",
    },
    {
      SerialNumber: "27",
      SubsidyType: "贫困妇女儿童救助",
      SubsidRecipients: "贫困妇女、儿童",
      SubsidyStandards: "1000元",
      ProcessingMethod: "自主申报",
    },
    {
      SerialNumber: "28",
      SubsidyType: "“贫困母亲”两癌妇女专项救助",
      SubsidRecipients: "贫困两癌妇女",
      SubsidyStandards: "10000元",
      ProcessingMethod: "自主申报",
    },
    {
      SerialNumber: "29",
      SubsidyType: "用电量减免",
      SubsidRecipients: "低保、低边、特困分散供养人员",
      SubsidyStandards: "每户每月15度的免费用电政策",
      ProcessingMethod: "省大救助信息系统",
    },
    {
      SerialNumber: "30",
      SubsidyType: "基本视听费减免",
      SubsidRecipients: "在册低保、低边、特困人员、困境儿童",
      SubsidyStandards: "免缴视听维护费每月14元。",
      ProcessingMethod: "系统自动办理",
    },
    {
      SerialNumber: "31",
      SubsidyType: "免费安装基本型机顶盒",
      SubsidRecipients: "",
      SubsidyStandards: "免缴数字电视初装费300元，免费领取一台基础型机顶盒。",
      ProcessingMethod: "凭证在广电服务大厅办理",
    },
    {
      SerialNumber: "32",
      SubsidyType: "用水量减免",
      SubsidRecipients: "在册低保人员",
      SubsidyStandards: "城区水厂供水每年60吨、乡镇水厂供水每年36吨免费用水",
      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: "低保、 困难儿童",
    },
    {
      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: 10,
  pageSize: 20,
  currentPage: 1,
});
const pagination1 = reactive({
  total: 32,
  pageSize: 10,
  currentPage: 1,
});
const pagination2 = reactive({
  total: 10,
  pageSize: 20,
  currentPage: 1,
});
//表格分页
const handleSizeChange = (val) => {
  const startIndex = (val - 1) * 10;
  const endIndex = val * 10;
  data.pagedData = data.tableData1.slice(startIndex, endIndex);
};
const handleCurrentChange = (val) => {
  // console.log(data.tableData1, val);
  const startIndex = (val - 1) * 10;
  const endIndex = val * 10;
  data.pagedData = data.tableData1.slice(startIndex, endIndex);
};
const handlePagination = (current) => {
  // console.log(current,"page1");
  pagination.currentPage = current;
  getTable("/api/ggfwyth/ysyzt/lyxsdbrymd", pagination.currentPage);
};
// 服务表格样式
const tableHeaderColor = (arg) => {
  return {
    // paddingLeft: "10px",
    letterSpacing: "1px",
    fontSize: "15px",
    height: "79px",
    backgroundColor: "rgba(23, 62, 115)",
    color: "#fff",
    border: "none",
    textAlign: "center",
    // 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",
    };
  }
};

const change = (name, index) => {
  data.first = !data.first;
};
const getTable = async (url, currentPage) => {
  await http
    .get(`${url}?page=${currentPage}&size=${pagination.pageSize}`)
    .then((res) => {
      if (res.code == 200) {
        data.tableData = res.data;
        console.log(data.tableData);
        pagination.total = res.count;
      }
    });
};

onMounted(() => {
  getTable("/api/ggfwyth/ysyzt/lyxsdbrymd", pagination.currentPage);
  handleCurrentChange(1);
});
</script>

<style lang="scss" scoped>
.module {
  width: 100%;
  height: 943px;
  margin-top: 125px;
  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;
    }
    .left_1 {
      background-image: url(@/assets/sy-table/sy_details1.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      // margin-bottom: 30px;
      // cursor: pointer;
    }
    .left_2 {
      background-image: url(@/assets/sy-table/sy_details2.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      // cursor: pointer;
      // margin-bottom: 30px;
      // margin-top: 40px;
    }
    .left_3 {
      background-image: url(@/assets/sy-table/sy_details3.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .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;
          }
        }
      }
    }
  }
  .backgroundVirtual {
    position: absolute;
    top: 0;
    width: 100%;
    height: 79px;
    // background: linear-gradient(
    //   270deg,
    //   rgba(0, 52, 131, 0.20) 0%,
    //   rgba(0, 32, 83, 0.30) 50%,
    //   rgba(0, 60, 131, 0.40) 100%
    // );
    box-shadow: inset 0px 0px 55px 0px rgba(173, 221, 255, 1);
    // backdrop-filter: blur(0px);
    z-index: 99;
  }
}
</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;
    text-align: center;
  }
}
:deep(.el-table td.el-table__cell) {
  padding: 13px 0px;
}

: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;
  // }
}
:deep(.el-pagination.is-background .btn-prev) {
  margin: 0;
}
:deep(.el-pagination.is-background .btn-next) {
  margin: 0;
}
:deep(.el-pagination) {
  justify-content: center;
}

.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;
    align-items: center;
  }
  .gTitle {
    position: absolute;
    color: #acd1f1;
    height: 100%;
    display: flex;
    align-items: center;
    left: 156px;
  }

  .c {
    width: 130px;
    height: 33px;
    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>