根据ui图调整页面样式

src/view/memberGroup/memberGroupDetail.vue

@@ -3,11 +3,21 @@
     <nav-crumb :navpath="navpath"></nav-crumb>
     <div class="right-content">
       <div class="right-box">
+        <div class="memberGroupDetail-wrap__info m-b-20">
+          <span class="group-name">{{ groupName }}</span>
+          <span class="group-total m-l-20 p-l-20">
+            覆盖人数
+            <span>{{ separator(total) }}</span>
+            人
+          </span>
+          <span class="inline-block middle m-l-20">
+            <el-button type="primary" icon="el-icon-setting " @click="showDefined"></el-button>
+          </span>
+        </div>
         <div class="memberGroupDetail-wrap__head">
-          <p class="m-b-20">
-            <span class="group-name">{{ groupName }}</span
-            ><span class="font-10 real-time inline-block m-l-8">{{ !!groupIsRealTime ? '实时' : '非实时' }}</span>
-          </p>
+          <!--<p class="m-b-20">-->
+          <!--<span class="font-10 real-time inline-block m-l-8">{{ !!groupIsRealTime ? '实时' : '非实时' }}</span>-->
+          <!--</p>-->
           <div class="flex">
             <span class="tag-selected-title">筛选标签</span>
             <div class="inline-block tag-cell-wrap flex-1">
@@ -21,10 +31,6 @@
             </div>
           </div>
         </div>
-        <div class="memberGroupDetail-wrap__info">
-          <span>覆盖人数{{ total }}人</span>
-          <span class="fr inline-block middle"><el-button type="primary" icon="el-icon-setting " @click="showDefined"></el-button></span>
-        </div>
         <div class="memberGroupDetail-wrap__table">
           <el-table v-loading="loading" @sort-change="sortChange" :data="memberGroupDetailData" style="width: 100%">
             <div v-for="(item, index) in selectedFields" :key="index">
@@ -382,6 +388,14 @@ export default {
 
   methods: {
     /**
+     * 千位分隔符
+     * */
+    separator(num) {
+      let reg = /\d{1,3}(?=(\d{3})+$)/g;
+      num = num + '';
+      return num.replace(reg, '$&,');
+    },
+    /**
      * 排序
      */
     sortChange({ column, prop, order }) {
@@ -641,10 +655,6 @@ export default {
     width: 60px;
     padding-top: 10px;
   }
-  .group-name {
-    font-weight: 500;
-    font-size: 16px;
-  }
   .real-time {
     padding: 3px 4px;
     border-radius: 4px;
@@ -667,8 +677,19 @@ export default {
 }
 
 .memberGroupDetail-wrap__info {
-  height: 87px;
-  line-height: 87px;
+  .group-name {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .group-total {
+    font-size: 14px;
+    border-left: 1px solid #aaa;
+    span {
+      padding: 0 3px;
+      font-size: 16px;
+      font-weight: bold;
+    }
+  }
 }
 
 .memberGroupDetail-wrap__table {