-
+
+
@@ -331,6 +337,7 @@
{{ item.value }}{{ item.dw ? item.dw : "" }}
+
{{ item.name }}
@@ -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);