This commit is contained in:
parent
2f13454c84
commit
8823ede9ae
Binary file not shown.
After Width: | Height: | Size: 39 KiB |
347
src/view/sy.vue
347
src/view/sy.vue
|
@ -2,12 +2,12 @@
|
|||
<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>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left_1_bg">
|
||||
<div class="item yl_1">
|
||||
|
@ -16,16 +16,13 @@
|
|||
</div>
|
||||
<div class="item_content">
|
||||
<div class="sr">
|
||||
<span class="left">收入:</span
|
||||
><span class="right"
|
||||
>{{ data.LivelihoodWelfare.zgylbxzsr }}万元</span
|
||||
>
|
||||
<span class="left">收入:</span><span class="right">{{ data.LivelihoodWelfare.zgylbxzsr }}万元</span>
|
||||
</div>
|
||||
<div class="sr" style="margin-top: 5px">
|
||||
<span class="left">支出:</span
|
||||
><span class="right"
|
||||
>{{ data.LivelihoodWelfare.zgylbxzzc }}万元</span
|
||||
>
|
||||
<div
|
||||
class="sr"
|
||||
style="margin-top: 5px"
|
||||
>
|
||||
<span class="left">支出:</span><span class="right">{{ data.LivelihoodWelfare.zgylbxzzc }}万元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -33,16 +30,13 @@
|
|||
<div class="item_title"><span class="blue">工伤</span>保险</div>
|
||||
<div class="item_content">
|
||||
<div class="sr">
|
||||
<span class="left">收入:</span
|
||||
><span class="right"
|
||||
>{{ data.LivelihoodWelfare.gsbxzsr }}万元</span
|
||||
>
|
||||
<span class="left">收入:</span><span class="right">{{ data.LivelihoodWelfare.gsbxzsr }}万元</span>
|
||||
</div>
|
||||
<div class="sr" style="margin-top: 5px">
|
||||
<span class="left">支出:</span
|
||||
><span class="right"
|
||||
>{{ data.LivelihoodWelfare.gsbxzzc }}万元</span
|
||||
>
|
||||
<div
|
||||
class="sr"
|
||||
style="margin-top: 5px"
|
||||
>
|
||||
<span class="left">支出:</span><span class="right">{{ data.LivelihoodWelfare.gsbxzzc }}万元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -52,16 +46,13 @@
|
|||
</div>
|
||||
<div class="item_content">
|
||||
<div class="sr">
|
||||
<span class="left">收入:</span
|
||||
><span class="right"
|
||||
>{{ data.LivelihoodWelfare.cxylbxzsr }}万元</span
|
||||
>
|
||||
<span class="left">收入:</span><span class="right">{{ data.LivelihoodWelfare.cxylbxzsr }}万元</span>
|
||||
</div>
|
||||
<div class="sr" style="margin-top: 5px">
|
||||
<span class="left">支出:</span
|
||||
><span class="right"
|
||||
>{{ data.LivelihoodWelfare.cxylbxzzc }}万元</span
|
||||
>
|
||||
<div
|
||||
class="sr"
|
||||
style="margin-top: 5px"
|
||||
>
|
||||
<span class="left">支出:</span><span class="right">{{ data.LivelihoodWelfare.cxylbxzzc }}万元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -71,16 +62,13 @@
|
|||
</div>
|
||||
<div class="item_content">
|
||||
<div class="sr">
|
||||
<span class="left">收入:</span
|
||||
><span class="right"
|
||||
>{{ data.LivelihoodWelfare.zgyilbxzsr }}万元</span
|
||||
>
|
||||
<span class="left">收入:</span><span class="right">{{ data.LivelihoodWelfare.zgyilbxzsr }}万元</span>
|
||||
</div>
|
||||
<div class="sr" style="margin-top: 5px">
|
||||
<span class="left">支出:</span
|
||||
><span class="right"
|
||||
>{{ data.LivelihoodWelfare.zgyilbxzzc }}万元</span
|
||||
>
|
||||
<div
|
||||
class="sr"
|
||||
style="margin-top: 5px"
|
||||
>
|
||||
<span class="left">支出:</span><span class="right">{{ data.LivelihoodWelfare.zgyilbxzzc }}万元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -90,16 +78,13 @@
|
|||
</div>
|
||||
<div class="item_content">
|
||||
<div class="sr">
|
||||
<span class="left">收入:</span
|
||||
><span class="right"
|
||||
>{{ data.LivelihoodWelfare.cxyilbxzsr }}万元</span
|
||||
>
|
||||
<span class="left">收入:</span><span class="right">{{ data.LivelihoodWelfare.cxyilbxzsr }}万元</span>
|
||||
</div>
|
||||
<div class="sr" style="margin-top: 5px">
|
||||
<span class="left">支出:</span
|
||||
><span class="right"
|
||||
>{{ data.LivelihoodWelfare.cxyilbxzzc }}万元</span
|
||||
>
|
||||
<div
|
||||
class="sr"
|
||||
style="margin-top: 5px"
|
||||
>
|
||||
<span class="left">支出:</span><span class="right">{{ data.LivelihoodWelfare.cxyilbxzzc }}万元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -116,12 +101,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left_2_top">
|
||||
<div class="item school">
|
||||
|
@ -141,40 +129,46 @@
|
|||
<div class="left_2_bottom_item">
|
||||
<div class="left_2_bottom_item_shang">
|
||||
<div class="left">
|
||||
<span class="span1">{{ jysyList[0].title }}</span
|
||||
>学校师生比
|
||||
<span class="span1">{{ jysyList[0].title }}</span>学校师生比
|
||||
</div>
|
||||
<div class="right">
|
||||
<span class="span1">{{ jysyList[0].teacher }}</span
|
||||
>:{{ jysyList[0].student }}
|
||||
<span class="span1">{{ jysyList[0].teacher }}</span>:{{ jysyList[0].student }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="left_2_bottom_item_xia">
|
||||
<div class="csbl" :style="cs"></div>
|
||||
<div
|
||||
class="csbl"
|
||||
:style="cs"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left_2_bottom_item">
|
||||
<div class="left_2_bottom_item_shang">
|
||||
<div class="left">
|
||||
<span class="span2">{{ jysyList[1].title }}</span
|
||||
>学校师生比
|
||||
<span class="span2">{{ jysyList[1].title }}</span>学校师生比
|
||||
</div>
|
||||
<div class="right">
|
||||
{{ jysyList[1].teacher }}:{{ jysyList[1].student }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="left_2_bottom_item_xia">
|
||||
<div class="ncbl" :style="nc"></div>
|
||||
<div
|
||||
class="ncbl"
|
||||
:style="nc"
|
||||
></div>
|
||||
</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 class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left_3_1">
|
||||
<div
|
||||
|
@ -206,22 +200,37 @@
|
|||
<div class="people_total">
|
||||
<div class="people_total_item left">
|
||||
<div class="number">{{ data.PopulationData.man }}</div>
|
||||
<img src="../assets/images/sy/man.png" alt="" />
|
||||
<img
|
||||
src="../assets/images/sy/man.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="sex">男性人口</div>
|
||||
</div>
|
||||
<div class="people_total_item2 center">
|
||||
<img src="../assets/images/sy/people_total.png" alt="" />
|
||||
<img
|
||||
src="../assets/images/sy/people_total.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="number">{{ data.PopulationData.rkzs }}</div>
|
||||
<div class="total">人口总数</div>
|
||||
</div>
|
||||
<div class="people_total_item right">
|
||||
<div class="number">{{ data.PopulationData.woman }}</div>
|
||||
<img src="../assets/images/sy/woman.png" alt="" />
|
||||
<img
|
||||
src="../assets/images/sy/woman.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="sex">女性人口</div>
|
||||
</div>
|
||||
</div>
|
||||
<ePie2 style="margin-top: 20px" :list="data.ageRatio"></ePie2>
|
||||
<ePie style="margin-bottom: 20px" :list="data.ageGroup"></ePie>
|
||||
<ePie2
|
||||
style="margin-top: 20px"
|
||||
:list="data.ageRatio"
|
||||
></ePie2>
|
||||
<ePie
|
||||
style="margin-bottom: 20px"
|
||||
:list="data.ageGroup"
|
||||
></ePie>
|
||||
<div class="table">
|
||||
<div class="table_choose">
|
||||
<div
|
||||
|
@ -251,13 +260,20 @@
|
|||
:header-cell-style="tableHeaderColor"
|
||||
v-if="choose == '1'"
|
||||
>
|
||||
<el-table-column prop="company" label="企业名称" width="200" />
|
||||
<el-table-column
|
||||
prop="company"
|
||||
label="企业名称"
|
||||
width="200"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="项目事项牵头单位"
|
||||
width="200"
|
||||
/>
|
||||
<el-table-column prop="finish" label="完成情况">
|
||||
<el-table-column
|
||||
prop="finish"
|
||||
label="完成情况"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div
|
||||
style="letter-spacing: 3px"
|
||||
|
@ -268,36 +284,57 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="zwfw" v-if="choose == '3'">
|
||||
<div
|
||||
class="zwfw"
|
||||
v-if="choose == '3'"
|
||||
>
|
||||
<div class="shang">
|
||||
<div class="shang_item">
|
||||
<div class="title">一网通办事</div>
|
||||
<div class="i"><zwfw1 /></div>
|
||||
<div class="i">
|
||||
<zwfw1 />
|
||||
</div>
|
||||
</div>
|
||||
<div class="shang_item">
|
||||
<div class="title">超期受理率</div>
|
||||
<div class="i"><zwfw2 /></div>
|
||||
<div class="i">
|
||||
<zwfw2 />
|
||||
</div>
|
||||
</div>
|
||||
<div class="shang_item">
|
||||
<div class="title">超期办理率</div>
|
||||
<div class="i"><zwfw3 /></div>
|
||||
<div class="i">
|
||||
<zwfw3 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="xia">
|
||||
<div class="xia_item">
|
||||
<img class="left" src="@/assets/images/sy/zwfw_sl.png" />
|
||||
<img
|
||||
class="left"
|
||||
src="@/assets/images/sy/zwfw_sl.png"
|
||||
/>
|
||||
<div class="right">
|
||||
<div class="name">平均受理时长</div>
|
||||
<img class="line" src="@/assets/images/sy/zwfw_line.png" />
|
||||
<img
|
||||
class="line"
|
||||
src="@/assets/images/sy/zwfw_line.png"
|
||||
/>
|
||||
<div class="time"><span>0.22</span>小时</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fgx"></div>
|
||||
<div class="xia_item">
|
||||
<img class="left" src="@/assets/images/sy/zwfw_bl.png" />
|
||||
<img
|
||||
class="left"
|
||||
src="@/assets/images/sy/zwfw_bl.png"
|
||||
/>
|
||||
<div class="right">
|
||||
<div class="name">平均办理时长</div>
|
||||
<img class="line" src="@/assets/images/sy/zwfw_line.png" />
|
||||
<img
|
||||
class="line"
|
||||
src="@/assets/images/sy/zwfw_line.png"
|
||||
/>
|
||||
<div class="time"><span>0.54</span>小时</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -310,9 +347,9 @@
|
|||
<div class="flex1">
|
||||
<div class="yd_title mechanism">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ylws">
|
||||
<div
|
||||
|
@ -325,12 +362,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex1" style="margin-top: 10px">
|
||||
<div
|
||||
class="flex1"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
<div class="yd_title service">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="whsy">
|
||||
<div
|
||||
|
@ -345,12 +385,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex1" style="margin-top: 10px">
|
||||
<div
|
||||
class="flex1"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
<div class="yd_title last">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tysy">
|
||||
<div
|
||||
|
@ -362,17 +405,23 @@
|
|||
{{ item.value }}<span>{{ item.dw ? item.dw : "" }}</span>
|
||||
</div>
|
||||
<img :src="item.img" />
|
||||
<img src="../assets/images/sy/tyBon.png" style="margin-top: -60px;">
|
||||
<img
|
||||
src="../assets/images/sy/tyBon.png"
|
||||
style="margin-top: -60px;"
|
||||
>
|
||||
<div class="name">{{ item.name }}</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 class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <table class="table">
|
||||
<tbody>
|
||||
|
@ -396,7 +445,15 @@
|
|||
<div class="jtsyBox">
|
||||
<div class="jtsyBoxtop">
|
||||
<div class="jtsyBoxtop1">
|
||||
<img :src="data.jtsyList[0].img" alt="" />
|
||||
<img
|
||||
:src="data.jtsyList[0].img"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="../assets/images/sy/jtsy.gif"
|
||||
class="turn"
|
||||
alt=""
|
||||
>
|
||||
<div>
|
||||
<div class="jtsyname">{{ data.jtsyList[0].name }}</div>
|
||||
<div class="jtsytext">
|
||||
|
@ -410,7 +467,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="jtsyBoxtop1">
|
||||
<img :src="data.jtsyList[1].img" alt="" />
|
||||
<img
|
||||
:src="data.jtsyList[1].img"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="../assets/images/sy/jtsy.gif"
|
||||
class="turn"
|
||||
alt=""
|
||||
>
|
||||
<div>
|
||||
<div class="jtsyname">{{ data.jtsyList[1].name }}</div>
|
||||
<div class="jtsytext">
|
||||
|
@ -426,7 +491,15 @@
|
|||
</div>
|
||||
<div class="jtsyBoxbot">
|
||||
<div class="jtsyBoxtop1">
|
||||
<img :src="data.jtsyList[2].img" alt="" />
|
||||
<img
|
||||
:src="data.jtsyList[2].img"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="../assets/images/sy/jtsy.gif"
|
||||
class="turn"
|
||||
alt=""
|
||||
>
|
||||
<div>
|
||||
<div class="jtsyname">{{ data.jtsyList[2].name }}</div>
|
||||
<div class="jtsytext">
|
||||
|
@ -440,7 +513,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="jtsyBoxtop1">
|
||||
<img :src="data.jtsyList[3].img" alt="" />
|
||||
<img
|
||||
:src="data.jtsyList[3].img"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="../assets/images/sy/jtsy.gif"
|
||||
class="turn"
|
||||
alt=""
|
||||
>
|
||||
<div>
|
||||
<div class="jtsyname">{{ data.jtsyList[3].name }}</div>
|
||||
<div class="jtsytext">
|
||||
|
@ -454,7 +535,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="jtsyBoxtop1">
|
||||
<img :src="data.jtsyList[4].img" alt="" />
|
||||
<img
|
||||
:src="data.jtsyList[4].img"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="../assets/images/sy/jtsy.gif"
|
||||
class="turn"
|
||||
alt=""
|
||||
>
|
||||
<div>
|
||||
<div class="jtsyname">{{ data.jtsyList[4].name }}</div>
|
||||
<div class="jtsytext">
|
||||
|
@ -997,16 +1086,14 @@ const jtsyList = ref([
|
|||
|
||||
// 县城学校师生比样式
|
||||
const cs = computed(() => {
|
||||
let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${
|
||||
jysyList.value[0].teacher + jysyList.value[0].student
|
||||
}`;
|
||||
let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${jysyList.value[0].teacher + jysyList.value[0].student
|
||||
}`;
|
||||
return str;
|
||||
});
|
||||
// 农村学校师生比样式
|
||||
const nc = computed(() => {
|
||||
let str = `--teacher: ${jysyList.value[1].teacher}; --total: ${
|
||||
jysyList.value[1].teacher + jysyList.value[1].student
|
||||
}`;
|
||||
let str = `--teacher: ${jysyList.value[1].teacher}; --total: ${jysyList.value[1].teacher + jysyList.value[1].student
|
||||
}`;
|
||||
return str;
|
||||
});
|
||||
// 服务表格样式
|
||||
|
@ -1306,7 +1393,7 @@ onBeforeMount(async () => {
|
|||
#03e9f4,
|
||||
transparent
|
||||
);
|
||||
|
||||
|
||||
animation: one 4s linear infinite;
|
||||
}
|
||||
i:nth-child(1) {
|
||||
|
@ -1372,7 +1459,7 @@ onBeforeMount(async () => {
|
|||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes two {
|
||||
0% {
|
||||
top: -100%;
|
||||
|
@ -1382,7 +1469,7 @@ onBeforeMount(async () => {
|
|||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes three {
|
||||
0% {
|
||||
right: -100%;
|
||||
|
@ -1392,7 +1479,7 @@ onBeforeMount(async () => {
|
|||
right: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes four {
|
||||
0% {
|
||||
bottom: -100%;
|
||||
|
@ -1403,7 +1490,6 @@ onBeforeMount(async () => {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.mechanism {
|
||||
background-image: url(@/assets/images/sy/new_ylws.png);
|
||||
background-repeat: no-repeat;
|
||||
|
@ -1948,6 +2034,25 @@ onBeforeMount(async () => {
|
|||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
padding-top: 22px;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
div:nth-child(1) {
|
||||
font-family: PangMenZhengDao, PangMenZhengDao;
|
||||
|
@ -2441,13 +2546,22 @@ table {
|
|||
height: 96px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.jtsyBoxtop {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-bottom: 15px;
|
||||
padding-top: 20px;
|
||||
.jtsyBoxtop1 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
.turn {
|
||||
width: 146px;
|
||||
height: 104px;
|
||||
position: absolute;
|
||||
left: -38px;
|
||||
top: -31px;
|
||||
}
|
||||
span {
|
||||
font-family: TCloudNumber, TCloudNumber;
|
||||
font-weight: 400;
|
||||
|
@ -2490,6 +2604,14 @@ table {
|
|||
justify-content: space-between;
|
||||
.jtsyBoxtop1 {
|
||||
display: flex;
|
||||
position: relative;
|
||||
.turn {
|
||||
width: 146px;
|
||||
height: 104px;
|
||||
position: absolute;
|
||||
left: -38px;
|
||||
top: -31px;
|
||||
}
|
||||
span {
|
||||
font-family: TCloudNumber, TCloudNumber;
|
||||
font-weight: 400;
|
||||
|
@ -2527,5 +2649,4 @@ table {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue