| | |
| | | <caption-row title="社区概况"></caption-row> |
| | | <view class="cell flex j-c-s-b flex-wrap"> |
| | | <view class="cell-item bgc-ff" v-for="i in 6"> |
| | | |
| | | |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | |
| | | <view class=""> |
| | | <caption-row title="共治人员"></caption-row> |
| | | <view class="menu"> |
| | | <u-grid :border="true"> |
| | | <u-grid-item v-for="i in 6" bgColor="#fff"> |
| | | <u-grid-item v-for="i in 6" bgColor="#fff"> |
| | | <view class="menu-item flex f-d-c a-i-c"> |
| | | <text class="c-main f-32 fw">1</text> |
| | | <text class="f-28">党员</text> |
| | |
| | | </u-grid> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class=""> |
| | | |
| | | <!-- <view class=""> |
| | | <caption-row title="人员画像"></caption-row> |
| | | </view> --> |
| | | <view class=""> |
| | | <caption-row title="社区事件"></caption-row> |
| | | <view class="block"> |
| | | <view class="block-caption f-28 fw"> |
| | | 总体统计 |
| | | </view> |
| | | |
| | | |
| | | <u-grid :border="true"> |
| | | <u-grid-item v-for="i in 3" bgColor="#fff"> |
| | | <view class="grid-item flex f-d-c a-i-c"> |
| | | <text class="f-30 fw c-main mb-20">20</text> |
| | | <text class="f-28">事件总数</text> |
| | | </view> |
| | | </u-grid-item> |
| | | </u-grid> |
| | | |
| | | </view> |
| | | <view class="block"> |
| | | <view class="block-caption f-28 fw"> |
| | | 事件分类 |
| | | </view> |
| | | <view class="flex j-c-s-b a-i-c"> |
| | | <view class="report-item" v-for="(item,index) in reportData" :key="index"> |
| | | <image class="report-item-bg" :src="item.bg" mode="right"></image> |
| | | <view class="report-item-inner flex f-d-c j-c-c a-i-c"> |
| | | <text class="f-30">{{item.num}}</text> |
| | | <text class="f-28">{{item.title}}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | </view> |
| | | |
| | | |
| | | </view> |
| | | </template> |
| | | |
| | |
| | | export default { |
| | | components: { |
| | | captionRow |
| | | }, |
| | | data(){ |
| | | return{ |
| | | reportData:[ |
| | | { |
| | | title:"矛盾纠纷", |
| | | num:1, |
| | | bg:"/static/icon/nav-bg-08.png" |
| | | }, |
| | | { |
| | | title:"公共维护", |
| | | num:1, |
| | | bg:"/static/icon/nav-bg-06.png" |
| | | }, |
| | | { |
| | | title:"居家维修", |
| | | num:1, |
| | | bg:"/static/icon/nav-bg-07.png" |
| | | }, |
| | | { |
| | | title:"投诉举报", |
| | | num:1, |
| | | bg:"/static/icon/nav-bg-09.png" |
| | | } |
| | | ] |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | margin-bottom: 20rpx; |
| | | } |
| | | } |
| | | .menu{ |
| | | |
| | | .menu { |
| | | padding: 20rpx 0; |
| | | .menu-item{ |
| | | |
| | | .menu-item { |
| | | padding: 20rpx 0; |
| | | } |
| | | } |
| | | .block{ |
| | | padding:20rpx 0; |
| | | .block-caption{ |
| | | padding:20rpx 0; |
| | | } |
| | | .grid-item{ |
| | | padding:30px 0; |
| | | } |
| | | } |
| | | .report-item{ |
| | | position: relative; |
| | | } |
| | | .report-item,.report-item-bg,.report-item-inner{ |
| | | width:168rpx; |
| | | height:190rpx; |
| | | border-radius: 10rpx; |
| | | } |
| | | .report-item-inner{ |
| | | position: absolute; |
| | | top:0; |
| | | left:0; |
| | | } |
| | | </style> |