更新

src/view/sy.vue

@@ -2,7 +2,13 @@
   <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="left_1_bg">
           <div class="item yl_1">
             <div class="item_title">
@@ -331,6 +337,7 @@
               {{ item.value }}<span>{{ item.dw ? item.dw : "" }}</span>
             </div>
             <img :src="item.img" />
+            <img src="../assets/images/sy/tyBon.png" style="margin-top: -60px;">
             <div class="name">{{ item.name }}</div>
           </div>
         </div>
@@ -467,11 +474,11 @@ import ePie2 from "./echarts_sy/pie2.vue";
 import zwfw1 from "./echarts_sy/zwfw1.vue";
 import zwfw2 from "./echarts_sy/zwfw2.vue";
 import zwfw3 from "./echarts_sy/zwfw3.vue";
-import footerball from "../assets/images/sy/footerball.png";
-import baskerball from "../assets/images/sy/baskerball.png";
-import badminton from "../assets/images/sy/badminton.png";
-import running from "../assets/images/sy/running.png";
-import tableTennis from "../assets/images/sy/tableTennis.png";
+import footerball from "../assets/images/sy/足球.gif";
+import baskerball from "../assets/images/sy/篮球.gif";
+import badminton from "../assets/images/sy/羽毛球.gif";
+import running from "../assets/images/sy/人行道.gif";
+import tableTennis from "../assets/images/sy/乒乓.gif";
 
 import ggjtimg from "../assets/images/sy/ggjt.png";
 import ggjtimg1 from "../assets/images/sy/ggjt1.png";
@@ -1240,6 +1247,73 @@ onBeforeMount(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;
@@ -1259,6 +1333,46 @@ onBeforeMount(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%;
+  }
+}
+
 
 .mechanism {
   background-image: url(@/assets/images/sy/new_ylws.png);