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

gx

This commit is contained in:
duanxiaohai 2024-06-04 09:26:53 +08:00
parent 352027943a
commit 496ec35b69
3 changed files with 358 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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">

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);