Merge branch 'main' of git.zdool.com:xs/ggfwjsc
This commit is contained in:
lnn19986213
commit
4658e61154
|
|
@ -302,7 +302,7 @@ onBeforeMount(() => {
|
|||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
setChart1();
|
||||
// console.log(data.list, data.list1, data.list2, "教育");
|
||||
console.log(data.list, "教育");
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,12 @@
|
|||
<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>
|
||||
<eP1 :list="data.xsql"></eP1>
|
||||
<div class="t_1"></div>
|
||||
<div class="t_2">
|
||||
|
|
@ -16,7 +21,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<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="selectBox">
|
||||
<el-select
|
||||
|
|
@ -54,7 +64,12 @@
|
|||
</div>
|
||||
<div class="displayFlex center_bg">
|
||||
<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="schoolaBox">
|
||||
<div class="schoola">
|
||||
|
|
@ -161,7 +176,12 @@
|
|||
</div>
|
||||
<div class="displayFlex right_bg">
|
||||
<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="historyimg historyimg1">
|
||||
<span>覆盖医疗机构数量</span>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@
|
|||
<div class="displayFlex left_bg">
|
||||
<div class="flex1" style="flex: 0.5">
|
||||
<div class="yd_title left_1">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
<span class="text">
|
||||
<img
|
||||
v-if="leftchoose.first == '1'"
|
||||
|
|
@ -43,7 +47,12 @@
|
|||
</div>
|
||||
|
||||
<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>
|
||||
<tnb :list="data.lmb.tnbrs" :year="data.lmb.year"></tnb>
|
||||
<div class="sm_title_2"></div>
|
||||
|
|
@ -52,7 +61,12 @@
|
|||
</div>
|
||||
<div class="displayFlex center_bg">
|
||||
<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="item">
|
||||
<img src="@/assets/images/hygiene/mjzrc.png" class="left" />
|
||||
|
|
@ -73,7 +87,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<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="minTopPart">
|
||||
<div class="history2">
|
||||
|
|
@ -101,7 +120,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<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%; "> -->
|
||||
<eP5 :list="data.jsbgl"></eP5>
|
||||
<!-- </div> -->
|
||||
|
|
@ -109,7 +133,12 @@
|
|||
</div>
|
||||
<div class="displayFlex right_bg">
|
||||
<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="history1">
|
||||
<div class="va">{{ data.fyglrs.ycfrc }}</div>
|
||||
|
|
@ -124,11 +153,21 @@
|
|||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<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
|
||||
class="table"
|
||||
|
|
@ -268,6 +307,73 @@ const getData = 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;
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -117,7 +117,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<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="item school">
|
||||
<div class="shang">学校</div>
|
||||
|
|
@ -165,7 +170,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<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_item"
|
||||
|
|
@ -298,7 +308,12 @@
|
|||
</div>
|
||||
<div class="displayFlex right_bg">
|
||||
<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_item"
|
||||
|
|
@ -311,7 +326,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<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_item"
|
||||
|
|
@ -326,7 +346,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<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_item"
|
||||
|
|
@ -343,7 +368,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in jtsyList" :key="index" style="display: flex; box-sizing: border-box">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,12 @@
|
|||
<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="choose">
|
||||
<div
|
||||
:class="jz[0].choose == '1' ? 'choose_1' : 'choose_2'"
|
||||
|
|
@ -49,13 +54,23 @@
|
|||
</div>
|
||||
<div class="displayFlex center_bg">
|
||||
<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">
|
||||
<ePjz :list="data.totalAssistance"></ePjz>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
|
|
@ -90,7 +105,12 @@
|
|||
</div>
|
||||
<div class="displayFlex right_bg">
|
||||
<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="jz[2].choose == '1' ? 'choose_1' : 'choose_2'"
|
||||
|
|
@ -116,7 +136,12 @@
|
|||
<eP5 v-if="jz[2].choose == '2'" :list="data.difficultSoldiers"></eP5> -->
|
||||
</div>
|
||||
<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="czr-bj"
|
||||
|
|
@ -181,8 +206,8 @@ const jz = ref([
|
|||
const jzChange = (index, value) => {
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
232
src/view/yl.vue
232
src/view/yl.vue
|
|
@ -3,6 +3,10 @@
|
|||
<div class="displayFlex left_bg">
|
||||
<div class="flex1">
|
||||
<div class="yd_title left_1">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
<span class="text">
|
||||
<img
|
||||
v-if="leftchoose.first == '1'"
|
||||
|
|
@ -44,11 +48,12 @@
|
|||
:year="data.leftTopYear"
|
||||
></ePie2>
|
||||
</div>
|
||||
<div
|
||||
class="flex1"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
<div class="flex1" style="margin-top: 10px">
|
||||
<div class="yd_title left_2">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
<span class="text">
|
||||
<img
|
||||
v-if="leftchoose.second == '1'"
|
||||
|
|
@ -89,11 +94,12 @@
|
|||
:year="data.leftCenterYear"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex1"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
<div class="flex1" style="margin-top: 10px">
|
||||
<div class="yd_title left_3">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
<span class="text">
|
||||
<img
|
||||
v-if="leftchoose.third == '1'"
|
||||
|
|
@ -137,7 +143,12 @@
|
|||
</div>
|
||||
<div class="displayFlex center_bg">
|
||||
<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="mtpImg1"></div>
|
||||
<div class="mtpImg2"></div>
|
||||
|
|
@ -148,7 +159,12 @@
|
|||
<ePie3d :list="data.rkgk"></ePie3d>
|
||||
</div>
|
||||
<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
|
||||
:list1="data.centerBottom1"
|
||||
:list2="data.centerBottom2"
|
||||
|
|
@ -158,21 +174,19 @@
|
|||
</div>
|
||||
<div class="displayFlex right_bg">
|
||||
<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="history1">
|
||||
<div>
|
||||
<span>{{ data.yljgzlzx.yljg }}<span class="unit">个</span></span>
|
||||
</div>
|
||||
<img
|
||||
src="@/assets/YLimg/ylimg11.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="historyimg"
|
||||
src="@/assets/YLimg/ylimg5.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="@/assets/YLimg/ylimg11.png" alt="" />
|
||||
<img class="historyimg" src="@/assets/YLimg/ylimg5.png" alt="" />
|
||||
</div>
|
||||
<!-- <div class="history1">
|
||||
<div>
|
||||
|
|
@ -185,42 +199,28 @@
|
|||
<div>
|
||||
<span>{{ data.yljgzlzx.zlzx }}<span class="unit">个</span></span>
|
||||
</div>
|
||||
<img
|
||||
src="@/assets/YLimg/ylimg12.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="historyimg"
|
||||
src="@/assets/YLimg/ylimg10.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="@/assets/YLimg/ylimg12.png" alt="" />
|
||||
<img class="historyimg" src="@/assets/YLimg/ylimg10.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="serviceTop">
|
||||
<div class="visit">
|
||||
<img
|
||||
class="serviceimg"
|
||||
src="@/assets/YLimg/ylimg8.png"
|
||||
alt=""
|
||||
/>
|
||||
<img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
|
||||
<ylSMFW></ylSMFW>
|
||||
</div>
|
||||
<div class="medicalService">
|
||||
<img
|
||||
class="serviceimg"
|
||||
src="@/assets/YLimg/ylimg9.png"
|
||||
alt=""
|
||||
/>
|
||||
<img class="serviceimg" src="@/assets/YLimg/ylimg9.png" alt="" />
|
||||
<div class="medicalServiceTop">
|
||||
<img
|
||||
class="ylimg"
|
||||
src="@/assets/YLimg/ylimg1.png"
|
||||
alt=""
|
||||
/>
|
||||
<img class="ylimg" src="@/assets/YLimg/ylimg1.png" alt="" />
|
||||
<span>36,234</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -238,7 +238,7 @@
|
|||
<ylXZZC
|
||||
:list1="data.zccs1"
|
||||
:list2="data.zccs2"
|
||||
@village='chooseVillage'
|
||||
@village="chooseVillage"
|
||||
></ylXZZC>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -292,39 +292,39 @@ const tableType = reactive({
|
|||
{
|
||||
label: "照料中心",
|
||||
property: "sdailycarecentername",
|
||||
width: '160'
|
||||
width: "160",
|
||||
},
|
||||
{
|
||||
label: "老人名称",
|
||||
property: "scustomername",
|
||||
width: '120'
|
||||
width: "120",
|
||||
},
|
||||
{
|
||||
label: "就餐/送餐订单",
|
||||
property: "iordertype",
|
||||
width: '140',
|
||||
width: "140",
|
||||
type: "slot",
|
||||
},
|
||||
{
|
||||
label: "早、中、晚餐",
|
||||
property: "itimetype",
|
||||
width: '140',
|
||||
width: "140",
|
||||
type: "slot",
|
||||
},
|
||||
{
|
||||
label: "菜品信息",
|
||||
property: "dishesmealnames",
|
||||
width: '160',
|
||||
width: "160",
|
||||
},
|
||||
{
|
||||
label: "订单金额",
|
||||
property: "totalprice",
|
||||
width: '120'
|
||||
width: "120",
|
||||
},
|
||||
{
|
||||
label: "实际支付金额",
|
||||
property: "actualprice",
|
||||
width: '120'
|
||||
width: "120",
|
||||
},
|
||||
{
|
||||
label: "订单结束时间",
|
||||
|
|
@ -343,30 +343,30 @@ const change = (name, index) => {
|
|||
leftchoose.value[name] = index;
|
||||
};
|
||||
const chooseVillage = (village) => {
|
||||
tableType.title = village
|
||||
getTownDetail()
|
||||
}
|
||||
tableType.title = village;
|
||||
getTownDetail();
|
||||
};
|
||||
const close = () => {
|
||||
dialogShow.value = false;
|
||||
};
|
||||
const handlePagination = (current) => {
|
||||
pagination.currentPage = current
|
||||
getTownDetail()
|
||||
pagination.currentPage = current;
|
||||
getTownDetail();
|
||||
};
|
||||
const getTownDetail = () => {
|
||||
let params = {
|
||||
scasecadebareaname: tableType.title,
|
||||
page: pagination.currentPage,
|
||||
size: pagination.pageSize
|
||||
}
|
||||
size: pagination.pageSize,
|
||||
};
|
||||
http.get("/api/ggfwyth/zcxxList", params).then((res) => {
|
||||
if (res.code == 200) {
|
||||
pagination.total = res.count
|
||||
tableType.data = res.data
|
||||
pagination.total = res.count;
|
||||
tableType.data = res.data;
|
||||
dialogShow.value = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
const data = reactive({
|
||||
leftTop1: [],
|
||||
leftTop2: [],
|
||||
|
|
@ -499,6 +499,73 @@ const getData = 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;
|
||||
|
|
@ -519,6 +586,45 @@ const getData = 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%;
|
||||
}
|
||||
}
|
||||
|
||||
.familyPlanning {
|
||||
background-image: url(@/assets/images/yl/new_jhsy.png);
|
||||
|
|
|
|||
Loading…
Reference in New Issue