xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of git.zdool.com:xs/ggfwjsc

This commit is contained in:
lnn19986213 2024-06-04 09:45:52 +08:00
parent 01d5ba10e9 02662c734d
commit 4658e61154
6 changed files with 628 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/view/echarts_work/eP1.vue
View File

@ -302,7 +302,7 @@ onBeforeMount(() => {
setTimeout(() => { setTimeout(() => {
data.list = props.list; data.list = props.list;
setChart1(); setChart1();
// console.log(data.list, data.list1, data.list2, "教育"); console.log(data.list, "教育");
getOption(); getOption();
setChart(); setChart();
}, 600); }, 600);

137
src/view/education.vue
View File

@ -2,7 +2,12 @@
<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>
<eP1 :list="data.xsql"></eP1> <eP1 :list="data.xsql"></eP1>
<div class="t_1"></div> <div class="t_1"></div>
<div class="t_2"> <div class="t_2">
@ -16,7 +21,12 @@
</div> </div>
</div> </div>
<div class="flex1" style="margin-top: 30px"> <div class="flex1" style="margin-top: 30px">
<div class="yd_title left_2"></div> <div class="yd_title left_2">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="selectLint"> <div class="selectLint">
<div class="selectBox"> <div class="selectBox">
<el-select <el-select
@ -54,7 +64,12 @@
</div> </div>
<div class="displayFlex center_bg"> <div class="displayFlex center_bg">
<div class="flex1"> <div class="flex1">
<div class="yd_title center_1"></div> <div class="yd_title center_1">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="school"> <div class="school">
<div class="schoolaBox"> <div class="schoolaBox">
<div class="schoola"> <div class="schoola">
@ -151,7 +166,7 @@
:key="index" :key="index"
class="fundingContent" class="fundingContent"
> >
<span class="spot" >{{ item.zzxm }}</span> <span class="spot">{{ item.zzxm }}</span>
<span class="spot">{{ item.zzsl }}</span> <span class="spot">{{ item.zzsl }}</span>
<span class="spot">{{ item.zzje }}</span> <span class="spot">{{ item.zzje }}</span>
</div> </div>
@ -161,7 +176,12 @@
</div> </div>
<div class="displayFlex right_bg"> <div class="displayFlex right_bg">
<div class="flex1"> <div class="flex1">
<div class="yd_title right_1"></div> <div class="yd_title right_1">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="czr-sl"> <div class="czr-sl">
<div class="historyimg historyimg1"> <div class="historyimg historyimg1">
<span>覆盖医疗机构数量</span> <span>覆盖医疗机构数量</span>
@ -845,7 +865,7 @@ onMounted(() => {
width: 98%; width: 98%;
height: 42px; height: 42px;
position: relative; position: relative;
overflow: hidden;
.text { .text {
display: flex; display: flex;
position: absolute; position: absolute;
@ -857,6 +877,111 @@ onMounted(() => {
right: 5px; right: 5px;
top: 3px; 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 { .mechanism {

160
src/view/hygiene.vue
View File

@ -3,6 +3,10 @@
<div class="displayFlex left_bg"> <div class="displayFlex left_bg">
<div class="flex1" style="flex: 0.5"> <div class="flex1" style="flex: 0.5">
<div class="yd_title left_1"> <div class="yd_title left_1">
<div class="animate-border">
<i></i>
<i></i>
</div>
<span class="text"> <span class="text">
<img <img
v-if="leftchoose.first == '1'" v-if="leftchoose.first == '1'"
@ -43,7 +47,12 @@
</div> </div>
<div class="flex1" style="margin-top: 10px"> <div class="flex1" style="margin-top: 10px">
<div class="yd_title left_3"></div> <div class="yd_title left_3">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="sm_title_1"></div> <div class="sm_title_1"></div>
<tnb :list="data.lmb.tnbrs" :year="data.lmb.year"></tnb> <tnb :list="data.lmb.tnbrs" :year="data.lmb.year"></tnb>
<div class="sm_title_2"></div> <div class="sm_title_2"></div>
@ -52,7 +61,12 @@
</div> </div>
<div class="displayFlex center_bg"> <div class="displayFlex center_bg">
<div class="flex1"> <div class="flex1">
<div class="yd_title center_2"></div> <div class="yd_title center_2">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="center_top"> <div class="center_top">
<div class="item"> <div class="item">
<img src="@/assets/images/hygiene/mjzrc.png" class="left" /> <img src="@/assets/images/hygiene/mjzrc.png" class="left" />
@ -73,7 +87,12 @@
</div> </div>
</div> </div>
<div class="flex1" style="flex: 0.3"> <div class="flex1" style="flex: 0.3">
<div class="yd_title center_1"></div> <div class="yd_title center_1">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="minTop"> <div class="minTop">
<div class="minTopPart"> <div class="minTopPart">
<div class="history2"> <div class="history2">
@ -101,7 +120,12 @@
</div> </div>
</div> </div>
<div class="flex1" style="margin-top: 20px"> <div class="flex1" style="margin-top: 20px">
<div class="yd_title familyPlanning"></div> <div class="yd_title familyPlanning">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<!-- <div style="width: 100%; "> --> <!-- <div style="width: 100%; "> -->
<eP5 :list="data.jsbgl"></eP5> <eP5 :list="data.jsbgl"></eP5>
<!-- </div> --> <!-- </div> -->
@ -109,7 +133,12 @@
</div> </div>
<div class="displayFlex right_bg"> <div class="displayFlex right_bg">
<div class="flex1" style="flex: 0.9"> <div class="flex1" style="flex: 0.9">
<div class="yd_title mechanism"></div> <div class="yd_title mechanism">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="history"> <div class="history">
<div class="history1"> <div class="history1">
<div class="va">{{ data.fyglrs.ycfrc }}</div> <div class="va">{{ data.fyglrs.ycfrc }}</div>
@ -124,11 +153,21 @@
</div> </div>
</div> </div>
<div class="flex1" style="flex: 1.1"> <div class="flex1" style="flex: 1.1">
<div class="yd_title service"></div> <div class="yd_title service">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<eP7 :list="data.jktj.jktjrs" :year="data.jktj.year"></eP7> <eP7 :list="data.jktj.jktjrs" :year="data.jktj.year"></eP7>
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title last"></div> <div class="yd_title last">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div <div
class="table" class="table"
@ -268,6 +307,73 @@ const getData = 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;
@ -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 { .familyPlanning {
width: 96%; width: 96%;
background-image: url(@/assets/images/hygiene/new_zcs.png); background-image: url(@/assets/images/hygiene/new_zcs.png);

42
src/view/sy.vue
View File

@ -117,7 +117,12 @@
</div> </div>
</div> </div>
<div class="flex1" style="margin-top: 10px"> <div class="flex1" style="margin-top: 10px">
<div class="yd_title left_2"></div> <div class="yd_title left_2">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="left_2_top"> <div class="left_2_top">
<div class="item school"> <div class="item school">
<div class="shang">学校</div> <div class="shang">学校</div>
@ -165,7 +170,12 @@
</div> </div>
</div> </div>
<div class="flex1" style="margin-top: 10px"> <div class="flex1" style="margin-top: 10px">
<div class="yd_title left_3"></div> <div class="yd_title left_3">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="left_3_1"> <div class="left_3_1">
<div <div
class="left_3_1_item" class="left_3_1_item"
@ -298,7 +308,12 @@
</div> </div>
<div class="displayFlex right_bg"> <div class="displayFlex right_bg">
<div class="flex1"> <div class="flex1">
<div class="yd_title mechanism"></div> <div class="yd_title mechanism">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="ylws"> <div class="ylws">
<div <div
class="ylws_item" class="ylws_item"
@ -311,7 +326,12 @@
</div> </div>
</div> </div>
<div class="flex1" style="margin-top: 10px"> <div class="flex1" style="margin-top: 10px">
<div class="yd_title service"></div> <div class="yd_title service">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="whsy"> <div class="whsy">
<div <div
class="whsy_item" class="whsy_item"
@ -326,7 +346,12 @@
</div> </div>
</div> </div>
<div class="flex1" style="margin-top: 10px"> <div class="flex1" style="margin-top: 10px">
<div class="yd_title last"></div> <div class="yd_title last">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="tysy"> <div class="tysy">
<div <div
class="tysy_item" class="tysy_item"
@ -343,7 +368,12 @@
</div> </div>
</div> </div>
<div class="flex1" style="margin-top: 10px"> <div class="flex1" style="margin-top: 10px">
<div class="yd_title last_1"></div> <div class="yd_title last_1">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<!-- <table class="table"> <!-- <table class="table">
<tbody> <tbody>
<tr v-for="(item, index) in jtsyList" :key="index" style="display: flex; box-sizing: border-box"> <tr v-for="(item, index) in jtsyList" :key="index" style="display: flex; box-sizing: border-box">

148
src/view/work.vue
View File

@ -2,7 +2,12 @@
<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="choose"> <div class="choose">
<div <div
:class="jz[0].choose == '1' ? 'choose_1' : 'choose_2'" :class="jz[0].choose == '1' ? 'choose_1' : 'choose_2'"
@ -49,13 +54,23 @@
</div> </div>
<div class="displayFlex center_bg"> <div class="displayFlex center_bg">
<div class="flex1"> <div class="flex1">
<div class="yd_title center_0"></div> <div class="yd_title center_0">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="school"> <div class="school">
<ePjz :list="data.totalAssistance"></ePjz> <ePjz :list="data.totalAssistance"></ePjz>
</div> </div>
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title center_1"></div> <div class="yd_title center_1">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<eP3 :list="data.lifeAssistance1"></eP3> <eP3 :list="data.lifeAssistance1"></eP3>
</div> </div>
<div class="flex1"> <div class="flex1">
@ -90,7 +105,12 @@
</div> </div>
<div class="displayFlex right_bg"> <div class="displayFlex right_bg">
<div class="flex1"> <div class="flex1">
<div class="yd_title right_1"></div> <div class="yd_title right_1">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="choose"> <div class="choose">
<div <div
:class="jz[2].choose == '1' ? 'choose_1' : 'choose_2'" :class="jz[2].choose == '1' ? 'choose_1' : 'choose_2'"
@ -116,7 +136,12 @@
<eP5 v-if="jz[2].choose == '2'" :list="data.difficultSoldiers"></eP5> --> <eP5 v-if="jz[2].choose == '2'" :list="data.difficultSoldiers"></eP5> -->
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title right_2"></div> <div class="yd_title right_2">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="dyh"> <div class="dyh">
<div <div
class="czr-bj" class="czr-bj"
@ -181,8 +206,8 @@ const jz = ref([
const jzChange = (index, value) => { const jzChange = (index, value) => {
jz.value[index].choose = value; jz.value[index].choose = value;
if (index === 0) { if (index === 0) {
data.list2 = value === "1" ? data.education : data.medical; data.list2 = value == "1" ? data.education : data.medical;
// console.log(111, jz.value[index].choose); // console.log(value, data.education, data.medical);
} else if (index === 1) { } else if (index === 1) {
data.list = value === "1" ? data.housing : data.temporary; data.list = value === "1" ? data.housing : data.temporary;
} else if (index === 2) { } else if (index === 2) {
@ -214,7 +239,7 @@ const data = reactive({
{ {
nf: "2019", //救助年份 nf: "2019", //救助年份
jzrs: "4202", //救助人数 jzrs: "4202", //救助人数
jzje: "1523", //救助金额 jzje: "1200", //救助金额
}, },
], ],
year: ["2019"], year: ["2019"],
@ -324,7 +349,6 @@ const getData = async () => {
data.medical.data = res.data.specialAssistance.medical.data; data.medical.data = res.data.specialAssistance.medical.data;
data.medical.year = res.data.specialAssistance.medical.year; data.medical.year = res.data.specialAssistance.medical.year;
data.list2 = data.medical;
// 住房&临时救助 // 住房&临时救助
data.housing.data = res.data.specialAssistance.housing.data; data.housing.data = res.data.specialAssistance.housing.data;
data.housing.year = res.data.specialAssistance.housing.year; data.housing.year = res.data.specialAssistance.housing.year;
@ -723,7 +747,7 @@ onMounted(() => {
width: 98%; width: 98%;
height: 42px; height: 42px;
position: relative; position: relative;
overflow: hidden;
.text { .text {
display: flex; display: flex;
position: absolute; position: absolute;
@ -734,6 +758,110 @@ onMounted(() => {
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 3px; 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%;
} }
} }

232
src/view/yl.vue
View File

@ -3,6 +3,10 @@
<div class="displayFlex left_bg"> <div class="displayFlex left_bg">
<div class="flex1"> <div class="flex1">
<div class="yd_title left_1"> <div class="yd_title left_1">
<div class="animate-border">
<i></i>
<i></i>
</div>
<span class="text"> <span class="text">
<img <img
v-if="leftchoose.first == '1'" v-if="leftchoose.first == '1'"
@ -44,11 +48,12 @@
:year="data.leftTopYear" :year="data.leftTopYear"
></ePie2> ></ePie2>
</div> </div>
<div <div class="flex1" style="margin-top: 10px">
class="flex1"
style="margin-top: 10px"
>
<div class="yd_title left_2"> <div class="yd_title left_2">
<div class="animate-border">
<i></i>
<i></i>
</div>
<span class="text"> <span class="text">
<img <img
v-if="leftchoose.second == '1'" v-if="leftchoose.second == '1'"
@ -89,11 +94,12 @@
:year="data.leftCenterYear" :year="data.leftCenterYear"
/> />
</div> </div>
<div <div class="flex1" style="margin-top: 10px">
class="flex1"
style="margin-top: 10px"
>
<div class="yd_title left_3"> <div class="yd_title left_3">
<div class="animate-border">
<i></i>
<i></i>
</div>
<span class="text"> <span class="text">
<img <img
v-if="leftchoose.third == '1'" v-if="leftchoose.third == '1'"
@ -137,7 +143,12 @@
</div> </div>
<div class="displayFlex center_bg"> <div class="displayFlex center_bg">
<div class="flex1"> <div class="flex1">
<div class="yd_title center_1"></div> <div class="yd_title center_1">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="minTopPart"> <div class="minTopPart">
<div class="mtpImg1"></div> <div class="mtpImg1"></div>
<div class="mtpImg2"></div> <div class="mtpImg2"></div>
@ -148,7 +159,12 @@
<ePie3d :list="data.rkgk"></ePie3d> <ePie3d :list="data.rkgk"></ePie3d>
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title familyPlanning"></div> <div class="yd_title familyPlanning">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<ylJHSY <ylJHSY
:list1="data.centerBottom1" :list1="data.centerBottom1"
:list2="data.centerBottom2" :list2="data.centerBottom2"
@ -158,21 +174,19 @@
</div> </div>
<div class="displayFlex right_bg"> <div class="displayFlex right_bg">
<div class="flex1"> <div class="flex1">
<div class="yd_title mechanism"></div> <div class="yd_title mechanism">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="history"> <div class="history">
<div class="history1"> <div class="history1">
<div> <div>
<span>{{ data.yljgzlzx.yljg }}<span class="unit">个</span></span> <span>{{ data.yljgzlzx.yljg }}<span class="unit">个</span></span>
</div> </div>
<img <img src="@/assets/YLimg/ylimg11.png" alt="" />
src="@/assets/YLimg/ylimg11.png" <img class="historyimg" src="@/assets/YLimg/ylimg5.png" alt="" />
alt=""
/>
<img
class="historyimg"
src="@/assets/YLimg/ylimg5.png"
alt=""
/>
</div> </div>
<!-- <div class="history1"> <!-- <div class="history1">
<div> <div>
@ -185,42 +199,28 @@
<div> <div>
<span>{{ data.yljgzlzx.zlzx }}<span class="unit">个</span></span> <span>{{ data.yljgzlzx.zlzx }}<span class="unit">个</span></span>
</div> </div>
<img <img src="@/assets/YLimg/ylimg12.png" alt="" />
src="@/assets/YLimg/ylimg12.png" <img class="historyimg" src="@/assets/YLimg/ylimg10.png" alt="" />
alt=""
/>
<img
class="historyimg"
src="@/assets/YLimg/ylimg10.png"
alt=""
/>
</div> </div>
</div> </div>
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title service"></div> <div class="yd_title service">
<div class="animate-border">
<i></i>
<i></i>
</div>
</div>
<div class="serviceBox"> <div class="serviceBox">
<div class="serviceTop"> <div class="serviceTop">
<div class="visit"> <div class="visit">
<img <img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
class="serviceimg"
src="@/assets/YLimg/ylimg8.png"
alt=""
/>
<ylSMFW></ylSMFW> <ylSMFW></ylSMFW>
</div> </div>
<div class="medicalService"> <div class="medicalService">
<img <img class="serviceimg" src="@/assets/YLimg/ylimg9.png" alt="" />
class="serviceimg"
src="@/assets/YLimg/ylimg9.png"
alt=""
/>
<div class="medicalServiceTop"> <div class="medicalServiceTop">
<img <img class="ylimg" src="@/assets/YLimg/ylimg1.png" alt="" />
class="ylimg"
src="@/assets/YLimg/ylimg1.png"
alt=""
/>
<span>36,234</span> <span>36,234</span>
</div> </div>
</div> </div>
@ -238,7 +238,7 @@
<ylXZZC <ylXZZC
:list1="data.zccs1" :list1="data.zccs1"
:list2="data.zccs2" :list2="data.zccs2"
@village='chooseVillage' @village="chooseVillage"
></ylXZZC> ></ylXZZC>
</div> </div>
</div> </div>
@ -292,39 +292,39 @@ const tableType = reactive({
{ {
label: "照料中心", label: "照料中心",
property: "sdailycarecentername", property: "sdailycarecentername",
width: '160' width: "160",
}, },
{ {
label: "老人名称", label: "老人名称",
property: "scustomername", property: "scustomername",
width: '120' width: "120",
}, },
{ {
label: "就餐/送餐订单", label: "就餐/送餐订单",
property: "iordertype", property: "iordertype",
width: '140', width: "140",
type: "slot", type: "slot",
}, },
{ {
label: "早、中、晚餐", label: "早、中、晚餐",
property: "itimetype", property: "itimetype",
width: '140', width: "140",
type: "slot", type: "slot",
}, },
{ {
label: "菜品信息", label: "菜品信息",
property: "dishesmealnames", property: "dishesmealnames",
width: '160', width: "160",
}, },
{ {
label: "订单金额", label: "订单金额",
property: "totalprice", property: "totalprice",
width: '120' width: "120",
}, },
{ {
label: "实际支付金额", label: "实际支付金额",
property: "actualprice", property: "actualprice",
width: '120' width: "120",
}, },
{ {
label: "订单结束时间", label: "订单结束时间",
@ -343,30 +343,30 @@ const change = (name, index) => {
leftchoose.value[name] = index; leftchoose.value[name] = index;
}; };
const chooseVillage = (village) => { const chooseVillage = (village) => {
tableType.title = village tableType.title = village;
getTownDetail() getTownDetail();
} };
const close = () => { const close = () => {
dialogShow.value = false; dialogShow.value = false;
}; };
const handlePagination = (current) => { const handlePagination = (current) => {
pagination.currentPage = current pagination.currentPage = current;
getTownDetail() getTownDetail();
}; };
const getTownDetail = () => { const getTownDetail = () => {
let params = { let params = {
scasecadebareaname: tableType.title, scasecadebareaname: tableType.title,
page: pagination.currentPage, page: pagination.currentPage,
size: pagination.pageSize size: pagination.pageSize,
} };
http.get("/api/ggfwyth/zcxxList", params).then((res) => { http.get("/api/ggfwyth/zcxxList", params).then((res) => {
if (res.code == 200) { if (res.code == 200) {
pagination.total = res.count pagination.total = res.count;
tableType.data = res.data tableType.data = res.data;
dialogShow.value = true; dialogShow.value = true;
} }
}); });
} };
const data = reactive({ const data = reactive({
leftTop1: [], leftTop1: [],
leftTop2: [], leftTop2: [],
@ -499,6 +499,73 @@ const getData = 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;
@ -519,6 +586,45 @@ const getData = 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%;
}
}
.familyPlanning { .familyPlanning {
background-image: url(@/assets/images/yl/new_jhsy.png); background-image: url(@/assets/images/yl/new_jhsy.png);