Skip to content

C
civil-front
Commit 306bacd5 by 苏咏卓
Options

更新样式

parent 5c2c836a
Showing with 232 additions and 101 deletions
src/views/unified/tapSwitch/childWelfare.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="24"> </el-col> <el-col :span="24"> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="panel"> <div class="panels">
<div class="wian"> <div class="wian">
<div class="warningInfo" v-if="ChildStatsLek">暂无下级数据</div> <div class="warningInfo" v-if="ChildStatsLek">暂无下级数据</div>
<div class="titleHead">儿童福利机构汇总</div> <div class="titleHead">儿童福利机构汇总</div>
...@@ -915,6 +915,16 @@ export default { ...@@ -915,6 +915,16 @@ export default {
position: relative; position: relative;
margin-bottom: 0.833rem; margin-bottom: 0.833rem;
} }
.panels {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 516px;
}
.wians { .wians {
margin-left: -5rem; margin-left: -5rem;
margin-right: -1rem; margin-right: -1rem;
...@@ -1091,7 +1101,7 @@ export default { ...@@ -1091,7 +1101,7 @@ export default {
height: 60px; height: 60px;
// background: linear-gradient(to right, #204c81, #09225b, #0e2c63); // background: linear-gradient(to right, #204c81, #09225b, #0e2c63);
border-radius: 8px; border-radius: 8px;
margin: 20px auto 0 auto; margin: 60px auto 0 auto;
padding: 5px 0; padding: 5px 0;
} }
.gradientTitle { .gradientTitle {
......
src/views/unified/tapSwitch/population.vue
...@@ -214,7 +214,7 @@ ...@@ -214,7 +214,7 @@
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<br /> <br />
<div class="panel"> <div class="panels">
<div class="wian"> <div class="wian">
<div class="warningInfo" v-if="f == true">暂无下级数据</div> <div class="warningInfo" v-if="f == true">暂无下级数据</div>
<div class="titleHead">殡葬火化统计</div> <div class="titleHead">殡葬火化统计</div>
...@@ -1313,7 +1313,7 @@ export default { ...@@ -1313,7 +1313,7 @@ export default {
height: 60px; height: 60px;
// background: linear-gradient(to right, #204c81, #09225b, #0e2c63); // background: linear-gradient(to right, #204c81, #09225b, #0e2c63);
border-radius: 8px; border-radius: 8px;
margin: 30px auto ; margin: 28px auto ;
padding: 5px 0; padding: 5px 0;
} }
.gradientBoxs { .gradientBoxs {
...@@ -1376,6 +1376,7 @@ export default { ...@@ -1376,6 +1376,7 @@ export default {
.proportion { .proportion {
width: 100%; width: 100%;
height: 380px; height: 380px;
margin-top: 30px;
} }
.annualStatistics { .annualStatistics {
margin-top: 10px; margin-top: 10px;
...@@ -1414,6 +1415,16 @@ export default { ...@@ -1414,6 +1415,16 @@ export default {
margin-bottom: 0.833rem; margin-bottom: 0.833rem;
} }
.panels {
box-sizing: border-box;
border: 2px solid red;
border-image: url('./../../../assets/images/img/border.png') 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 574px;
}
.wians { .wians {
width: 100%; width: 100%;
height: 580px; height: 580px;
......
src/views/unified/tapSwitch/provide.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="24"> </el-col> <el-col :span="24"> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="panel"> <div class="panels">
<div class="wian"> <div class="wian">
<div class="warningInfo" v-if="tionStats">暂无下级数据</div> <div class="warningInfo" v-if="tionStats">暂无下级数据</div>
<div class="titleHead">火化量汇总</div> <div class="titleHead">火化量汇总</div>
...@@ -112,7 +112,7 @@ ...@@ -112,7 +112,7 @@
<!-- 右 --> <!-- 右 -->
<el-col :span="6"> <el-col :span="6">
<div class="panel"> <div class="panelss">
<div class="wians"> <div class="wians">
<div class="wiansInfo"> <div class="wiansInfo">
...@@ -868,6 +868,24 @@ export default { ...@@ -868,6 +868,24 @@ export default {
position: relative; position: relative;
margin-bottom: 0.833rem; margin-bottom: 0.833rem;
} }
.panels {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 516px;
}
.panelss {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 1066px;
}
.wians { .wians {
margin-left: -5rem; margin-left: -5rem;
margin-right: -1rem; margin-right: -1rem;
......
src/views/unified/tapSwitch/socialAssistance.vue
...@@ -14,7 +14,9 @@ ...@@ -14,7 +14,9 @@
<div class="gradientBoxs"> <div class="gradientBoxs">
<div class="gradientTitle">城市低保人数</div> <div class="gradientTitle">城市低保人数</div>
<div class="vertical"></div> <div class="vertical"></div>
<div class="gradientOneNum">{{ getEnjoyNum.cityNum || 0}}</div> <div class="gradientOneNum">
{{ getEnjoyNum.cityNum || 0 }}
</div>
</div> </div>
<div class="gradientBoxs" v-if="getEnjoyNum.cityNumRate != 0"> <div class="gradientBoxs" v-if="getEnjoyNum.cityNumRate != 0">
<div class="gradientTitle">城市低保人数占比</div> <div class="gradientTitle">城市低保人数占比</div>
...@@ -26,7 +28,9 @@ ...@@ -26,7 +28,9 @@
<div class="gradientBoxs"> <div class="gradientBoxs">
<div class="gradientTitle">农村低保人数</div> <div class="gradientTitle">农村低保人数</div>
<div class="vertical"></div> <div class="vertical"></div>
<div class="gradientTwoNum">{{ getEnjoyNum.villageNum || 0}} </div> <div class="gradientTwoNum">
{{ getEnjoyNum.villageNum || 0 }}
</div>
</div> </div>
<div <div
class="gradientBoxs" class="gradientBoxs"
...@@ -35,98 +39,31 @@ ...@@ -35,98 +39,31 @@
<div class="gradientTitle">农村低保人数占比</div> <div class="gradientTitle">农村低保人数占比</div>
<div class="vertical"></div> <div class="vertical"></div>
<div class="gradientTwoNum"> <div class="gradientTwoNum">
{{ getEnjoyNum.villageNumRate || 0}} {{ getEnjoyNum.villageNumRate || 0 }}
</div> </div>
</div> </div>
<div class="gradientBoxs" v-if="num >= 2"> <div class="gradientBoxs" v-if="num >= 2">
<div class="gradientTitle">特困人数</div> <div class="gradientTitle">特困人数</div>
<div class="vertical"></div> <div class="vertical"></div>
<div class="gradientTwoNum"> <div class="gradientTwoNum">
{{ getEnjoyNum.poorNum || 0}} {{ getEnjoyNum.poorNum || 0 }}
</div> </div>
</div> </div>
<div class="gradientBoxs" v-if="num >= 2"> <div class="gradientBoxs" v-if="num >= 2">
<div class="gradientTitle">临时救助人数</div> <div class="gradientTitle">临时救助人数</div>
<div class="vertical"></div> <div class="vertical"></div>
<div class="gradientTwoNum"> <div class="gradientTwoNum">
{{ getEnjoyNum.temporaryNum || 0}} {{ getEnjoyNum.temporaryNum || 0 }}
</div> </div>
</div> </div>
<div class="gradientBoxs" v-if="num >= 2"> <div class="gradientBoxs" v-if="num >= 2">
<div class="gradientTitle">边民</div> <div class="gradientTitle">边民</div>
<div class="vertical"></div> <div class="vertical"></div>
<div class="gradientTwoNum"> <div class="gradientTwoNum">
{{ getEnjoyNum.borderNum || 0}} {{ getEnjoyNum.borderNum || 0 }}
</div>
</div>
</div>
<!-- <div class="provideFlex">
<div class="text">城市低保人数</div>
<div>
<div class="borderBottom"></div>
<div class="textNum">343634</div>
<div class="borderTop"></div>
</div>
<div class="text">个</div>
</div>
<div class="provideFlex">
<div class="text">农村低保人数</div>
<div>
<div class="borderBottom"></div>
<div class="textNum">2488258</div>
<div class="borderTop"></div>
</div>
<div class="text">个</div>
</div> -->
<!-- <div class="display"> -->
<!-- <div>
<div class="flex">
<div class="num">
{{ cityAndvillagePeople.cityToatlNum }}
343634
</div>
<div class="text">人</div>
</div>
<div class="rural">城市</div>
</div> -->
<!-- <div>
<div class="flex">
<div class="nums">
{{ cityAndvillagePeople.villageToatlNum }}
2488258
</div> </div>
<div class="texts">人</div>
</div> </div>
<div class="city">农村</div>
</div> -->
<!-- </div> -->
<!-- <div class="display">
<div>
<div class="flex">
<div class="num">
{{ cityAndvillagePeople.cityToatlNum }}
152435
</div>
<div class="text">户</div>
</div>
<div class="rural">城市</div>
</div> </div>
<div>
<div class="flex">
<div class="nums">
{{ cityAndvillagePeople.villageToatlNum }}
864076
</div>
<div class="texts">户</div>
</div>
<div class="city">农村</div>
</div>
</div> -->
<!-- <div id="fivePeople" class="trend"></div> -->
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -144,14 +81,14 @@ ...@@ -144,14 +81,14 @@
<div class="gradientTitle">城市</div> <div class="gradientTitle">城市</div>
<div class="vertical"></div> <div class="vertical"></div>
<div class="gradientOneNum"> <div class="gradientOneNum">
{{ getEnjoyNum.cityNumRate || 0}} {{ getEnjoyNum.cityNumRate || 0 }}
</div> </div>
</div> </div>
<div class="gradientBox"> <div class="gradientBox">
<div class="gradientTitle">农村</div> <div class="gradientTitle">农村</div>
<div class="vertical"></div> <div class="vertical"></div>
<div class="gradientTwoNum"> <div class="gradientTwoNum">
{{ getEnjoyNum.villageNumRate || 0}} {{ getEnjoyNum.villageNumRate || 0 }}
</div> </div>
</div> </div>
</div> </div>
...@@ -161,13 +98,6 @@ ...@@ -161,13 +98,6 @@
</el-col> </el-col>
</el-row> </el-row>
<br /> <br />
<!-- <el-row :gutter="20">
<el-col :span="24">
<div class="wian">
</div>
</el-col>
</el-row> -->
</el-col> </el-col>
<!-- 中 --> <!-- 中 -->
...@@ -216,7 +146,7 @@ ...@@ -216,7 +146,7 @@
<br /> <br />
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24"> <el-col :span="24">
<div class="panel"> <div class="panels">
<div class="wian"> <div class="wian">
<div class="warningInfo" v-if="c == true">暂无下级数据</div> <div class="warningInfo" v-if="c == true">暂无下级数据</div>
<div class="titleHead matop10">城市农村低保人数统计</div> <div class="titleHead matop10">城市农村低保人数统计</div>
...@@ -225,11 +155,23 @@ ...@@ -225,11 +155,23 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="panels">
<div class="wian">
<div class="warningInfo" v-if="c == true">暂无下级数据</div>
<div class="titleHead matop10">城市农村低保人数占比统计</div>
<div id="ruralAndcitys" class="ruralAndcity"></div>
</div>
</div>
</el-col>
</el-row>
</el-col> </el-col>
<!-- 右 --> <!-- 右 -->
<el-col :span="6"> <el-col :span="6">
<div class="panel"> <div class="panelss">
<div class="wians"> <div class="wians">
<div class="wiansInfo"> <div class="wiansInfo">
<div class="titleHead ma20"> <div class="titleHead ma20">
...@@ -341,7 +283,7 @@ export default { ...@@ -341,7 +283,7 @@ export default {
tableData: [], tableData: [],
pageInfo: { pageInfo: {
page: 1, page: 1,
size: 14, size: 20,
total: 0, total: 0,
}, },
loading: true, loading: true,
...@@ -435,6 +377,7 @@ export default { ...@@ -435,6 +377,7 @@ export default {
} }
this.c = false; this.c = false;
this.ruralAndcityFun(); this.ruralAndcityFun();
this.ruralAndcitysFun()
}); });
}, },
...@@ -613,7 +556,7 @@ export default { ...@@ -613,7 +556,7 @@ export default {
var option; var option;
option = { option = {
backgroundColor:"rgba(128, 128, 128, 0)", backgroundColor: "rgba(128, 128, 128, 0)",
titleHead: {}, titleHead: {},
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
...@@ -916,6 +859,98 @@ export default { ...@@ -916,6 +859,98 @@ export default {
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
ruralAndcitysFun() {
var chartDom = document.getElementById("ruralAndcitys");
var myChart = echarts.init(chartDom, "dark");
var option;
option = {
backgroundColor: "rgba(128, 128, 128, 0)",
title: {
text: "",
},
tooltip: {
trigger: "axis",
},
legend: {
data: [
"城市低保总人数百分比",
"农村低保总人数百分比",
],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
axisTick: { show: false },
data: this.getAreaUnderNumStats.areaList,
axisLabel: {
textStyle: {
color: "#FFFFFF",
fontSize: 10,
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#1b3383",
},
},
},
],
yAxis: [
{
type: "value",
axisLabel: {
textStyle: {
color: "#FFFFFF",
fontSize: 12,
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#1b3383",
},
},
},
],
series: [
{
name: "城市低保总人数百分比",
type: "line",
stack: "总量",
data: this.getAreaUnderNumStats.cityNumRateList,
},
{
name: "农村低保总人数百分比",
type: "line",
stack: "总量",
data: this.getAreaUnderNumStats.villageNumRateList,
},
],
};
option && myChart.setOption(option);
},
}, },
mounted() { mounted() {
// setTimeout(() => { // setTimeout(() => {
...@@ -977,7 +1012,8 @@ export default { ...@@ -977,7 +1012,8 @@ export default {
.trend { .trend {
width: 100%; width: 100%;
height: 300px; height: 340px;
margin-top: 60px;
} }
.annualStatistics { .annualStatistics {
margin-top: 10px; margin-top: 10px;
...@@ -1025,7 +1061,7 @@ export default { ...@@ -1025,7 +1061,7 @@ export default {
.ma20 { .ma20 {
margin-left: 20px; margin-left: 20px;
} }
.matop10{ .matop10 {
margin-bottom: 20px; margin-bottom: 20px;
} }
.wian { .wian {
...@@ -1040,6 +1076,27 @@ export default { ...@@ -1040,6 +1076,27 @@ export default {
border-width: 2.125rem 1.583rem 0.875rem 5.5rem; border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative; position: relative;
margin-bottom: 0.833rem; margin-bottom: 0.833rem;
height: 690px;
}
.panels {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 400px;
}
.panelss {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 1412px;
} }
.wians { .wians {
...@@ -1061,7 +1118,6 @@ export default { ...@@ -1061,7 +1118,6 @@ export default {
border: 1px solid #1a6295; border: 1px solid #1a6295;
} }
.wiansInfo { .wiansInfo {
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
} }
...@@ -1118,7 +1174,7 @@ export default { ...@@ -1118,7 +1174,7 @@ export default {
.ruralAndcity { .ruralAndcity {
width: 100%; width: 100%;
height: 360px; height: 300px;
} }
.returnInfos { .returnInfos {
......
src/views/unified/tapSwitch/socialOrganization.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="24"> </el-col> <el-col :span="24"> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="panel"> <div class="panels">
<div class="wian"> <div class="wian">
<div class="warningInfo" v-if="ganStats">暂无下级数据</div> <div class="warningInfo" v-if="ganStats">暂无下级数据</div>
<div class="titleHead">社会组织汇总</div> <div class="titleHead">社会组织汇总</div>
...@@ -197,7 +197,7 @@ ...@@ -197,7 +197,7 @@
<!-- 右 --> <!-- 右 -->
<el-col :span="6"> <el-col :span="6">
<div class="panel"> <div class="panelss">
<div class="wians"> <div class="wians">
<div class="wiansInfo"> <div class="wiansInfo">
<div class="titleHead ma20"> <div class="titleHead ma20">
...@@ -981,6 +981,24 @@ height: 30px; ...@@ -981,6 +981,24 @@ height: 30px;
position: relative; position: relative;
margin-bottom: 0.833rem; margin-bottom: 0.833rem;
} }
.panels {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 500px;
}
.panelss {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 1056px;
}
.wians { .wians {
margin-left: -5rem; margin-left: -5rem;
margin-right: -1rem; margin-right: -1rem;
......
src/views/unified/tapSwitch/subsidies.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="24"> </el-col> <el-col :span="24"> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="panel"> <div class="panels">
<div class="wian"> <div class="wian">
<div class="warningInfo" v-if="IssueStats">暂无下级数据</div> <div class="warningInfo" v-if="IssueStats">暂无下级数据</div>
<div class="titleHead">三年贫困残疾资金发放</div> <div class="titleHead">三年贫困残疾资金发放</div>
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
<!-- 右 --> <!-- 右 -->
<el-col :span="6"> <el-col :span="6">
<div class="panel"> <div class="panelss">
<div class="wians"> <div class="wians">
<div class="wiansInfo"> <div class="wiansInfo">
<div class="titleHead ma20"> <div class="titleHead ma20">
...@@ -830,7 +830,7 @@ export default { ...@@ -830,7 +830,7 @@ export default {
} }
.trend { .trend {
width: 100%; width: 100%;
height: 200px; height: 300px;
} }
.annualStatistics { .annualStatistics {
margin-top: 10px; margin-top: 10px;
...@@ -895,6 +895,24 @@ export default { ...@@ -895,6 +895,24 @@ export default {
position: relative; position: relative;
margin-bottom: 0.833rem; margin-bottom: 0.833rem;
} }
.panels {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 530px;
}
.panelss {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 1076px;
}
.wians { .wians {
margin-left: -5rem; margin-left: -5rem;
margin-right: -1rem; margin-right: -1rem;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment