修改样式

components/Tabs/index.js

@@ -9,10 +9,11 @@ Component({
     },
     methods: {
         tabChange(e) {
+            let index = e.currentTarget.dataset.index
             this.setData({
-                cur: e.currentTarget.dataset.index
+                cur: index
             })
-            this.triggerEvent("tabChange",e.currentTarget.dataset.index)
+            this.triggerEvent("tabChange",{index})
         }
     }
 });

pages/statistics/modules/CrowdPortrait/CrowdPortrait.wxml

@@ -1,5 +1,44 @@
-<Tabs tabList="{{tabList}}" bind:tabChange="tabChange" />
+<Tabs tabList="{{tabList}}" bind:tabChange="tabChange"/>
 <view class="sub-tit">
-    <image src="../../../../images/statistics/sub-tit.png" mode="widthFix" />
+    <image src="../../../../images/statistics/sub-tit.png" mode="widthFix"/>
     <text>不满意人员画像</text>
 </view>
+<picker>
+    <view class="picker">
+        基础教育 
+        <image src="../../../../images/statistics/arrow_down.png" mode="widthFix" style="width:20rpx;height:12rpx;"></image>
+    </view>
+</picker>
+<view class="portrait">
+    <view class="bg">
+        <image src="../../../../images/statistics/hx_bg.png" mode="widthFix"/>
+    </view>
+    <view class="tags">
+        <view class="tag">
+            <view class="text">第一网格</view>
+        </view>
+        <view class="tag">
+            <view class="text">30-40岁</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 class="btn">
+    <text>按画像匹配到同类：570人</text>
+    <image src="../../../../images/statistics/btn_right.png" mode="widthFix"/>
+</view>

pages/statistics/modules/CrowdPortrait/CrowdPortrait.wxss

@@ -7,8 +7,128 @@
     align-items: center;
     margin: 30rpx 0;
 }
+
 .sub-tit image {
     margin-right: 12rpx;
     width: 20rpx;
     height: 20rpx;
 }
+
+.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: 277rpx;
+    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;
+}
+.btn {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 30rpx;
+    font-weight: 500;
+    color: #333333;
+    line-height: 42rpx;
+    background: #F1F6FF;
+    border: 1px solid #3A80E7;
+    border-radius: 20rpx;
+    padding: 25rpx 30rpx;
+    margin-top: 50rpx;
+}
+.btn image {
+    width: 30rpx;
+    height: 30rpx;
+}
+.bg {
+    width: 384rpx;
+    height: 348rpx;
+    position: absolute;
+    left: calc(50% - 192rpx);
+    top: calc(50% - 174rpx);
+}
+.bg image {
+    width: 100%;
+    height: 100%;
+}
+.picker {
+    width: 180rpx;
+    background: #3A80E7;
+    border-radius: 27rpx;
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #FFFFFF;
+    padding: 15rpx 21rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

pages/statistics/statistics.js

@@ -31,5 +31,10 @@ Page({
         this.setData({
             monthIndex: index
         })
+    },
+    gotopage() {
+        wx.navigateTo({
+            url: '/pages/login/login',
+        })
     }
 })

pages/statistics/statistics.json

@@ -6,7 +6,7 @@
         "SmyddcSqmydzc": "./modules/SmyddcSqmydzc/SmyddcSqmydzc",
         "HotlineComplaints": "./modules/HotlineComplaints/HotlineComplaints",
         "EventPrediction": "./modules/EventPrediction/EventPrediction",
-        "CrowdPortrait": "./modules/CrowdPortrait/CrowdPortrait"
+        "CrowdPortrait": "./modules/CrowdPortrait/CrowdPortrait",
         "custom-tab-bar":"../../components/custom-tab-bar"
      }
 }

pages/statistics/statistics.wxml

@@ -1,5 +1,4 @@
 <Head/>
-<custom-tab-bar></custom-tab-bar>
 <view class="statistics-container">
     <view class="card">
         <view class="title">不满意事项趋势分析</view>
@@ -10,8 +9,8 @@
     <view class="card">
         <view class="title">
             <text>不满意事项类型分析</text>
-            <view class="view">查看
-                <image mode="widthFix" src="../../images/right.png"></image>
+            <view class="view" bind:tap="gotopage">
+                查看 <image mode="widthFix" src="../../images/right.png"></image>
             </view>
         </view>
 
@@ -52,3 +51,4 @@
         <CrowdPortrait/>
     </view>
 </view>
+<custom-tab-bar></custom-tab-bar>