ggfwjsc/src/view/sy_table.vue

<template>
  <div class="module">
    <div class="displayFlex left_bg">
      <div class="title">基本公共服务</div>
      <div class="lineEnd"></div>
      <div class="menuBar">
        <div class="tabPosition" v-for="(item, index) in data.tabPosition">
          <div class="tabPositionBox" @click="toggleVisibility(item)">
            <div style="display: flex; text-align: center">
              <div class="img"><img :src="item.img" alt="" /></div>
              <div class="tabsItem">
                {{ item.name }}
              </div>
            </div>
            <div class="img1">
              <img src="@/assets/sy-table/sy-table21.png" v-if="item.visible" />
              <img src="@/assets/sy-table/sy-table20.png" v-else />
            </div>
          </div>
          <transition name="fade-scale">
            <div v-show="item.visible">
              <div
                class="tabPositionminBox"
                v-for="(item1, index1) in item.son"
                :class="
                  data.taps == item1.id && data.taps1 == item.id
                    ? 'tabPositionminBoxBgc'
                    : ''
                "
                @click="tapshow(item, index1)"
              >
                {{ item1.name }}
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
    <div class="displayFlex right_bg" v-if="gk">
      <div class="formText">
        <div class="formText_top" v-if="show_7yx">
          <div class="yd_title left_1">
            <div class="animate-border">
              <i></i>
              <i></i>
            </div>
          </div>
          <div style="width: 97.5%; position: relative">
            <div class="backgroundVirtual"></div>
            <el-table
              border
              :data="data.tableData"
              max-height="280"
              style="width: 100%; height: 280x"
              class="table_border"
              :row-style="rowState"
              :header-cell-style="tableHeaderColor"
            >
              <el-table-column
                prop="highFrequencyApp"
                label="指标"
                width="340"
                align="center"
              />

              <el-table-column
                prop="targetValue"
                label="2024年目标值(市)"
                align="center"
              />
              <el-table-column
                prop="targetValue1"
                label="2024年目标值(县)"
                align="center"
              />
              <el-table-column
                prop="targetValue2"
                label="半年度预计 完成值"
                align="center"
              />
              <el-table-column
                prop="targetValue3"
                label="半年度预计   全市排名"
                align="center"
              />
              <el-table-column
                prop="targetValue4"
                label="是否已达年度 目标"
                align="center"
              />
              <el-table-column
                prop="targetValue5"
                label="牵头单位"
                align="center"
              />
              <el-table-column
                prop="targetValue6"
                label="责任单位"
                align="center"
              />
            </el-table>
          </div>
        </div>
        <div class="formText_bootom">
          <div
            class="yd_title left_2"
            :style="{ 'margin-top': show_7yx ? '40px' : '0px' }"
          >
            <div class="animate-border">
              <i></i>
              <i></i>
            </div>
          </div>
          <div class="tableBox" v-if="data.tabPublicService.length > 0">
            <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(item)">详情</div>
              </div>
              <div class="tableBoxTopa">{{ item.text }}</div>
              <div class="progress-container">
                <div
                  class="progress-bar"
                  :style="{ width: item.progress + '%' }"
                >
                  <span>{{ item.progress }}%</span>
                </div>
              </div>
            </div>
          </div>
          <template v-else>
            <el-empty description="无数据" />
          </template>
        </div>
      </div>
    </div>
    <work v-if="gaikuangList.work"></work>
    <education v-if="gaikuangList.education"></education>
    <yl v-if="gaikuangList.yl"></yl>
    <hygiene v-if="gaikuangList.hygiene"></hygiene>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } 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 work from "./table_gk/gk_work.vue";
import education from "./table_gk/gk_education.vue";
import yl from "./table_gk/gk_yl.vue";
import hygiene from "./table_gk/gk_hygiene.vue";
import { useRouter, useRoute } from "vue-router";
import http from "@/utils/request.js";
import { ElMessage } from "element-plus";
import tools from "@/utils/tools";

const router = useRouter();
const routers = useRoute();
// 路由跳转
const goto = (val) => {
  const availableRoutes = [
    "最低生活保障",
    "老年人福利补贴",
    "慢性病患者健康管理",
    "义务教育学生生活补助",
    "义务教育学生营养改善计划",
  ];
  // 检查数组val.name中是否存在availableRoutes。
  if (availableRoutes.includes(val.name)) {
    router.push({
      path: "/home/index/table/details",
      query: { name: val.name },
    });
  } else {
    ElMessage.warning({
      message: `${val.name}暂无数据!`,
      offset: 100, // 距离窗口顶部的偏移量
    });
  }
};

const data = reactive({
  taps1: "6",
  taps: "1",
  tabPosition: [
    {
      id: "0",
      name: "幼有所育",
      img: icon1,
      visible: false,
      son: [
        {
          id: "0",
          name: "优孕优生服务",
        },
        {
          id: "1",
          name: "儿童健康服务",
        },
        {
          id: "2",
          name: "儿童关爱服务",
        },
      ],
    },
    {
      id: "1",
      name: "学有所教",
      img: icon2,
      visible: false,
      son: [
        {
          id: "0",
          name: "概况",
        },
        {
          id: "1",
          name: "学前教育助学服务",
        },
        {
          id: "2",
          name: "义务教育服务",
        },
        {
          id: "3",
          name: "普通高中助学服务",
        },
        {
          id: "4",
          name: "中等职业教育助学服务",
        },
      ],
    },
    {
      id: "2",
      name: "劳有所得",
      img: icon3,
      visible: false,
      son: [
        {
          id: "0",
          name: "就业创业服务",
        },
        {
          id: "1",
          name: "工伤失业保险服务",
        },
      ],
    },
    {
      id: "3",
      name: "病有所医",
      img: icon4,
      visible: false,
      son: [
        {
          id: "0",
          name: "概况",
        },
        {
          id: "1",
          name: "公共卫生服务",
        },
        {
          id: "2",
          name: "医疗保险服务",
        },
        {
          id: "3",
          name: "计划生育扶助服务",
        },
      ],
    },
    {
      id: "4",
      name: "老有所养",
      img: icon5,
      visible: false,
      son: [
        {
          id: "0",
          name: "概况",
        },
        {
          id: "1",
          name: "养老助老服务",
        },
        {
          id: "2",
          name: "养老保险服务",
        },
      ],
    },
    {
      id: "5",
      name: "住有所居",
      img: icon6,
      visible: false,
      son: [
        {
          id: "0",
          name: "公租房服务",
        },
        {
          id: "1",
          name: "住房改造服务",
        },
      ],
    },
    {
      id: "6",
      name: "弱有所扶",
      img: icon7,
      visible: true,
      son: [
        {
          id: "0",
          name: "概况",
        },
        {
          id: "1",
          name: "社会救助服务",
        },
        {
          id: "2",
          name: "公共法律服务",
        },
        {
          id: "3",
          name: "扶残助残服务",
        },
      ],
    },
    {
      id: "7",
      name: "军有所抚",
      img: icon8,
      visible: false,
      son: [
        {
          id: "0",
          name: "优军优抚服务",
        },
      ],
    },
    {
      id: "8",
      name: "文有所化",
      img: icon9,
      visible: false,
      son: [
        {
          id: "0",
          name: "公共文化服务",
        },
      ],
    },
    {
      id: "9",
      name: "体有所健",
      img: icon10,
      visible: false,
      son: [
        {
          id: "0",
          name: "公共体育服务",
        },
      ],
    },
    {
      id: "10",
      name: "事有所便",
      img: icon11,
      visible: false,
      son: [
        {
          id: "0",
          name: "生活便利服务",
        },
        {
          id: "1",
          name: "生活安全服务",
        },
        {
          id: "2",
          name: "生活环境服务",
        },
        {
          id: "3",
          name: "殡葬公共服务",
        },
      ],
    },
  ],
  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",
    //   Bj: Bj,
    //   name: "最低生活保障",
    //   text: "我县在册低保对象7374户9463人，为低保对象发放最低生活保障金，2023年共支出低保金9912.65万元。",
    //   progress: 95, //进度条
    // },
    // {
    //   id: "1",
    //   name: "重特困人员救助供养",
    //   Bj: Bj1,
    //   text: "我县特困供养对象329户331人，2023年支出特困供养经费722.29万元。",
    //   progress: 95, //进度条
    // },
    // {
    //   id: "2",
    //   name: "医疗救助",
    //   Bj: Bj2,
    //   text: "我县医疗救助的对象为民攻部门认定的特困供养人员最低生活保障家庭成员、最低生活保障边缘家庭成员（包括纳入低保、低边的因病致贫等支出型贫困对象）。",
    //   progress: 95, //进度条
    // },
    // {
    //   id: "3",
    //   name: "临时救助",
    //   Bj: Bj3,
    //   text: "为数助对象发放临时救助金，2023年共救助609户1036人，数助225.39万元。",
    //   progress: 95, //进度条
    // },
    // {
    //   id: "4",
    //   name: "受灾人员救助",
    //   Bj: Bj4,
    //   text: "机构改革以来(2019年)，我县自然灾害形势总体平稳，未发生因灾亡人事故。",
    //   progress: 95, //进度条
    // },
  ],
  Bj: [Bj, Bj1, Bj2, Bj3, Bj4],
});
const gaikuangList = reactive({
  work: false,
  education: false,
  yl: false,
  hygiene: false,
});
//是否显示七优享
const show_7yx = ref(true);
const gk = computed(() => {
  if (
    gaikuangList.work ||
    gaikuangList.hygiene ||
    gaikuangList.education ||
    gaikuangList.yl
  ) {
    return false;
  } else {
    return true;
  }
});

const tapshow = (parentId, childId) => {
  console.log(parentId, childId, "菜单名");
  data.taps1 = parentId.id;
  data.taps = childId;
  if (
    childId == 0 &&
    (parentId.name == "弱有所扶" ||
      parentId.name == "学有所教" ||
      parentId.name == "老有所养" ||
      parentId.name == "病有所医")
  ) {
    gaikuang(parentId.name);
  } else {
    // gaikuangList.work = false;
    // gaikuangList.education = false;
    // gaikuangList.yl = false;
    // gaikuangList.hygiene = false;
    for (let name in gaikuangList) {
      gaikuangList[name] = false;
    }
    getData(parentId.name, parentId.son[childId].name);
    // 菜单名匹配
    const menuName = [
      "幼有善育",
      "学有优教",
      "劳有所得",
      "病有良医",
      "老有康养",
      "住有宜居",
      "弱有众扶",
      // "体有所健",
    ];
    // 检查 parentId 的第一个字符是否与 menuName 中的第一个字符匹配
    const firstChar = parentId.name.charAt(0);
    const matchingMenu = menuName.find((name) => name.charAt(0) === firstChar);
    if (matchingMenu) {
      show_7yx.value = true;
      sevenYX(matchingMenu);
    } else {
      show_7yx.value = false;
    }
  }
};
const toggleVisibility = (val) => {
  // console.log(val, "最低生活保障");
  data.tabPosition.forEach((parent) => {
    parent.visible = false;
    if (parent.id === val.id) {
      parent.visible = !parent.visible;
    }
  });
  tapshow(val, 0);
};
const gaikuang = (name) => {
  console.log(4444, name);
  for (let name in gaikuangList) {
    gaikuangList[name] = false;
  }
  if (name == "弱有所扶") {
    gaikuangList.work = true;
  } else if (name == "学有所教") {
    gaikuangList.education = true;
  } else if (name == "老有所养") {
    gaikuangList.yl = true;
  } else if (name == "病有所医") {
    gaikuangList.hygiene = true;
  }
};
// 服务表格样式
const tableHeaderColor = (arg) => {
  return {
    // paddingLeft: "10px",
    letterSpacing: "1px",
    height: "79px",
    backgroundColor: "#455F8A",
    color: "#fff",
    border: "none",
    textAlign: "center",
    fontWeight: "500",
    fontSize: "22px",
    fontFamily: "PingFangSC, PingFang SC",
  };
};
const rowState = (row) => {
  if (row.rowIndex % 2 == 0) {
    return {
      letterSpacing: "1px",
      fontSize: "19px",
      height: "36px",
      backgroundColor: "rgba(31, 63, 113, 1)",
      color: "#fff",
    };
  } else if (row.rowIndex % 2 !== 0) {
    return {
      letterSpacing: "1px",
      fontSize: "19px",
      height: "36px",
      backgroundColor: "rgba(43, 74, 121, 1)",
      color: "#fff",
    };
  }
};
const getData = async (name, fullName) => {
  await http
    .get(`/api/ggfwyth/pg/jbggfw?mc=${name}&xm=${fullName}`)
    .then((res) => {
      if (res.code == 200) {
        data.tabPublicService = [];
        if (res.data.length > 0) {
          res.data.forEach((item, index) => {
            const imageIndex = index % data.Bj.length;
            data.tabPublicService.push({
              id: index,
              Bj: data.Bj[imageIndex],
              name: item.sx,
              text: item.bmfxqk,
              // progress: item.xh,
              progress: "95", //进度条
            });
          });
        }
      }
    });
};
const sevenYX = (name) => {
  http.get(`/api/ggfwyth/pg/qyx?ly=${name}`).then((res) => {
    if (res.code == 200) {
      // console.log(res.data, "七优享");
      data.tableData = [];
      if (res.data.length > 0) {
        res.data.forEach((item, index) => {
          data.tableData.push({
            highFrequencyApp: item.zb, //	指标
            targetValue: item.mbz, //目标值(市)
            targetValue1: item.mbz, ////目标值(县)
            targetValue2: item.wcz, //完成值
            targetValue3: item.sspm, //省市排名
            targetValue4: item.zbqk, //是否达标 	指标情况
            targetValue5: item.qtdw, //牵头单位
            targetValue6: item.zrdw, //责任单位
          });
        });
      }
    }
  });
};

onMounted(() => {
  // tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d");
  getData("弱有所扶", "社会救助服务");
  sevenYX("弱有众扶");
});
// onMounted(() => {
//   let token = tools.data.get("token");
//   if (token == null) {
//     ElMessage.error("请重新登录!");
//     window.location.href =
//       "http://220.191.238.50:996/api/login?returnURL=" + window.location.href;
//   }
// });
</script>

<style lang="scss" scoped>
.module {
  width: 100%;
  display: flex;
  margin-top: 112px;
  .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;
      font-family: titletheRightWay, titletheRightWay;
      text-shadow: 0px 2px 4px rgba(56, 50, 50, 0.5);
      padding: 19px 0 0 17px;
    }
    .lineEnd {
      height: 3px;
      border-top: 1px solid #fff;
      border-bottom: 1px dashed #fff;
      width: 180px;
      margin: 17px 0;
      margin-left: 16px;
    }

    .menuBar::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    .menuBar {
      height: 100%;
      overflow-y: auto;
    }
    .tabPosition {
      display: flex;
      flex-direction: column;
      color: #ffffff;
      font-size: 22px;
      font-weight: 500;
      letter-spacing: 1px;
    }
    .tabPosition img {
      width: 18px;
      height: 18px;
      margin-right: 10px;
      vertical-align: middle;
    }
    .tabPosition .img1 {
      img {
        width: 20px;
        height: 10px;
        margin-right: 24px;
        vertical-align: middle;
      }
    }
    .tabPositionBox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 12px 0 12px 19px;
      cursor: pointer;
    }
    .tabPositionminBox {
      font-size: 18px;
      display: flex;
      align-items: center;
      // justify-content: center;
      padding-left: 30px;
      height: 50px;
      background-color: #032862;
      white-space: nowrap;
      cursor: pointer;
    }
    .tabPositionminBox::before {
      content: "";
      display: block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: #ffffff;
      margin-right: 6px;
    }
    .tabPositionminBoxBgc {
      background: rgba(73, 121, 191);
    }

    .fade-scale-enter-active,
    .fade-scale-leave-active {
      transition: opacity 0.5s ease;
    }
    .fade-scale-enter,
    .fade-scale-leave-to {
      opacity: 0;
    }
  }
  .left_bg {
    // width: 642px;
    width: 270px;
    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%
    );
    border-radius: 0px 24px 24px 0px;
    backdrop-filter: blur(3px);
  }
  .right_bg {
    width: 100%;
    height: 943px;
    margin: 40px 30px 0px 30px;
    // background-color: pink;
    .formText {
      // .formText_top {
      // }
      .formText_bootom {
        .tableBox {
          display: flex;
          flex-wrap: wrap;
          height: 460px;
          overflow-y: auto;
          :nth-child(3n).tableBoxTop {
            margin-right: 0px;
          }
          .tableBoxTop {
            width: 517px;
            height: 210px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            padding: 15px 28px;
            box-sizing: border-box;
            margin-right: 20px;
            margin-bottom: 20px;
            position: relative;
            .tableBoxTops {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .tableBoxCenter {
                display: flex;
                align-items: center;
              }
            }
            .tableBoxTopa {
              width: 470px;
              height: 124px;
              // background-color: pink;
              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;
              overflow-y: auto;
            }
            .tableBoxTopa::-webkit-scrollbar {
              display: none; /* Chrome Safari */
            }
            .progress-container {
              position: absolute;
              bottom: 2px;
              left: 0px;
              width: 100%;
              height: 10px;
              background-color: rgba(255, 255, 255, 0.2);
              border-radius: 5px;
              // overflow: hidden;

              .progress-bar {
                height: 100%;
                background: linear-gradient(90deg, #31ffd8 0%, #00e5ff 100%);
                border-radius: 0px 100px 100px 0px;
                transition: width 0.3s ease;
                position: relative;
                span {
                  position: absolute;
                  right: -10px;
                  top: -30%;
                  transform: translateY(-50%);
                  color: #fff;
                  font-size: 18px;
                }
              }
            }
          }
          img {
            width: 24px;
            height: 24px;
            margin-right: 8px;
          }
          .tableli {
            font-size: 26px;
            color: #ffffff;
            letter-spacing: 2px;
            font-family: titleNore;
          }
          .tableBoxCenter1 {
            width: 70px;
            height: 29px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            border: 1px solid #ffffff6b;

            color: #ffffff;
            font-weight: 400;
            font-size: 20px;
            letter-spacing: 1px;
            text-align: center;
            cursor: pointer;
          }
        }
        // .tableBox::-webkit-scrollbar {
        //   display: none; /* Chrome Safari */
        // }
        /* 自定义整个滚动条 */
        ::-webkit-scrollbar {
          width: 8px; /* 设置滚动条的宽度 */
        }

        /* 自定义滚动条轨道 */
        ::-webkit-scrollbar-track {
          background: rgba(255, 255, 255, 0.2); /* 设置轨道的背景颜色 */
          border-radius: 4px;
        }

        /* 自定义滚动条的滑块（thumb） */
        ::-webkit-scrollbar-thumb {
          background: rgba(26, 161, 255, 0.4); /* 设置滑块的背景颜色 */
          border-radius: 4px;
        }

        /* 当滑块悬停或活动时自定义滚动条的滑块 */
        ::-webkit-scrollbar-thumb:hover {
          background: #555; /* 设置滑块在悬停状态下的背景颜色 */
          border-radius: 4px;
        }
      }
    }
    .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 16px 0px rgba(173, 221, 255, 0.5);
      backdrop-filter: blur(0px);
      z-index: 99;
    }
  }
}

.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);
  color: #ffffff;
  --el-table-border-color: rgba(57, 107, 161);
  --el-table-tr-bg-color: none;
  --el-table-header-bg-color: none;
  --el-table-header-text-color: none;
  border: 1px solid #7aceff;
}
// :deep(.el-table tr) {
//   background: linear-gradient(
//     270deg,
//     rgba(0, 52, 131, 0.69) 0%,
//     rgba(0, 32, 83, 0.77) 50%,
//     rgba(0, 60, 131, 0.74) 100%
//   );
//   box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
//   backdrop-filter: blur(0px);
// }

.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: 12px 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;
}

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