Skip to content

C
civil-front
Commit fe4104d1 by 李耀锟
Options

年份选择

parent ffa7be60
Showing with 252 additions and 97 deletions
src/views/unified/tapSwitch/marriage.vue
<template>
<div>
<br />
<br />
<el-row :gutter="18">
<!--左 -->
<el-col :span="6">
......@@ -7,16 +10,32 @@
<el-col :span="24"> </el-col>
<el-col :span="24">
<div class="wian">
<img src="./../../../assets/images/01-左上角.png" alt="" class="topLeft">
<img src="./../../../assets/images/02-右上角.png" alt="" class="topRight">
<img src="./../../../assets/images/03-左下角.png" alt="" class="lowerLeft">
<img src="./../../../assets/images/04-右下角.png" alt="" class="lowerRight">
<img
src="./../../../assets/images/01-左上角.png"
alt=""
class="topLeft"
/>
<img
src="./../../../assets/images/02-右上角.png"
alt=""
class="topRight"
/>
<img
src="./../../../assets/images/03-左下角.png"
alt=""
class="lowerLeft"
/>
<img
src="./../../../assets/images/04-右下角.png"
alt=""
class="lowerRight"
/>
<div class="title">婚姻统计</div>
<div class="socialOrganizationFlex">
<div class="text">共</div>
<div>
<div class="borderBottom"></div>
<div class="yellowNums">{{marriageLine.iaTotalNum}}</div>
<div class="yellowNums">{{ marriageLine.iaTotalNum }}</div>
<div class="borderTop"></div>
</div>
<div class="text">个</div>
......@@ -29,14 +48,35 @@
<el-row :gutter="20">
<el-col :span="24">
<div class="wian">
<img src="./../../../assets/images/01-左上角.png" alt="" class="topLeft">
<img src="./../../../assets/images/02-右上角.png" alt="" class="topRight">
<img src="./../../../assets/images/03-左下角.png" alt="" class="lowerLeft">
<img src="./../../../assets/images/04-右下角.png" alt="" class="lowerRight">
<img
src="./../../../assets/images/01-左上角.png"
alt=""
class="topLeft"
/>
<img
src="./../../../assets/images/02-右上角.png"
alt=""
class="topRight"
/>
<img
src="./../../../assets/images/03-左下角.png"
alt=""
class="lowerLeft"
/>
<img
src="./../../../assets/images/04-右下角.png"
alt=""
class="lowerRight"
/>
<div class="title">婚姻统计</div>
<div class="marriageStatistics">
<div class="flexBox">
<!-- <div class="imgBox"></div> -->
<img
src="./../../../assets/images/01-结婚总数.png"
alt=""
class="marriageImg"
/>
<div>
<div class="marriedNum">结婚总数(对)</div>
<div class="yellowNum">{{ marriageStats.marryNum }}</div>
......@@ -44,6 +84,11 @@
</div>
<div class="flexBox">
<!-- <div class="imgBox"></div> -->
<img
src="./../../../assets/images/02-离婚总数.png"
alt=""
class="marriageImg"
/>
<div>
<div class="marriedNum">申请离婚(对)</div>
<div class="yellowNum">
......@@ -53,6 +98,11 @@
</div>
<div class="flexBox">
<!-- <div class="imgBox"></div> -->
<img
src="./../../../assets/images/03-申请离婚-确定离婚.png"
alt=""
class="marriageImg"
/>
<div>
<div class="marriedNum">成功离婚(对)</div>
<div class="yellowNum">{{ marriageStats.divorceNum }}</div>
......@@ -60,6 +110,11 @@
</div>
<div class="flexBox">
<!-- <div class="imgBox"></div> -->
<img
src="./../../../assets/images/04-跨地区结婚-离婚.png"
alt=""
class="marriageImg"
/>
<div>
<div class="marriedNum">跨地区结婚/离婚</div>
<div class="yellowNum">
......@@ -79,11 +134,43 @@
<el-row :gutter="20">
<el-col :span="24"
><div class="wians">
<img src="./../../../assets/images/01-左上角.png" alt="" class="topLeft">
<img src="./../../../assets/images/02-右上角.png" alt="" class="topRight">
<img src="./../../../assets/images/03-左下角.png" alt="" class="lowerLeft">
<img src="./../../../assets/images/04-右下角.png" alt="" class="lowerRight">
<div class="title">当前选择：广西全区</div>
<img
src="./../../../assets/images/01-左上角.png"
alt=""
class="topLeft"
/>
<img
src="./../../../assets/images/02-右上角.png"
alt=""
class="topRight"
/>
<img
src="./../../../assets/images/03-左下角.png"
alt=""
class="lowerLeft"
/>
<img
src="./../../../assets/images/04-右下角.png"
alt=""
class="lowerRight"
/>
<div class="title">
当前选择：广西全区
<el-select
v-model="value"
size="mini"
placeholder="选择年份"
style="width: 100px"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="marriageMap" id="marriageMap"></div>
<a class="returnInfos" @click="returnInfo">返回上一级</a>
</div>
......@@ -93,10 +180,26 @@
<el-row :gutter="20">
<el-col :span="24"
><div class="wianss">
<img src="./../../../assets/images/01-左上角.png" alt="" class="topLeft">
<img src="./../../../assets/images/02-右上角.png" alt="" class="topRight">
<img src="./../../../assets/images/03-左下角.png" alt="" class="lowerLeft">
<img src="./../../../assets/images/04-右下角.png" alt="" class="lowerRight">
<img
src="./../../../assets/images/01-左上角.png"
alt=""
class="topLeft"
/>
<img
src="./../../../assets/images/02-右上角.png"
alt=""
class="topRight"
/>
<img
src="./../../../assets/images/03-左下角.png"
alt=""
class="lowerLeft"
/>
<img
src="./../../../assets/images/04-右下角.png"
alt=""
class="lowerRight"
/>
<div class="title">年度按月份统计</div>
<div id="annualStatistics" class="annualStatistics"></div>
</div>
......@@ -106,61 +209,68 @@
<!-- 右 -->
<el-col :span="6">
<div class="wiansInfoS">
<img src="./../../../assets/images/01-左上角.png" alt="" class="topLeft">
<img src="./../../../assets/images/02-右上角.png" alt="" class="topRight">
<img src="./../../../assets/images/03-左下角.png" alt="" class="lowerLeft">
<img src="./../../../assets/images/04-右下角.png" alt="" class="lowerRight">
<div class="wiansInfo">
<div class="title">婚姻统计</div>
<el-input
type="text"
placeholder="身份证或者姓名查询"
class="input"
v-model="value"
@change="inputBtn"
suffix-icon="el-icon-search"
/>
<!-- <i class="el-icon-search" @click="marriageSearchFun"></i> -->
<el-table
:data="tableData"
stripe
style="width: 100%; background-color: #051d3f; color: #2177b9"
:header-cell-style="{ background: '#082C61', color: '#DAD7DB' }"
:cell-style="{ background: '#082C61', color: '#DAD7DB' }"
<div class="wiansInfoS">
<img
src="./../../../assets/images/01-左上角.png"
alt=""
class="topLeft"
/>
<img
src="./../../../assets/images/02-右上角.png"
alt=""
class="topRight"
/>
<img
src="./../../../assets/images/03-左下角.png"
alt=""
class="lowerLeft"
/>
<img
src="./../../../assets/images/04-右下角.png"
alt=""
class="lowerRight"
/>
<div class="wiansInfo">
<div class="title">婚姻统计</div>
<el-input
type="text"
placeholder="身份证或者姓名查询"
class="input"
v-model="value"
@change="inputBtn"
suffix-icon="el-icon-search"
/>
<!-- <i class="el-icon-search" @click="marriageSearchFun"></i> -->
<el-table
:data="tableData"
stripe
style="width: 100%; background-color: #051d3f; color: #2177b9"
:header-cell-style="{ background: '#082C61', color: '#DAD7DB' }"
:cell-style="{ background: '#082C61', color: '#DAD7DB' }"
>
<el-table-column
type="index"
label="序号"
align="center"
width="50px"
>
<el-table-column
type="index"
label="序号"
align="center"
width="50px"
>
</el-table-column>
<el-table-column
prop="manName"
label="名称"
align="center"
width="50px"
>
</el-table-column>
<el-table-column
prop="manDomicile"
label="所在地"
align="center"
>
</el-table-column>
<el-table-column prop="address" label="婚姻状况" align="center">
</el-table-column>
<el-table-column
prop="registerDate"
label="时间"
align="center"
>
</el-table-column>
</el-table>
</div>
</div>
</el-table-column>
<el-table-column
prop="manName"
label="名称"
align="center"
width="50px"
>
</el-table-column>
<el-table-column prop="manDomicile" label="所在地" align="center">
</el-table-column>
<el-table-column prop="address" label="婚姻状况" align="center">
</el-table-column>
<el-table-column prop="registerDate" label="时间" align="center">
</el-table-column>
</el-table>
</div>
</div>
</el-col>
<!-- <br />
<el-row :gutter="20">
......@@ -189,6 +299,28 @@ export default {
marriageStats: {},
areaUnderMarriageStatsList: {},
value: "",
options: [
{
value: "选项1",
label: "黄金糕",
},
{
value: "选项2",
label: "双皮奶",
},
{
value: "选项3",
label: "蚵仔煎",
},
{
value: "选项4",
label: "龙须面",
},
{
value: "选项5",
label: "北京烤鸭",
},
],
};
},
created() {
......@@ -697,29 +829,52 @@ export default {
</script>
<style lang="scss" scoped>
.lowerLeft{
position:absolute;
width: 10px;
.qqq {
width: 20px;
}
::v-deep {
.el-input__inner {
background-color: #051d3f;
color: #fff;
border: none;
}
.el-select-dropdown {
background-color: #051d3f;
border: none;
}
input::-webkit-input-placeholder {
color: #fff;
}
}
.marriageImg {
width: 60px;
height: 60px;
}
.lowerLeft {
position: absolute;
width: 10px;
height: 10px;
left: -2px;
bottom: -2px;
left: -2px;
bottom: -2px;
}
.lowerRight{
position:absolute;
.lowerRight {
position: absolute;
width: 10px;
height: 10px;
right: -2px;
bottom: -2px;
}
.topLeft{
position:absolute;
.topLeft {
position: absolute;
width: 10px;
height: 10px;
top: -2px;
left: -2px;
}
.topRight{
position:absolute;
.topRight {
position: absolute;
width: 10px;
height: 10px;
top: -2px;
......@@ -746,6 +901,8 @@ bottom: -2px;
.flexBox {
display: flex;
margin: 20px auto;
width: 80%;
}
.imgBox {
......@@ -759,7 +916,7 @@ bottom: -2px;
.marriedNum {
font-size: 16px;
color: #fff;
margin-top: 40px;
margin-top: 15px;
margin-left: 20px;
}
......@@ -777,7 +934,7 @@ bottom: -2px;
.wian {
position: relative;
border: 1px solid #1A6295;
border: 1px solid #1a6295;
width: 100%;
height: 400px;
background-color: #082c61;
......@@ -785,7 +942,7 @@ bottom: -2px;
.wians {
position: relative;
border: 1px solid #1A6295;
border: 1px solid #1a6295;
width: 100%;
height: 500px;
background-color: #082c61;
......@@ -793,19 +950,17 @@ bottom: -2px;
.wianss {
position: relative;
border: 1px solid #1A6295;
border: 1px solid #1a6295;
width: 100%;
height: 300px;
background-color: #082c61;
}
.wiansInfoS{
.wiansInfoS {
position: relative;
border: 1px solid #1A6295;
width: 100%;
border: 1px solid #1a6295;
width: 100%;
}
.wiansInfo {
height: 818px;
background-color: #082c61;
overflow: hidden;
......
src/views/unified/tapSwitch/population.vue
......@@ -31,11 +31,11 @@
<div class="title">婚姻登记分析</div>
<el-row :gutter="20" justify="center">
<el-col :span="12">
<el-row>
<el-col :span="6" :offset="2">
<el-row justify="center">
<el-col :span="6" >
<!-- <div class="marriageImg"></div> -->
</el-col>
<el-col :span="16">
<el-col :span="24">
<div class="marriageNum">
<div class="size16">结婚总数(对)</div>
<div class="size16">{{ marriageStats.marryNum }}</div>
......@@ -48,7 +48,7 @@
<el-col :span="6">
<!-- <div class="marriageImg"></div> -->
</el-col>
<el-col :span="18">
<el-col :span="24">
<div class="marriageNum">
<div class="size16">离婚总数(对)</div>
<div class="size16">
......@@ -1185,7 +1185,7 @@ export default {
background-color: blanchedalmond;
}
.marriageNum {
text-align: left;
text-align: center;
color: #fff;
margin-top: 20px;
margin-left: 10px;
......
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