覆盖医疗机构数量
@@ -845,7 +865,7 @@ onMounted(() => {
width: 98%;
height: 42px;
position: relative;
-
+ overflow: hidden;
.text {
display: flex;
position: absolute;
@@ -857,6 +877,111 @@ onMounted(() => {
right: 5px;
top: 3px;
}
+ /* 利用伪元素和两个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;
+ }
+ }
+}
+@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 {
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 @@
+
+
+
+
-
+
@@ -73,7 +87,12 @@
-
+
-
+
{{ data.fyglrs.ycfrc }}
@@ -124,11 +153,21 @@
-
+
{
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 @@
-
+
-
+
-
+
-
+
-
+
-
+
{
jz.value[index].choose = value;
if (index === 0) {
- data.list2 = value === "1" ? data.education : data.medical;
- // console.log(111, jz.value[index].choose);
+ data.list2 = value == "1" ? data.education : data.medical;
+ // console.log(value, data.education, data.medical);
} else if (index === 1) {
data.list = value === "1" ? data.housing : data.temporary;
} else if (index === 2) {
@@ -214,7 +239,7 @@ const data = reactive({
{
nf: "2019", //救助年份
jzrs: "4202", //救助人数
- jzje: "1523", //救助金额
+ jzje: "1200", //救助金额
},
],
year: ["2019"],
@@ -324,7 +349,6 @@ const getData = async () => {
data.medical.data = res.data.specialAssistance.medical.data;
data.medical.year = res.data.specialAssistance.medical.year;
- data.list2 = data.medical;
// 住房&临时救助
data.housing.data = res.data.specialAssistance.housing.data;
data.housing.year = res.data.specialAssistance.housing.year;
@@ -723,7 +747,7 @@ onMounted(() => {
width: 98%;
height: 42px;
position: relative;
-
+ overflow: hidden;
.text {
display: flex;
position: absolute;
@@ -734,6 +758,110 @@ onMounted(() => {
position: absolute;
right: 5px;
top: 3px;
+ } /* 利用伪元素和两个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;
+ }
+ }
+}
+@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%;
}
}
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 @@
+
+
+
+
-
+
+
+
+
+
-
+
+
+
+
+
-
+
-
+
-
+
{{ data.yljgzlzx.yljg }}个
-
-
+
+