战立标
2 years ago
4 changed files with 410 additions and 3 deletions
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
@ -1,2 +1,119 @@ |
|||||
<!--subpages/statistics/pages/residentPortrait/residentPortrait.wxml--> |
<view class="resident-container"> |
||||
<text>subpages/statistics/pages/residentPortrait/residentPortrait.wxml</text> |
<view class="card"> |
||||
|
<view class="title">居民基本信息</view> |
||||
|
<view class="user-info"> |
||||
|
<view class="name"> |
||||
|
刘萍 13362021000 |
||||
|
<text class="tag red">风险</text> |
||||
|
</view> |
||||
|
<view class="address">XX社区第一网格 四季景苑小区2号楼1单元201</view> |
||||
|
</view> |
||||
|
<view class="table"> |
||||
|
<view class="tr"> |
||||
|
<view class="th">姓名</view> |
||||
|
<view class="th" style="flex:2">与本人关系</view> |
||||
|
<view class="th">性别</view> |
||||
|
<view class="th">年龄</view> |
||||
|
</view> |
||||
|
<view class="tr" wx:for="{{5}}"> |
||||
|
<view class="td">王军</view> |
||||
|
<view class="td" style="flex:2">本人</view> |
||||
|
<view class="td">男</view> |
||||
|
<view class="td">18 <image mode="widthFix" class="table-right-icon" src="../../images/right2.png" /></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="card"> |
||||
|
<view class="title">居民画像</view> |
||||
|
|
||||
|
<view class="portrait"> |
||||
|
<view class="bg"> |
||||
|
<image src="../../images/jmhx_center.png" mode="widthFix"/> |
||||
|
</view> |
||||
|
<view class="tags"> |
||||
|
<view class="tag"> |
||||
|
<view class="text">35岁</view> |
||||
|
</view> |
||||
|
<view class="tag"> |
||||
|
<view class="text">失业 人员</view> |
||||
|
</view> |
||||
|
<view class="tag"> |
||||
|
<view class="text">流动 人员</view> |
||||
|
</view> |
||||
|
<view class="tag"> |
||||
|
<view class="text">月收入5000以下</view> |
||||
|
</view> |
||||
|
<view class="tag"> |
||||
|
<view class="text">专科</view> |
||||
|
</view> |
||||
|
<view class="tag"> |
||||
|
<view class="text">已婚</view> |
||||
|
</view> |
||||
|
<view class="tag"> |
||||
|
<view class="text">男</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="card"> |
||||
|
<view class="title">历史及潜在不满意事项</view> |
||||
|
<view class="num-list"> |
||||
|
<view class="num-item"> |
||||
|
<view class="txt"> |
||||
|
<text>12345投诉</text> |
||||
|
</view> |
||||
|
<view class="num">76</view> |
||||
|
</view> |
||||
|
<view class="num-item"> |
||||
|
<view class="txt"> |
||||
|
<text>省满意度调查</text> |
||||
|
</view> |
||||
|
<view class="num">24</view> |
||||
|
</view> |
||||
|
<view class="num-item"> |
||||
|
<view class="txt"> |
||||
|
<text>社区满意度自查</text> |
||||
|
</view> |
||||
|
<view class="num">13</view> |
||||
|
</view> |
||||
|
<view class="num-item"> |
||||
|
<view class="txt"> |
||||
|
<text>事件未解决 |
||||
|
的次数</text> |
||||
|
</view> |
||||
|
<view class="num">3</view> |
||||
|
</view> |
||||
|
<view class="num-item"> |
||||
|
<view class="txt"> |
||||
|
<text>需求未满足 |
||||
|
的次数</text> |
||||
|
</view> |
||||
|
<view class="num">0</view> |
||||
|
</view> |
||||
|
<view class="num-item"> |
||||
|
<view class="txt"> |
||||
|
<text>应享未享服务 |
||||
|
的次数</text> |
||||
|
</view> |
||||
|
<view class="num">0</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="card"> |
||||
|
<view class="title">回访记录</view> |
||||
|
<view class="log-list"> |
||||
|
<view class="log-item" wx:for="{{2}}"> |
||||
|
<view> |
||||
|
<view class="user"> |
||||
|
<view class="tag blue">电话回访</view> |
||||
|
<view class="name">杨平（网格长）</view> |
||||
|
</view> |
||||
|
<view class="date">2023-08-23</view> |
||||
|
</view> |
||||
|
<image src="../../../images/right.png" mode="widthFix" class="icon"/> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -1 +1,291 @@ |
|||||
/* subpages/statistics/pages/residentPortrait/residentPortrait.wxss */ |
|
||||
|
.resident-container { |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
|
||||
|
page { |
||||
|
background-color: #f7f7f7; |
||||
|
} |
||||
|
|
||||
|
.card { |
||||
|
background: #fff; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 30rpx; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.card .title { |
||||
|
font-size: 34rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-left: -30rpx; |
||||
|
margin-bottom: 39rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.card .title:before { |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
width: 10rpx; |
||||
|
height: 28rpx; |
||||
|
background: #3A80E7; |
||||
|
border-radius: 4rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.user-info .name { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.user-info .address { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 400; |
||||
|
color: #666666; |
||||
|
padding-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.table .tr { |
||||
|
display: flex; |
||||
|
padding: 0 20rpx; |
||||
|
} |
||||
|
|
||||
|
.table .tr .th { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
} |
||||
|
.table .tr .td { |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 500; |
||||
|
color: #666666; |
||||
|
} |
||||
|
.table .tr .th, |
||||
|
.table .tr .td { |
||||
|
flex: 1; |
||||
|
position: relative; |
||||
|
height: 100rpx; |
||||
|
line-height: 100rpx; |
||||
|
} |
||||
|
.table .tr:nth-of-type(2n) { |
||||
|
background: rgba(58, 128, 231, 0.08); |
||||
|
} |
||||
|
|
||||
|
.table-right-icon { |
||||
|
width: 24rpx; |
||||
|
height: 24rpx; |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: calc(50% - 12rpx); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.portrait { |
||||
|
position: relative; |
||||
|
width: 633rpx; |
||||
|
height: 542rpx; |
||||
|
font-size: 30rpx; |
||||
|
font-weight: bold; |
||||
|
color: #3A80E7; |
||||
|
line-height: 36rpx; |
||||
|
} |
||||
|
|
||||
|
.portrait .tag { |
||||
|
position: absolute; |
||||
|
background: #f4f8fe; |
||||
|
padding: 30rpx; |
||||
|
width: 129rpx; |
||||
|
height: 129rpx; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
box-sizing: border-box; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.portrait .tag:after { |
||||
|
content: ""; |
||||
|
display: block; |
||||
|
width: calc(100% - 28rpx); |
||||
|
height: calc(100% - 28rpx); |
||||
|
position: absolute; |
||||
|
left: 14rpx; |
||||
|
top: 14rpx; |
||||
|
background: #d3e3fa; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
.portrait .tag .text { |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
.portrait .tag:nth-of-type(1) { |
||||
|
padding: 38rpx; |
||||
|
width: 163rpx; |
||||
|
height: 163rpx; |
||||
|
left: 227rpx; |
||||
|
top: 0; |
||||
|
} |
||||
|
.portrait .tag:nth-of-type(2) { |
||||
|
padding: 24rpx; |
||||
|
width: 121rpx; |
||||
|
height: 121rpx; |
||||
|
right: 58rpx; |
||||
|
top: 101rpx; |
||||
|
} |
||||
|
.portrait .tag:nth-of-type(3) { |
||||
|
width: 145rpx; |
||||
|
height: 145rpx; |
||||
|
right: 0rpx; |
||||
|
top: 249rpx; |
||||
|
} |
||||
|
.portrait .tag:nth-of-type(4) { |
||||
|
width: 163rpx; |
||||
|
height: 163rpx; |
||||
|
right: 100rpx; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
.portrait .tag:nth-of-type(5) { |
||||
|
left: 99rpx; |
||||
|
bottom: 10rpx; |
||||
|
} |
||||
|
.portrait .tag:nth-of-type(6) { |
||||
|
left: 0rpx; |
||||
|
top: 251rpx; |
||||
|
} |
||||
|
.portrait .tag:nth-of-type(7) { |
||||
|
left: 53rpx; |
||||
|
top: 101rpx; |
||||
|
} |
||||
|
|
||||
|
.bg { |
||||
|
width: 238rpx; |
||||
|
height: 238rpx; |
||||
|
position: absolute; |
||||
|
left: calc(50% - 119rpx); |
||||
|
top: calc(50% - 100rpx); |
||||
|
} |
||||
|
.bg image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.num-list { |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
justify-content: space-between; |
||||
|
position: relative; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
.num-list .num-item { |
||||
|
flex: 0 0 33.333333%; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.num-list .num-item:after { |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
right: 25rpx; |
||||
|
top: calc(50% - 45rpx); |
||||
|
width: 1rpx; |
||||
|
height: 90rpx; |
||||
|
background: #C1C1C1; |
||||
|
opacity: 0.66; |
||||
|
} |
||||
|
|
||||
|
.num-list .num-item:nth-of-type(3n):after { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.num-list .num-item:last-child:after { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.num-list .num-item .txt { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
color: #999999; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.num-list .num-item .num { |
||||
|
font-size: 42rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.tag { |
||||
|
display: inline-block; |
||||
|
line-height: 40rpx; |
||||
|
height: 40rpx; |
||||
|
border-radius: 20rpx; |
||||
|
font-size: 26rpx; |
||||
|
font-weight: 500; |
||||
|
padding: 0 20rpx; |
||||
|
margin-right: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.blue { |
||||
|
background: rgba(79, 148, 255, 0.14); |
||||
|
color: #4F94FF; |
||||
|
} |
||||
|
|
||||
|
.orange { |
||||
|
background: rgba(255, 120, 60, 0.14); |
||||
|
color: #FF783C; |
||||
|
} |
||||
|
|
||||
|
.green { |
||||
|
background: rgba(4, 184, 173, 0.14); |
||||
|
color: #04B8AD; |
||||
|
} |
||||
|
|
||||
|
.red { |
||||
|
color: #FA1919; |
||||
|
background: rgba(255, 48, 27, 0.14); |
||||
|
} |
||||
|
|
||||
|
.log-item { |
||||
|
border-bottom: 1px solid #EAEAEA; |
||||
|
padding: 30rpx 0; |
||||
|
} |
||||
|
|
||||
|
.log-item .user { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.log-item .tag { |
||||
|
margin-right: 17px; |
||||
|
} |
||||
|
|
||||
|
.log-item .icon { |
||||
|
width: 48rpx; |
||||
|
height: 48rpx; |
||||
|
} |
||||
|
|
||||
|
.log-item .name { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.log-item .date { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
color: #C1C1C1; |
||||
|
margin-top: 17rpx; |
||||
|
} |
||||
|
|
||||
|
.log-item { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
Loading…
Reference in new issue