Merge branch 'main' of git.zdool.com:xs/ggfwjsc
This commit is contained in:
commit
352027943a
Binary file not shown.
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
After Width: | Height: | Size: 188 KiB |
Binary file not shown.
After Width: | Height: | Size: 181 KiB |
Binary file not shown.
After Width: | Height: | Size: 233 KiB |
Binary file not shown.
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
After Width: | Height: | Size: 250 KiB |
126
src/view/sy.vue
126
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);
|
||||
|
|
Loading…
Reference in New Issue