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);