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="module">
|
||||||
<div class="displayFlex left_bg">
|
<div class="displayFlex left_bg">
|
||||||
<div class="flex1">
|
<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="left_1_bg">
|
||||||
<div class="item yl_1">
|
<div class="item yl_1">
|
||||||
<div class="item_title">
|
<div class="item_title">
|
||||||
|
@ -331,6 +337,7 @@
|
||||||
{{ item.value }}<span>{{ item.dw ? item.dw : "" }}</span>
|
{{ item.value }}<span>{{ item.dw ? item.dw : "" }}</span>
|
||||||
</div>
|
</div>
|
||||||
<img :src="item.img" />
|
<img :src="item.img" />
|
||||||
|
<img src="../assets/images/sy/tyBon.png" style="margin-top: -60px;">
|
||||||
<div class="name">{{ item.name }}</div>
|
<div class="name">{{ item.name }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -467,11 +474,11 @@ import ePie2 from "./echarts_sy/pie2.vue";
|
||||||
import zwfw1 from "./echarts_sy/zwfw1.vue";
|
import zwfw1 from "./echarts_sy/zwfw1.vue";
|
||||||
import zwfw2 from "./echarts_sy/zwfw2.vue";
|
import zwfw2 from "./echarts_sy/zwfw2.vue";
|
||||||
import zwfw3 from "./echarts_sy/zwfw3.vue";
|
import zwfw3 from "./echarts_sy/zwfw3.vue";
|
||||||
import footerball from "../assets/images/sy/footerball.png";
|
import footerball from "../assets/images/sy/足球.gif";
|
||||||
import baskerball from "../assets/images/sy/baskerball.png";
|
import baskerball from "../assets/images/sy/篮球.gif";
|
||||||
import badminton from "../assets/images/sy/badminton.png";
|
import badminton from "../assets/images/sy/羽毛球.gif";
|
||||||
import running from "../assets/images/sy/running.png";
|
import running from "../assets/images/sy/人行道.gif";
|
||||||
import tableTennis from "../assets/images/sy/tableTennis.png";
|
import tableTennis from "../assets/images/sy/乒乓.gif";
|
||||||
|
|
||||||
import ggjtimg from "../assets/images/sy/ggjt.png";
|
import ggjtimg from "../assets/images/sy/ggjt.png";
|
||||||
import ggjtimg1 from "../assets/images/sy/ggjt1.png";
|
import ggjtimg1 from "../assets/images/sy/ggjt1.png";
|
||||||
|
@ -1240,6 +1247,73 @@ onBeforeMount(async () => {
|
||||||
width: 94%;
|
width: 94%;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
position: relative;
|
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 {
|
.text {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -1259,6 +1333,46 @@ onBeforeMount(async () => {
|
||||||
cursor: pointer;
|
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 {
|
.mechanism {
|
||||||
background-image: url(@/assets/images/sy/new_ylws.png);
|
background-image: url(@/assets/images/sy/new_ylws.png);
|
||||||
|
|
Loading…
Reference in New Issue