1313 lines
29 KiB
Vue
1313 lines
29 KiB
Vue
<template>
|
|
<div class="module">
|
|
<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'"
|
|
src="@/assets/images/hygiene/yb_1.png"
|
|
class="c"
|
|
style="width: 160px"
|
|
/>
|
|
<img
|
|
v-else
|
|
src="@/assets/images/hygiene/yb_1_1.png"
|
|
class="c"
|
|
@click="change('first', '1')"
|
|
/>
|
|
<img
|
|
v-if="leftchoose.first == '2'"
|
|
src="@/assets/images/hygiene/yb_2.png"
|
|
class="c"
|
|
style="width: 160px"
|
|
/>
|
|
<img
|
|
v-else
|
|
src="@/assets/images/hygiene/yb_2_1.png"
|
|
class="c"
|
|
@click="change('first', '2')"
|
|
/>
|
|
</span>
|
|
</div>
|
|
<ePie
|
|
v-if="leftchoose.first == '1' && showEchart"
|
|
:list="data.medicalInsurance.ffrc"
|
|
:year="data.medicalInsurance.year"
|
|
></ePie>
|
|
<ePie2
|
|
v-else
|
|
:list="data.medicalInsurance.ffje"
|
|
:year="data.medicalInsurance.year"
|
|
></ePie2>
|
|
<div></div>
|
|
<div class="left_1_xia">
|
|
<div class="left_1_xia_item" style="flex: 1.5">
|
|
<div class="choose">
|
|
<div
|
|
:class="
|
|
tabYd[0].choose == '异地就医人数' ? 'choose_1' : 'choose_2'
|
|
"
|
|
@click="changeYd('异地就医人数')"
|
|
>
|
|
异地就医人数
|
|
</div>
|
|
<div
|
|
:class="
|
|
tabYd[0].choose == '异地就医金额' ? 'choose_1' : 'choose_2'
|
|
"
|
|
@click="changeYd('异地就医金额')"
|
|
>
|
|
异地就医金额
|
|
</div>
|
|
</div>
|
|
<ePie3
|
|
:list="data.medicalInsurance.ffrc"
|
|
:year="data.medicalInsurance.year"
|
|
v-if="showEchart && tabYd[0].choose == '异地就医人数'"
|
|
></ePie3>
|
|
<ePie3_1
|
|
:list="data.medicalInsurance.ffrc"
|
|
:year="data.medicalInsurance.year"
|
|
v-if="showEchart && tabYd[0].choose == '异地就医金额'"
|
|
></ePie3_1>
|
|
</div>
|
|
<div class="left_1_xia_item" style="margin-top: 40px">
|
|
<ePie4
|
|
:list="data.lxbx.lxbxrs"
|
|
:year="data.lxbx.year"
|
|
v-if="showEchart"
|
|
></ePie4>
|
|
<div class="historyimg">手工零星报销人数</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex1" style="margin-top: 10px">
|
|
<div
|
|
class="yd_title"
|
|
:class="lmb == '两慢病' ? 'left_3' : 'left_3_1'"
|
|
@click="lmbqh"
|
|
>
|
|
<div class="animate-border">
|
|
<i></i>
|
|
<i></i>
|
|
</div>
|
|
</div>
|
|
<tnb
|
|
:list="data.lmb.tnbrs"
|
|
:list2="data.lmb.gxyrs"
|
|
:year="data.lmb.year"
|
|
v-if="showEchart && lmb == '两慢病'"
|
|
></tnb>
|
|
<mfyyqk
|
|
:list="data.mfyyqk"
|
|
v-if="showEchart && lmb == '免费用药情况'"
|
|
></mfyyqk>
|
|
</div>
|
|
</div>
|
|
<div class="displayFlex center_bg">
|
|
<div class="flex1">
|
|
<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" />
|
|
<div class="right">
|
|
<div class="right_top font">门急诊人次</div>
|
|
<img src="@/assets/images/hygiene/jt.png" class="right_center" />
|
|
<div class="right_bottom">{{ data.mz.mjzrc }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<img src="@/assets/images/hygiene/zyrs.png" class="left" />
|
|
<div class="right">
|
|
<div class="right_top font">住院人数</div>
|
|
<img src="@/assets/images/hygiene/jt.png" class="right_center" />
|
|
<div class="right_bottom">{{ data.mz.zyrs }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex1" style="flex: 0.3">
|
|
<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">
|
|
<div class="va">{{ data.jkda.jdfs }}</div>
|
|
<img src="@/assets/images/hygiene/shang_left.png" alt="" />
|
|
<img
|
|
class="moveImg"
|
|
src="@/assets/images/hygiene/shang_left2.png"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="moveImg2"
|
|
src="@/assets/images/hygiene/jd.gif"
|
|
alt=""
|
|
/>
|
|
<div class="historyimg font">建档份数</div>
|
|
</div>
|
|
</div>
|
|
<div class="minTopPart2">
|
|
<div class="left">
|
|
<div class="leftImg">
|
|
<eP4 :list="data.jkda.jdl" v-if="showEchart"></eP4>
|
|
</div>
|
|
<div class="left_me">
|
|
<div>建档率</div>
|
|
<div class="bo">{{ data.jkda.jdl }}%</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="rightImg">
|
|
<eP4_1 :list="data.jkda.jtysqyl" v-if="showEchart"></eP4_1>
|
|
</div>
|
|
<div class="right_me">
|
|
<div>家庭医生签约率</div>
|
|
<div class="bo">{{ data.jkda.jtysqyl }}%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex1" style="margin-top: 20px">
|
|
<div class="yd_title familyPlanning">
|
|
<div class="animate-border">
|
|
<i></i>
|
|
<i></i>
|
|
</div>
|
|
</div>
|
|
<!-- <div style="width: 100%; "> -->
|
|
<eP5 :list="data.jsbgl" v-if="showEchart"></eP5>
|
|
<!-- </div> -->
|
|
</div>
|
|
</div>
|
|
<div class="displayFlex right_bg">
|
|
<div class="flex1" style="flex: 0.9">
|
|
<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>
|
|
<img src="@/assets/images/hygiene/fy.png" alt="" />
|
|
<img src="@/assets/images/hygiene/fy1.png" alt="" class="fyMove" />
|
|
<img src="@/assets/images/hygiene/fy.gif" class="historyMoveImg" />
|
|
<div class="historyimg font" >孕产妇系统管理人数</div>
|
|
</div>
|
|
<div class="history1">
|
|
<div class="va">{{ data.fyglrs.etrs }}</div>
|
|
<img src="@/assets/images/hygiene/fy.png" alt="" />
|
|
<img src="@/assets/images/hygiene/fy2.png" alt="" class="fyMove" />
|
|
<img src="@/assets/images/hygiene/fy.gif" class="historyMoveImg" />
|
|
<div class="historyimg font" >0-6岁儿童系统管理人数</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex1" style="flex: 1.1">
|
|
<div class="yd_title service">
|
|
<div class="animate-border">
|
|
<i></i>
|
|
<i></i>
|
|
</div>
|
|
</div>
|
|
<eP7
|
|
:list="data.jktj.jktjrs"
|
|
:year="data.jktj.year"
|
|
v-if="showEchart"
|
|
></eP7>
|
|
</div>
|
|
<div class="flex1">
|
|
<div class="yd_title last">
|
|
<div class="animate-border">
|
|
<i></i>
|
|
<i></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="table"
|
|
ref="mainRef"
|
|
@mouseenter="stopAutoScroll"
|
|
@mouseleave="startAutoScroll"
|
|
>
|
|
<div class="item" v-for="item in data.jkhd">
|
|
{{ item.jkhd }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ePie from "./echarts_hygiene/pie.vue";
|
|
import ePie2 from "./echarts_hygiene/pie2.vue";
|
|
import ePie3 from "./echarts_hygiene/pie3.vue";
|
|
import ePie3_1 from "./echarts_hygiene/pie3_1.vue";
|
|
import ePie4 from "./echarts_hygiene/pie4.vue";
|
|
import eP2 from "./echarts_hygiene/eP2.vue";
|
|
import eP3 from "./echarts_hygiene/eP3.vue";
|
|
import eP7 from "./echarts_hygiene/eP7.vue";
|
|
import eP6 from "./echarts_hygiene/eP6.vue";
|
|
import eP5 from "./echarts_hygiene/eP5.vue";
|
|
import eP4 from "./echarts_hygiene/eP4.vue";
|
|
import eP4_1 from "./echarts_hygiene/eP4_1.vue";
|
|
import tnb from "./echarts_hygiene/tnb.vue";
|
|
import mfyyqk from "./echarts_hygiene/mfyyqk.vue";
|
|
import { ref, reactive, onMounted, onBeforeMount } from "vue";
|
|
import http from "@/utils/request.js";
|
|
const lmb = ref("两慢病");
|
|
const showEchart = ref(false);
|
|
const leftchoose = ref({
|
|
first: "1",
|
|
second: "1",
|
|
third: "1",
|
|
});
|
|
const data = reactive({
|
|
medicalInsurance: {}, //医疗保险
|
|
lmb: {}, //两慢病
|
|
mfyyqk: [
|
|
{ name: "2020", num: 1399947.19 },
|
|
{ name: "2021", num: 4968369.09 },
|
|
{ name: "2022", num: 6452334.81 },
|
|
{ name: "2023", num: 7301560.28 },
|
|
], //免费用药情况
|
|
mz: {}, //门诊住院
|
|
jkda: {}, //健康档案
|
|
jsbgl: [], //精神病管理
|
|
fyglrs: {}, //系统管理
|
|
jktj: {}, //65岁健康体检
|
|
jkhd: [], //健康活动
|
|
lxbx:{},//手工零星报销
|
|
});
|
|
const tabYd = ref([
|
|
{
|
|
choose: "异地就医人数",
|
|
},
|
|
]);
|
|
const changeYd = (name) => {
|
|
tabYd.value[0].choose = name;
|
|
};
|
|
const lmbqh = () => {
|
|
if (lmb.value == "两慢病") {
|
|
lmb.value = "免费用药情况";
|
|
} else {
|
|
lmb.value = "两慢病";
|
|
}
|
|
};
|
|
//
|
|
const change = (name, index) => {
|
|
leftchoose.value[name] = index;
|
|
};
|
|
//自动滚动
|
|
const mainRef = ref(null);
|
|
let isAutoScrolling = true;
|
|
|
|
const stopAutoScroll = () => {
|
|
isAutoScrolling = false;
|
|
};
|
|
|
|
const startAutoScroll = () => {
|
|
isAutoScrolling = true;
|
|
autoScroll();
|
|
};
|
|
|
|
const autoScroll = () => {
|
|
if (!isAutoScrolling) return;
|
|
|
|
const mainEl = mainRef.value;
|
|
if (!mainEl) {
|
|
// console.error("mainRef is not defined");
|
|
return;
|
|
}
|
|
mainEl.scrollTop += 1; // 每次滚动的距离
|
|
|
|
if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {
|
|
setTimeout(() => {
|
|
mainEl.scrollTo({ top: 0, behavior: "smooth" });
|
|
setTimeout(autoScroll, 2000); // 2秒后再次滚动到底部
|
|
}, 1000); // 暂停1秒后开始快速滚回顶部
|
|
} else {
|
|
requestAnimationFrame(autoScroll);
|
|
}
|
|
};
|
|
|
|
onBeforeMount(async () => {
|
|
getData();
|
|
});
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
startAutoScroll();
|
|
}, 600);
|
|
|
|
// console.log(
|
|
// mainRef.value.scrollTop,
|
|
// mainRef.value.scrollHeight,
|
|
// mainRef.value.clientHeight
|
|
// );
|
|
});
|
|
const getData = async () => {
|
|
await http.get("/api/ggfwyth/health").then((res) => {
|
|
if (res.code == 200) {
|
|
data.medicalInsurance = res.data.medicalInsurance;
|
|
data.lmb = res.data.lmb;
|
|
data.mz = res.data.mz;
|
|
data.jkda = res.data.jkda;
|
|
data.jsbgl = res.data.jsbgl;
|
|
data.fyglrs = res.data.fyglrs;
|
|
data.jktj = res.data.jktj;
|
|
data.jkhd = res.data.jkhd;
|
|
data.lxbx = res.data.lxbx;
|
|
showEchart.value = true;
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.displayFlex {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// flex: 1;
|
|
width: 33.333333333%;
|
|
}
|
|
|
|
.flex1 {
|
|
flex: 1;
|
|
// padding: 0 28px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.flex2 {
|
|
// flex: 1;
|
|
// padding: 0 38px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.module {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.yd_title {
|
|
// background-image: url(@/assets/img_04.png);
|
|
// background-repeat: no-repeat;
|
|
// background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
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: 2px;
|
|
}
|
|
i {
|
|
position: absolute;
|
|
display: inline-block;
|
|
height: 100%;
|
|
width: 2px;
|
|
}
|
|
&::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;
|
|
position: absolute;
|
|
font-size: 16px;
|
|
font-family: SourceHanSansCN;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 1px;
|
|
}
|
|
.c {
|
|
width: 130px;
|
|
height: 42px;
|
|
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 {
|
|
width: 96%;
|
|
background-image: url(@/assets/images/hygiene/new_zcs.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.mechanism {
|
|
background-image: url(@/assets/images/hygiene/new_fygl.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.service {
|
|
background-image: url(@/assets/images/hygiene/new_tjrs.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.last {
|
|
background-image: url(@/assets/images/hygiene/new_jkhd.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.serviceBox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
|
|
.serviceimg {
|
|
width: 182px;
|
|
height: 35px;
|
|
}
|
|
|
|
.serviceTop {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px 36px 0px 20px;
|
|
box-sizing: border-box;
|
|
.visit {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.medicalService {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.ylimg {
|
|
width: 200px;
|
|
height: 220px;
|
|
}
|
|
|
|
.medicalServiceTop {
|
|
position: relative;
|
|
|
|
span {
|
|
position: absolute;
|
|
left: 39px;
|
|
top: 35%;
|
|
font-weight: bold;
|
|
font-size: 32px;
|
|
color: #ffffff;
|
|
line-height: 41px;
|
|
letter-spacing: 1px;
|
|
text-align: center;
|
|
font-style: normal;
|
|
font-family: TCloudNumber, TCloudNumber;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.mealAssistance {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.mealAssistanceimg {
|
|
width: 495px;
|
|
height: 35px;
|
|
}
|
|
}
|
|
|
|
.left_1 {
|
|
background-image: url(@/assets/images/hygiene/new_ylbx.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.left_1_xia {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.left_1_xia_item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.choose {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
margin-left: 35px;
|
|
.choose_1 {
|
|
cursor: pointer;
|
|
width: 124px;
|
|
height: 42px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
line-height: 22px;
|
|
margin-right: 15px;
|
|
background-image: url(@/assets/images/hygiene/choose.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.choose_2 {
|
|
cursor: pointer;
|
|
width: 124px;
|
|
height: 42px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
line-height: 22px;
|
|
margin-right: 15px;
|
|
background-image: url(@/assets/images/hygiene/noChoose.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.historyimg {
|
|
margin-top: 10px;
|
|
padding: 0 25px;
|
|
background-image: url(@/assets/images/hygiene/xtgl_1.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
font-size: 15px;
|
|
color: #ffffff;
|
|
line-height: 21px;
|
|
letter-spacing: 2px;
|
|
}
|
|
}
|
|
}
|
|
// .left_2 {
|
|
// background-image: url(@/assets/images/hygiene/left_title_2.png);
|
|
// background-repeat: no-repeat;
|
|
// background-size: 100% 100%;
|
|
// }
|
|
|
|
.left_3 {
|
|
background-image: url(@/assets/images/hygiene/lmb.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
}
|
|
.left_3_1 {
|
|
background-image: url(@/assets/images/hygiene/mfyyqk.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.center_1 {
|
|
width: 96%;
|
|
background-image: url(@/assets/images/hygiene/new_jkda.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.center_2 {
|
|
width: 96%;
|
|
background-image: url(@/assets/images/hygiene/new_mz.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.center_top {
|
|
width: 95%;
|
|
height: 150px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
.left {
|
|
width: 102px;
|
|
height: 102px;
|
|
}
|
|
.right {
|
|
margin-left: 10px;
|
|
.right_top {
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
line-height: 22px;
|
|
letter-spacing: 2px;
|
|
}
|
|
.right_center {
|
|
width: 100px;
|
|
height: 7px;
|
|
}
|
|
.right_bottom {
|
|
margin-top: 3px;
|
|
padding: 5px;
|
|
font-size: 22px;
|
|
color: #2ef1ff;
|
|
line-height: 26px;
|
|
text-shadow: 0px 0px 13px rgba(0, 252, 255, 0.5);
|
|
background: linear-gradient(
|
|
270deg,
|
|
rgba(255, 255, 255, 0) 0%,
|
|
#3976a1 100%
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.left_bg {
|
|
width: 642px;
|
|
// height: 100%;
|
|
box-sizing: border-box;
|
|
padding-left: 50px;
|
|
margin-right: 28px;
|
|
background-image: url(@/assets/images/left_bg.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.center_bg {
|
|
width: 582px;
|
|
// height: 100%;
|
|
box-sizing: border-box;
|
|
padding-left: 10px;
|
|
margin-right: 28px;
|
|
background-image: url(@/assets/images/center_bg.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.right_bg {
|
|
width: 642px;
|
|
box-sizing: border-box;
|
|
padding-left: 20px;
|
|
margin-right: 28px;
|
|
background-image: url(@/assets/images/right_bg.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.basicInformation {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
padding-top: 22px;
|
|
|
|
.basicInformation_item {
|
|
flex: 0 0 50%;
|
|
padding: 0 2px;
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.icon {
|
|
width: 79px;
|
|
height: 47px;
|
|
}
|
|
|
|
.right {
|
|
margin-left: 4px;
|
|
|
|
.label {
|
|
background-image: url(@/assets/img_11.png);
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: bottom;
|
|
margin-bottom: 4px;
|
|
|
|
span {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #eff0f1;
|
|
line-height: 19px;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #6acbff;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.visitLog {
|
|
.visitLog_item {
|
|
display: flex;
|
|
align-items: center;
|
|
background-image: url(@/assets/img_12.png);
|
|
background-size: 100% 100%;
|
|
margin-top: 16px;
|
|
padding: 15px 8px;
|
|
box-sizing: border-box;
|
|
|
|
img {
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.visitLog_item_box {
|
|
flex: auto;
|
|
|
|
h4 {
|
|
font-size: 18px;
|
|
font-family: MicrosoftYaHei;
|
|
font-weight: bold;
|
|
color: #0096ff;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
p {
|
|
font-size: 12px;
|
|
font-family: SourceHanSansCN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
margin-top: 6px;
|
|
}
|
|
}
|
|
|
|
.check {
|
|
font-size: 12px;
|
|
font-family: SourceHanSansCN;
|
|
font-weight: 400;
|
|
color: #0096ff;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.history {
|
|
height: 240px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
box-sizing: border-box;
|
|
.history1 {
|
|
font-size: 26px;
|
|
color: #ffffff;
|
|
line-height: 30px;
|
|
letter-spacing: 1px;
|
|
text-align: center;
|
|
font-style: normal;
|
|
font-family: PangMenZhengDao;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
.fyMove {
|
|
position: absolute;
|
|
top: 60px;
|
|
width: 60px;
|
|
height: 64px;
|
|
animation: example 3s infinite linear;
|
|
}
|
|
@keyframes example {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
25% {
|
|
transform: translateY(-4px);
|
|
}
|
|
50% {
|
|
transform: translateY(0);
|
|
}
|
|
75% {
|
|
transform: translateY(4px);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.va {
|
|
margin-top: 27px;
|
|
margin-bottom: 10px;
|
|
font-family: TCloudNumber, TCloudNumber;
|
|
|
|
font-size: 26px;
|
|
color: #ffffff;
|
|
line-height: 30px;
|
|
letter-spacing: 1px;
|
|
text-shadow: 0px 2px 4px rgba(255, 255, 255, 0.5);
|
|
text-align: right;
|
|
font-style: normal;
|
|
}
|
|
img {
|
|
width: 110px;
|
|
height: 110px;
|
|
}
|
|
|
|
.historyimg {
|
|
margin-top: 10px;
|
|
padding: 0 25px;
|
|
background-image: url(@/assets/images/hygiene/xtgl_1.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
font-size: 15px;
|
|
color: #ffffff;
|
|
line-height: 21px;
|
|
letter-spacing: 2px;
|
|
}
|
|
.historyMoveImg {
|
|
position: absolute;
|
|
top: 60px;
|
|
width: 180px;
|
|
height: 120px;
|
|
}
|
|
}
|
|
img {
|
|
width: 154px;
|
|
height: 136px;
|
|
}
|
|
|
|
p {
|
|
margin-top: 12px;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 28px;
|
|
border-bottom: 13px solid rgba(57, 59, 109, 1);
|
|
}
|
|
}
|
|
|
|
.concernLabel {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 12px 0 20px;
|
|
|
|
span {
|
|
text-align: center;
|
|
background: rgba(0, 89, 130, 0.73);
|
|
border-radius: 10px;
|
|
width: 118px;
|
|
height: 49px;
|
|
line-height: 49px;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
margin: 0 10px;
|
|
}
|
|
}
|
|
|
|
.property {
|
|
display: flex;
|
|
padding: 14px 0 10px;
|
|
|
|
.property_box {
|
|
//background-image: url(@/assets/img_05.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 179px;
|
|
height: 91px;
|
|
margin: 0 12px;
|
|
text-align: center;
|
|
|
|
h5 {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
margin: 9px 0 16px;
|
|
}
|
|
|
|
p {
|
|
font-size: 21px;
|
|
font-weight: bold;
|
|
color: #48ece7;
|
|
}
|
|
}
|
|
}
|
|
|
|
.activity {
|
|
h5 {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: rgba(0, 164, 250, 0.8);
|
|
line-height: 47px;
|
|
border-bottom: 2px solid rgba(0, 164, 250, 1);
|
|
margin-bottom: 17px;
|
|
}
|
|
|
|
.activity_content {
|
|
margin: 0 -6px 12px;
|
|
display: flex;
|
|
|
|
.activity_box {
|
|
width: 50%;
|
|
display: inline-block;
|
|
margin: 0 6px;
|
|
box-sizing: border-box;
|
|
background-color: rgba(15, 28, 54, 1);
|
|
padding: 12px 12px 19px;
|
|
|
|
p {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 27px;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.monitor {
|
|
.monitor_box {
|
|
display: flex;
|
|
padding: 8px 0;
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.67);
|
|
|
|
img {
|
|
width: 115px;
|
|
height: 84px;
|
|
margin-right: 21px;
|
|
}
|
|
|
|
.monitor_box_text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
h4 {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 20px;
|
|
}
|
|
|
|
p {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #818181;
|
|
line-height: 23px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.minTop {
|
|
height: 250px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.history2 {
|
|
font-size: 26px;
|
|
color: #ffffff;
|
|
line-height: 30px;
|
|
letter-spacing: 1px;
|
|
text-align: center;
|
|
font-style: normal;
|
|
font-family: PangMenZhengDao;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
.moveImg {
|
|
position: absolute;
|
|
top: 60px;
|
|
width: 64px;
|
|
height: 64px;
|
|
animation: example 3s infinite linear;
|
|
}
|
|
@keyframes example {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
25% {
|
|
transform: translateY(-4px);
|
|
}
|
|
50% {
|
|
transform: translateY(0);
|
|
}
|
|
75% {
|
|
transform: translateY(4px);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.moveImg2 {
|
|
position: absolute;
|
|
top: 70px;
|
|
}
|
|
.va {
|
|
margin-top: 27px;
|
|
margin-bottom: 20px;
|
|
font-family: TCloudNumber, TCloudNumber;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
color: #ffffff;
|
|
line-height: 24px;
|
|
letter-spacing: 1px;
|
|
text-shadow: 0px 0px 23px rgba(0, 252, 255, 0.5);
|
|
text-align: center;
|
|
font-style: normal;
|
|
}
|
|
img {
|
|
width: 113px;
|
|
height: 121px;
|
|
}
|
|
|
|
.historyimg {
|
|
margin-top: 10px;
|
|
padding: 0 25px;
|
|
background-image: url(@/assets/images/hygiene/xtgl_1.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
font-size: 15px;
|
|
color: #ffffff;
|
|
line-height: 21px;
|
|
letter-spacing: 2px;
|
|
}
|
|
}
|
|
.minTopPart2 {
|
|
margin-left: 5px;
|
|
width: 420px;
|
|
height: 136px;
|
|
background-image: url(@/assets/images/hygiene/xia_1.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
align-items: center;
|
|
position: relative;
|
|
display: flex;
|
|
margin-top: 35px;
|
|
padding: 0 5px;
|
|
box-sizing: border-box;
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 13px;
|
|
.leftImg {
|
|
width: 90px;
|
|
height: 90px;
|
|
}
|
|
.left_me {
|
|
margin-left: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
line-height: 20px;
|
|
letter-spacing: 2px;
|
|
text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
|
|
|
|
.bo {
|
|
margin-top: 5px;
|
|
font-family: TCloudNumber, TCloudNumber;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
color: #00fffc;
|
|
line-height: 21px;
|
|
text-shadow: 0px 0px 13px rgba(0, 252, 255, 0.5);
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: center;
|
|
|
|
.rightImg {
|
|
width: 90px;
|
|
height: 90px;
|
|
}
|
|
.right_me {
|
|
margin-left: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
line-height: 20px;
|
|
letter-spacing: 2px;
|
|
text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
|
|
.bo {
|
|
margin-top: 5px;
|
|
font-family: TCloudNumber, TCloudNumber;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
color: #ffe92c;
|
|
line-height: 21px;
|
|
text-shadow: 0px 0px 13px rgba(0, 252, 255, 0.5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.table {
|
|
box-sizing: border-box;
|
|
margin-top: 10px;
|
|
width: 95%;
|
|
height: 240px;
|
|
|
|
overflow-y: auto;
|
|
|
|
.item {
|
|
width: 98%;
|
|
box-sizing: border-box;
|
|
margin-top: 10px;
|
|
padding: 16px 20px;
|
|
background-image: url(@/assets/images/hygiene/table_bg.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
/* 滚动条整体部分 */
|
|
.table::-webkit-scrollbar {
|
|
width: 5px;
|
|
// height: 10px;
|
|
}
|
|
/* 滚动槽 */
|
|
.table::-webkit-scrollbar-track {
|
|
border-radius: 1px;
|
|
background: rgba(41, 157, 255, 0.56);
|
|
-webkit-box-shadow: inset 0 0 6px rgba(139, 139, 139, 0.3);
|
|
}
|
|
/* 滚动条滑块样式 */
|
|
.table::-webkit-scrollbar-thumb {
|
|
background-clip: content-box;
|
|
border-radius: 6px;
|
|
background: rgba(41, 157, 255, 1);
|
|
-webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3);
|
|
}
|
|
.sm_title_1 {
|
|
width: 196px;
|
|
height: 45px;
|
|
margin-left: 175px;
|
|
// background-image: url(@/assets/images/hygiene/tnbrs.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-top: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.sm_title_2 {
|
|
width: 196px;
|
|
height: 45px;
|
|
margin-left: 175px;
|
|
// background-image: url(@/assets/images/hygiene/gxyrs.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-top: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.font{
|
|
font-size: 18px !important;
|
|
}
|
|
</style>
|