执法端统计分析UI修改

src/views/enforce/comprehensiveAnalysis.vue

@@ -89,7 +89,9 @@
         <span class="number_percent" v-else>-</span>
       </div>
     </div>
-    <h3 class="card_tit">企业类别</h3>
+
+    <van-tabs v-model:active="active">
+      <van-tab title="企业类别">
         <div class="count_wrap ent_cate">
           <div class="count_item" v-for="item in data.whole.companyOrgTypeList">
             <label>{{ item.companyOrgType }}</label>
@@ -98,7 +100,8 @@
             <span class="number_percent" v-else>-</span>
           </div>
         </div>
-    <h3 class="card_tit">投诉类别</h3>
+      </van-tab>
+      <van-tab title="投诉类别">
         <div class="count_wrap com_cate">
           <div class="count_item" v-for="item in data.whole.complaintTypeList">
             <label>{{ item.complaintType }}</label>
@@ -107,6 +110,27 @@
             <span class="number_percent" v-else>-</span>
           </div>
         </div>
+      </van-tab>
+    </van-tabs>
+
+    <!-- <h3 class="card_tit">企业类别</h3>
+    <div class="count_wrap ent_cate">
+      <div class="count_item" v-for="item in data.whole.companyOrgTypeList">
+        <label>{{ item.companyOrgType }}</label>
+        <span class="number_count">{{item.companyOrgTypeNumber}}</span>
+        <span class="number_percent" v-if="item.percentage!=null&&item.percentage!=0">{{item.percentage}}<i>%</i></span>
+        <span class="number_percent" v-else>-</span>
+      </div>
+    </div> -->
+    <!-- <h3 class="card_tit">投诉类别</h3>
+    <div class="count_wrap com_cate">
+      <div class="count_item" v-for="item in data.whole.complaintTypeList">
+        <label>{{ item.complaintType }}</label>
+        <span class="number_count">{{item.complaintTotal}}</span>
+        <span class="number_percent" v-if="item.percentage!=null&&item.percentage!=0">{{item.percentage}}<i>%</i></span>
+        <span class="number_percent" v-else>-</span>
+      </div>
+    </div> -->
   </div>
 </div>
 </body>
@@ -375,8 +399,8 @@ body {
   float: right;
   display: flex;
   justify-content: space-around;
-  margin: 3% 2% 5%;
+  margin: 3% 3% 5%;
-  padding: 0.5% 1%;
+  padding: 0.5% 0.1%;
   min-width: 50%;
   background: #f2f3f4;
   border-radius: 1rem;
@@ -384,7 +408,7 @@ body {
   font-size: 0.3rem;
 }
 .time_select span {
-  padding: 1% 4%;
+  padding: 1.5% 5%;
   white-space: nowrap;
 }
 .time_select span.active {
@@ -394,8 +418,8 @@ body {
 }
 .inspact_card {
   display: table;
-  margin: 1% 2% 3.5%;
+  margin: 1% 2.75% 3.5%;
-  width: 96%;
+  width: 94.5%;
   height: 5rem;
   background: url(../../assets/images/bg_analy_v4.jpg) no-repeat;
   background-size: 100% 100%;
@@ -518,7 +542,7 @@ body {
   display: inline-flex;
   margin: 5.5% 5% 5%;
   width: 90%;
-  color: #4c4c4c;
+  color: #666;
   text-align: left;
 }
 .number_count {
@@ -547,4 +571,15 @@ body {
   background: url(../../assets/images/bg_analy_card_2.jpg) no-repeat;
   background-size: cover;
 }
+.van-tabs__nav {
+    justify-content: flex-start !important;
+    width: 40% !important;
+}
+.van-tab {
+    font-size: 0.35rem !important;
+}
+.van-tabs__line {
+    bottom: 0.6rem !important;
+    width: 35% !important;
+}
 </style>