From bfd0b9ea53e2da2c2af25e85ede426c1402d5c45 Mon Sep 17 00:00:00 2001
From: duanxiaohai <1812246227@qq.com>
Date: Tue, 4 Jun 2024 09:15:17 +0800
Subject: [PATCH 1/3] gx

---
 src/view/echarts_work/eP1.vue | 2 +-
 src/view/work.vue             | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/view/echarts_work/eP1.vue b/src/view/echarts_work/eP1.vue
index 319cc1b..a289c4b 100644
--- a/src/view/echarts_work/eP1.vue
+++ b/src/view/echarts_work/eP1.vue
@@ -302,7 +302,7 @@ onBeforeMount(() => {
   setTimeout(() => {
     data.list = props.list;
     setChart1();
-    // console.log(data.list, data.list1, data.list2, "教育");
+    console.log(data.list, "教育");
     getOption();
     setChart();
   }, 600);
diff --git a/src/view/work.vue b/src/view/work.vue
index 9615930..d66bdcf 100644
--- a/src/view/work.vue
+++ b/src/view/work.vue
@@ -181,8 +181,8 @@ const jz = ref([
 const jzChange = (index, value) => {
   jz.value[index].choose = value;
   if (index === 0) {
-    data.list2 = value === "1" ? data.education : data.medical;
-    // console.log(111, jz.value[index].choose);
+    data.list2 = value == "1" ? data.education : data.medical;
+    // console.log(value, data.education, data.medical);
   } else if (index === 1) {
     data.list = value === "1" ? data.housing : data.temporary;
   } else if (index === 2) {
@@ -214,7 +214,7 @@ const data = reactive({
       {
         nf: "2019", //救助年份
         jzrs: "4202", //救助人数
-        jzje: "1523", //救助金额
+        jzje: "1200", //救助金额
       },
     ],
     year: ["2019"],
@@ -324,7 +324,6 @@ const getData = async () => {
 
       data.medical.data = res.data.specialAssistance.medical.data;
       data.medical.year = res.data.specialAssistance.medical.year;
-      data.list2 = data.medical;
       // 住房&临时救助
       data.housing.data = res.data.specialAssistance.housing.data;
       data.housing.year = res.data.specialAssistance.housing.year;

From 145a35d8ae2f68db3a55dc5654b47e7316b1cc53 Mon Sep 17 00:00:00 2001
From: yaoyuhao <yaoyuhao@ydool.com>
Date: Tue, 4 Jun 2024 09:24:23 +0800
Subject: [PATCH 2/3] gx

---
 src/view/education.vue | 137 +++++++++++++++++++++++++++++++++++++--
 src/view/work.vue      | 141 +++++++++++++++++++++++++++++++++++++++--
 2 files changed, 266 insertions(+), 12 deletions(-)

diff --git a/src/view/education.vue b/src/view/education.vue
index e0d07fe..b49dbbc 100644
--- a/src/view/education.vue
+++ b/src/view/education.vue
@@ -2,7 +2,12 @@
   <div class="module">
     <div class="displayFlex left_bg">
       <div class="flex1">
-        <div class="yd_title left_1"></div>
+        <div class="yd_title left_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
         <eP1 :list="data.xsql"></eP1>
         <div class="t_1"></div>
         <div class="t_2">
@@ -16,7 +21,12 @@
         </div>
       </div>
       <div class="flex1" style="margin-top: 30px">
-        <div class="yd_title left_2"></div>
+        <div class="yd_title left_2">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
         <div class="selectLint">
           <div class="selectBox">
             <el-select
@@ -54,7 +64,12 @@
     </div>
     <div class="displayFlex center_bg">
       <div class="flex1">
-        <div class="yd_title center_1"></div>
+        <div class="yd_title center_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
         <div class="school">
           <div class="schoolaBox">
             <div class="schoola">
@@ -151,7 +166,7 @@
               :key="index"
               class="fundingContent"
             >
-              <span class="spot"  >{{ item.zzxm }}</span>
+              <span class="spot">{{ item.zzxm }}</span>
               <span class="spot">{{ item.zzsl }}</span>
               <span class="spot">{{ item.zzje }}</span>
             </div>
@@ -161,7 +176,12 @@
     </div>
     <div class="displayFlex right_bg">
       <div class="flex1">
-        <div class="yd_title right_1"></div>
+        <div class="yd_title right_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
         <div class="czr-sl">
           <div class="historyimg historyimg1">
             <span>覆盖医疗机构数量</span>
@@ -845,7 +865,7 @@ onMounted(() => {
   width: 98%;
   height: 42px;
   position: relative;
-
+  overflow: hidden;
   .text {
     display: flex;
     position: absolute;
@@ -857,6 +877,111 @@ onMounted(() => {
     right: 5px;
     top: 3px;
   }
+  /* 利用伪元素和两个i元素产生4条线 */
+  .animate-border {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 1px;
+    }
+    i {
+      position: absolute;
+      display: inline-block;
+      height: 100%;
+      width: 1px;
+    }
+    &::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;
+    }
+  }
+}
+@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%;
+  }
 }
 
 .mechanism {
diff --git a/src/view/work.vue b/src/view/work.vue
index 9615930..efd21fe 100644
--- a/src/view/work.vue
+++ b/src/view/work.vue
@@ -2,7 +2,12 @@
   <div class="module">
     <div class="displayFlex left_bg">
       <div class="flex1">
-        <div class="yd_title left_1"></div>
+        <div class="yd_title left_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
         <div class="choose">
           <div
             :class="jz[0].choose == '1' ? 'choose_1' : 'choose_2'"
@@ -49,13 +54,23 @@
     </div>
     <div class="displayFlex center_bg">
       <div class="flex1">
-        <div class="yd_title center_0"></div>
+        <div class="yd_title center_0">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
         <div class="school">
           <ePjz :list="data.totalAssistance"></ePjz>
         </div>
       </div>
       <div class="flex1">
-        <div class="yd_title center_1"></div>
+        <div class="yd_title center_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
         <eP3 :list="data.lifeAssistance1"></eP3>
       </div>
       <div class="flex1">
@@ -90,7 +105,12 @@
     </div>
     <div class="displayFlex right_bg">
       <div class="flex1">
-        <div class="yd_title right_1"></div>
+        <div class="yd_title right_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
         <div class="choose">
           <div
             :class="jz[2].choose == '1' ? 'choose_1' : 'choose_2'"
@@ -116,7 +136,12 @@
         <eP5 v-if="jz[2].choose == '2'" :list="data.difficultSoldiers"></eP5> -->
       </div>
       <div class="flex1">
-        <div class="yd_title right_2"></div>
+        <div class="yd_title right_2">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
         <div class="dyh">
           <div
             class="czr-bj"
@@ -723,7 +748,7 @@ onMounted(() => {
   width: 98%;
   height: 42px;
   position: relative;
-
+  overflow: hidden;
   .text {
     display: flex;
     position: absolute;
@@ -734,6 +759,110 @@ onMounted(() => {
     position: absolute;
     right: 5px;
     top: 3px;
+  } /* 利用伪元素和两个i元素产生4条线 */
+  .animate-border {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 1px;
+    }
+    i {
+      position: absolute;
+      display: inline-block;
+      height: 100%;
+      width: 1px;
+    }
+    &::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;
+    }
+  }
+}
+@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%;
   }
 }
 

From 496ec35b6973af09f9cc68f34bd1161f3ac18e79 Mon Sep 17 00:00:00 2001
From: duanxiaohai <1812246227@qq.com>
Date: Tue, 4 Jun 2024 09:26:53 +0800
Subject: [PATCH 3/3] gx

---
 src/view/hygiene.vue | 160 +++++++++++++++++++++++++++--
 src/view/sy.vue      |  42 ++++++--
 src/view/yl.vue      | 232 +++++++++++++++++++++++++++++++------------
 3 files changed, 358 insertions(+), 76 deletions(-)

diff --git a/src/view/hygiene.vue b/src/view/hygiene.vue
index 28e5ae7..d7db145 100644
--- a/src/view/hygiene.vue
+++ b/src/view/hygiene.vue
@@ -3,6 +3,10 @@
     <div class="displayFlex left_bg">
       <div class="flex1" style="flex: 0.5">
         <div class="yd_title left_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
           <span class="text">
             <img
               v-if="leftchoose.first == '1'"
@@ -43,7 +47,12 @@
       </div>
 
       <div class="flex1" style="margin-top: 10px">
-        <div class="yd_title left_3"></div>
+        <div class="yd_title left_3">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
+        </div>
         <div class="sm_title_1"></div>
         <tnb :list="data.lmb.tnbrs" :year="data.lmb.year"></tnb>
         <div class="sm_title_2"></div>
@@ -52,7 +61,12 @@
     </div>
     <div class="displayFlex center_bg">
       <div class="flex1">
-        <div class="yd_title center_2"></div>
+        <div class="yd_title center_2">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
+        </div>
         <div class="center_top">
           <div class="item">
             <img src="@/assets/images/hygiene/mjzrc.png" class="left" />
@@ -73,7 +87,12 @@
         </div>
       </div>
       <div class="flex1" style="flex: 0.3">
-        <div class="yd_title center_1"></div>
+        <div class="yd_title center_1">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
+        </div>
         <div class="minTop">
           <div class="minTopPart">
             <div class="history2">
@@ -101,7 +120,12 @@
         </div>
       </div>
       <div class="flex1" style="margin-top: 20px">
-        <div class="yd_title familyPlanning"></div>
+        <div class="yd_title familyPlanning">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
+        </div>
         <!-- <div style="width: 100%; "> -->
         <eP5 :list="data.jsbgl"></eP5>
         <!-- </div> -->
@@ -109,7 +133,12 @@
     </div>
     <div class="displayFlex right_bg">
       <div class="flex1" style="flex: 0.9">
-        <div class="yd_title mechanism"></div>
+        <div class="yd_title mechanism">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
+        </div>
         <div class="history">
           <div class="history1">
             <div class="va">{{ data.fyglrs.ycfrc }}</div>
@@ -124,11 +153,21 @@
         </div>
       </div>
       <div class="flex1" style="flex: 1.1">
-        <div class="yd_title service"></div>
+        <div class="yd_title service">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
+        </div>
         <eP7 :list="data.jktj.jktjrs" :year="data.jktj.year"></eP7>
       </div>
       <div class="flex1">
-        <div class="yd_title last"></div>
+        <div class="yd_title last">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
+        </div>
 
         <div
           class="table"
@@ -268,6 +307,73 @@ const getData = async () => {
   width: 94%;
   height: 42px;
   position: relative;
+  overflow: hidden;
+  /* 利用伪元素和两个i元素产生4条线 */
+  .animate-border {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 1px;
+    }
+    i {
+      position: absolute;
+      display: inline-block;
+      height: 100%;
+      width: 1px;
+    }
+    &::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;
@@ -287,6 +393,46 @@ const getData = async () => {
   }
 }
 
+@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%;
+  }
+}
+
 .familyPlanning {
   width: 96%;
   background-image: url(@/assets/images/hygiene/new_zcs.png);
diff --git a/src/view/sy.vue b/src/view/sy.vue
index 6a33cec..ca87528 100644
--- a/src/view/sy.vue
+++ b/src/view/sy.vue
@@ -117,7 +117,12 @@
         </div>
       </div>
       <div class="flex1" style="margin-top: 10px">
-        <div class="yd_title left_2"></div>
+        <div class="yd_title left_2">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
+        </div>
         <div class="left_2_top">
           <div class="item school">
             <div class="shang">学校</div>
@@ -165,7 +170,12 @@
         </div>
       </div>
       <div class="flex1" style="margin-top: 10px">
-        <div class="yd_title left_3"></div>
+        <div class="yd_title left_3">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
+        </div>
         <div class="left_3_1">
           <div
             class="left_3_1_item"
@@ -298,7 +308,12 @@
     </div>
     <div class="displayFlex right_bg">
       <div class="flex1">
-        <div class="yd_title mechanism"></div>
+        <div class="yd_title mechanism">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
+        </div>
         <div class="ylws">
           <div
             class="ylws_item"
@@ -311,7 +326,12 @@
         </div>
       </div>
       <div class="flex1" style="margin-top: 10px">
-        <div class="yd_title service"></div>
+        <div class="yd_title service">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
+        </div>
         <div class="whsy">
           <div
             class="whsy_item"
@@ -326,7 +346,12 @@
         </div>
       </div>
       <div class="flex1" style="margin-top: 10px">
-        <div class="yd_title last"></div>
+        <div class="yd_title last">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
+        </div>
         <div class="tysy">
           <div
             class="tysy_item"
@@ -343,7 +368,12 @@
         </div>
       </div>
       <div class="flex1" style="margin-top: 10px">
-        <div class="yd_title last_1"></div>
+        <div class="yd_title last_1">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
+        </div>
         <!-- <table class="table">
           <tbody>
             <tr v-for="(item, index) in jtsyList" :key="index" style="display: flex; box-sizing: border-box">
diff --git a/src/view/yl.vue b/src/view/yl.vue
index 7f18ee5..92f0e82 100644
--- a/src/view/yl.vue
+++ b/src/view/yl.vue
@@ -3,6 +3,10 @@
     <div class="displayFlex left_bg">
       <div class="flex1">
         <div class="yd_title left_1">
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
           <span class="text">
             <img
               v-if="leftchoose.first == '1'"
@@ -44,11 +48,12 @@
           :year="data.leftTopYear"
         ></ePie2>
       </div>
-      <div
-        class="flex1"
-        style="margin-top: 10px"
-      >
+      <div class="flex1" style="margin-top: 10px">
         <div class="yd_title left_2">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
           <span class="text">
             <img
               v-if="leftchoose.second == '1'"
@@ -89,11 +94,12 @@
           :year="data.leftCenterYear"
         />
       </div>
-      <div
-        class="flex1"
-        style="margin-top: 10px"
-      >
+      <div class="flex1" style="margin-top: 10px">
         <div class="yd_title left_3">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
           <span class="text">
             <img
               v-if="leftchoose.third == '1'"
@@ -137,7 +143,12 @@
     </div>
     <div class="displayFlex center_bg">
       <div class="flex1">
-        <div class="yd_title center_1"></div>
+        <div class="yd_title center_1">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
+        </div>
         <div class="minTopPart">
           <div class="mtpImg1"></div>
           <div class="mtpImg2"></div>
@@ -148,7 +159,12 @@
         <ePie3d :list="data.rkgk"></ePie3d>
       </div>
       <div class="flex1">
-        <div class="yd_title familyPlanning"></div>
+        <div class="yd_title familyPlanning">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
+        </div>
         <ylJHSY
           :list1="data.centerBottom1"
           :list2="data.centerBottom2"
@@ -158,21 +174,19 @@
     </div>
     <div class="displayFlex right_bg">
       <div class="flex1">
-        <div class="yd_title mechanism"></div>
+        <div class="yd_title mechanism">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
+        </div>
         <div class="history">
           <div class="history1">
             <div>
               <span>{{ data.yljgzlzx.yljg }}<span class="unit">个</span></span>
             </div>
-            <img
-              src="@/assets/YLimg/ylimg11.png"
-              alt=""
-            />
-            <img
-              class="historyimg"
-              src="@/assets/YLimg/ylimg5.png"
-              alt=""
-            />
+            <img src="@/assets/YLimg/ylimg11.png" alt="" />
+            <img class="historyimg" src="@/assets/YLimg/ylimg5.png" alt="" />
           </div>
           <!-- <div class="history1">
             <div>
@@ -185,42 +199,28 @@
             <div>
               <span>{{ data.yljgzlzx.zlzx }}<span class="unit">个</span></span>
             </div>
-            <img
-              src="@/assets/YLimg/ylimg12.png"
-              alt=""
-            />
-            <img
-              class="historyimg"
-              src="@/assets/YLimg/ylimg10.png"
-              alt=""
-            />
+            <img src="@/assets/YLimg/ylimg12.png" alt="" />
+            <img class="historyimg" src="@/assets/YLimg/ylimg10.png" alt="" />
           </div>
         </div>
       </div>
       <div class="flex1">
-        <div class="yd_title service"></div>
+        <div class="yd_title service">
+          <div class="animate-border">
+          <i></i>
+          <i></i>
+        </div>
+        </div>
         <div class="serviceBox">
           <div class="serviceTop">
             <div class="visit">
-              <img
-                class="serviceimg"
-                src="@/assets/YLimg/ylimg8.png"
-                alt=""
-              />
+              <img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
               <ylSMFW></ylSMFW>
             </div>
             <div class="medicalService">
-              <img
-                class="serviceimg"
-                src="@/assets/YLimg/ylimg9.png"
-                alt=""
-              />
+              <img class="serviceimg" src="@/assets/YLimg/ylimg9.png" alt="" />
               <div class="medicalServiceTop">
-                <img
-                  class="ylimg"
-                  src="@/assets/YLimg/ylimg1.png"
-                  alt=""
-                />
+                <img class="ylimg" src="@/assets/YLimg/ylimg1.png" alt="" />
                 <span>36,234</span>
               </div>
             </div>
@@ -238,7 +238,7 @@
         <ylXZZC
           :list1="data.zccs1"
           :list2="data.zccs2"
-          @village='chooseVillage'
+          @village="chooseVillage"
         ></ylXZZC>
       </div>
     </div>
@@ -292,39 +292,39 @@ const tableType = reactive({
     {
       label: "照料中心",
       property: "sdailycarecentername",
-      width: '160'
+      width: "160",
     },
     {
       label: "老人名称",
       property: "scustomername",
-      width: '120'
+      width: "120",
     },
     {
       label: "就餐/送餐订单",
       property: "iordertype",
-      width: '140',
+      width: "140",
       type: "slot",
     },
     {
       label: "早、中、晚餐",
       property: "itimetype",
-      width: '140',
+      width: "140",
       type: "slot",
     },
     {
       label: "菜品信息",
       property: "dishesmealnames",
-      width: '160',
+      width: "160",
     },
     {
       label: "订单金额",
       property: "totalprice",
-      width: '120'
+      width: "120",
     },
     {
       label: "实际支付金额",
       property: "actualprice",
-      width: '120'
+      width: "120",
     },
     {
       label: "订单结束时间",
@@ -343,30 +343,30 @@ const change = (name, index) => {
   leftchoose.value[name] = index;
 };
 const chooseVillage = (village) => {
-  tableType.title = village
-  getTownDetail()
-}
+  tableType.title = village;
+  getTownDetail();
+};
 const close = () => {
   dialogShow.value = false;
 };
 const handlePagination = (current) => {
-  pagination.currentPage = current
-  getTownDetail()
+  pagination.currentPage = current;
+  getTownDetail();
 };
 const getTownDetail = () => {
   let params = {
     scasecadebareaname: tableType.title,
     page: pagination.currentPage,
-    size: pagination.pageSize
-  }
+    size: pagination.pageSize,
+  };
   http.get("/api/ggfwyth/zcxxList", params).then((res) => {
     if (res.code == 200) {
-      pagination.total = res.count
-      tableType.data = res.data
+      pagination.total = res.count;
+      tableType.data = res.data;
       dialogShow.value = true;
     }
   });
-}
+};
 const data = reactive({
   leftTop1: [],
   leftTop2: [],
@@ -499,6 +499,73 @@ const getData = async () => {
   width: 94%;
   height: 42px;
   position: relative;
+  overflow: hidden;
+  /* 利用伪元素和两个i元素产生4条线 */
+  .animate-border {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 1px;
+    }
+    i {
+      position: absolute;
+      display: inline-block;
+      height: 100%;
+      width: 1px;
+    }
+    &::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;
@@ -519,6 +586,45 @@ const getData = async () => {
     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%;
+  }
+}
 
 .familyPlanning {
   background-image: url(@/assets/images/yl/new_jhsy.png);