elink-star
/
epmet-work-mp
19
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增居民画像页面

jw-featrue-zhanlibiao
战立标 2 years ago
parent
2b9306d490
commit
cca22c5e2c
4 changed files with 410 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      subpages/statistics/images/jmhx_center.png
  2. BIN
      subpages/statistics/images/right2.png
  3. 121
      subpages/statistics/pages/residentPortrait/residentPortrait.wxml
  4. 292
      subpages/statistics/pages/residentPortrait/residentPortrait.wxss

BIN
subpages/statistics/images/jmhx_center.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
subpages/statistics/images/right2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

121
subpages/statistics/pages/residentPortrait/residentPortrait.wxml
View File

@ -1,2 +1,119 @@
<!--subpages/statistics/pages/residentPortrait/residentPortrait.wxml-->
<text>subpages/statistics/pages/residentPortrait/residentPortrait.wxml</text>
<view class="resident-container">
<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>

292
subpages/statistics/pages/residentPortrait/residentPortrait.wxss
View File

@ -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;
}
Write Preview
Loading…
Cancel
Save