145 lines
2.9 KiB
Vue
145 lines
2.9 KiB
Vue
<template>
|
|
<section class="SelectUser">
|
|
|
|
<div class="select-content">
|
|
<div class="area-flex">
|
|
<p class="title">地区</p>
|
|
<AiAreaPicker v-model="areaId" :name.sync="areaName">
|
|
<div flex>
|
|
<AiMore v-model="areaName" icon="arrow-down"/>
|
|
</div>
|
|
</AiAreaPicker>
|
|
</div>
|
|
<div class="type-content">
|
|
<p class="title">选择标签</p>
|
|
<div class="type-list">
|
|
<p>重点人群</p>
|
|
<div class="list">
|
|
<div class="item active">残疾人</div>
|
|
<div class="item">务工人员</div>
|
|
</div>
|
|
<p>重点人群</p>
|
|
<div class="list">
|
|
<div class="item active">残疾人</div>
|
|
<div class="item">务工人员</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-144"></div>
|
|
<div class="footer">
|
|
<div class="confirm">确定</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<script>
|
|
import {mapState} from 'vuex'
|
|
|
|
export default {
|
|
name: "SelectUser",
|
|
data() {
|
|
return {
|
|
value: '',
|
|
areaId: '',
|
|
areaName: ''
|
|
}
|
|
},
|
|
computed: {...mapState(['user'])},
|
|
methods: {
|
|
|
|
},
|
|
onShow() {
|
|
document.title = '人员选择'
|
|
},
|
|
created() {
|
|
this.areaId = this.user.areaId
|
|
this.areaName = this.user.areaName
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.SelectUser {
|
|
.select-content{
|
|
background-color: #fff;
|
|
.area-flex{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 34px 32px;
|
|
line-height: 44px;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
.title{
|
|
line-height: 44px;
|
|
margin-bottom: 16px;
|
|
font-size: 32px;
|
|
color: #666;
|
|
}
|
|
.local-icon{
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-right: 4px;
|
|
}
|
|
.AiAreaPicker{
|
|
margin-bottom: 24px;
|
|
}
|
|
.type-content{
|
|
padding: 34px 32px;
|
|
}
|
|
.type-list{
|
|
padding-left: 16px;
|
|
margin-top: 32px;
|
|
p{
|
|
line-height: 44px;
|
|
margin-bottom: 24px;
|
|
font-size: 30px;
|
|
color: #666;
|
|
}
|
|
.list{
|
|
overflow: hidden;
|
|
margin-bottom: 32px;
|
|
.item{
|
|
width: 150px;
|
|
line-height: 68px;
|
|
float: left;
|
|
text-align: center;
|
|
border-radius: 34px;
|
|
border: 1px solid #ddd;
|
|
margin: 0 16px 16px 0;
|
|
font-size: 30px;
|
|
}
|
|
.active{
|
|
background-color: #3192F4;
|
|
border: 1px solid #3192F4;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bg-144{
|
|
height: 144px;
|
|
}
|
|
.footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 112px;
|
|
line-height: 112px;
|
|
background: #fff;
|
|
display: flex;
|
|
font-size: 36px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
.confirm {
|
|
color: #fff;
|
|
background: #1365dd;
|
|
}
|
|
div {
|
|
flex: 1;
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|