优化

ghsApp/src/admin/home/member.vue

@@ -23,23 +23,23 @@
     <view class="app-tabs">
       <app-tabs :tabs="tabs" :isFixed="true" :top="100" :currentTab="tabIndex" :height="100" @change="change" itemWidth="33.33%" />
      </view>
-    <div class="list-wrap">
+    <view class="list-wrap">
     <block v-if="!$util.isEmpty(list.data)">
       <block v-for="(item, index) in list.data" :key="index">
         <tui-list-cell :arrow="true" @click="pageTo({url: '/pagesClient/member/detail?id='+item.id})">
-          <div class="tui-msg-box">
-            <img :src="item.smallAvatar" class="tui-msg-pic" mode="widthFix" />
-            <div class="tui-msg-item">
-              <div class="tui-msg-name">
-                <div class="tui-user-name">
-                  {{ item.name }}
+          <view class="tui-msg-box">
+            <image :src="item.smallAvatar" class="tui-msg-pic" mode="widthFix" />
+            <view class="tui-msg-item">
+              <view class="tui-msg-name">
+                <view class="tui-user-name">
+                  <text class="tui-user-name__text">{{ item.name }}</text>
                   <text v-if="item.pt == 1" class="pt-recommend">平台推荐</text>
                   <text v-if="item.level == 2" class="super-man">大客</text>
                   <text v-if="item.level == 9" class="cost-man">成本</text>
                   <text v-if="item.level == 0" class="ls-man">零售</text>
-                </div>
-              </div>
-              <div class="tui-msg-content">
+                </view>
+              </view>
+              <view class="tui-msg-content">
                 <span>{{ item.visitTime.substr(5,11) }}</span>
                 <span v-if="tabIndex == 1" class="debt-amount">消费 <span class="amount_num">{{parseFloat(item.buyAmount)}}</span> </span>
                 <span v-else>
@@ -69,19 +69,19 @@
 
                 <text v-if="item.distName!=''" style="color:#e0c8c8;font-weight:normal;margin-left:15upx;">{{ item.distName }}</text>
 
-              </div>
-            </div>
-          </div>
-          <div class="tui-msg-right">
+              </view>
+            </view>
+          </view>
+          <view class="tui-msg-right">
             <badge-module type="danger" :dot="item.level == 3 ? true : false" v-if="item.messageNum > 0" >{{ item.messageNum }}</badge-module >
-          </div>
+          </view>
         </tui-list-cell>
       </block>
     </block>
     <block v-else>
       <app-wrapper-empty :is-empty="$util.isEmpty(list.data)" title="暂无客户" />
     </block>
-    </div>
+    </view>
     <NotLogin></NotLogin>
 
     <view class="shop-select-wrap">
@@ -621,9 +621,9 @@ export default {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    & > div {
+    & > view {
       @include disFlex(center, flex-start);
-      & > div:first-child {
+      & > view:first-child {
         margin-right: 8upx;
       }
     }
@@ -674,46 +674,63 @@ export default {
     line-height: 1;
     color: #262b3a;
     .tui-user-name {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex-wrap: nowrap;
       overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      width: 500upx;
+      max-width: 500upx;
       font-size: 34upx;
+      line-height: 1;
+
+      &__text {
+        flex-shrink: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
       .super-man{
         margin-left:20upx;
         font-size:24upx;
-        display:inline-block;
+        flex-shrink: 0;
         color:white;
         border:1upx solid green;
         padding:8upx 10upx;
         background-color: green;
         border-radius: 11upx;
+        line-height: 1.2;
       }
       .cost-man{
         margin-left:20upx;
         font-size:24upx;
-        display:inline-block;
+        flex-shrink: 0;
         color:white;
         border:1upx solid red;
         padding:8upx 10upx;
         background-color: red;
         border-radius: 11upx;
+        line-height: 1.2;
       }
       .ls-man{
         margin-left:20upx;
         font-size:24upx;
-        display:inline-block;
+        flex-shrink: 0;
         color:white;
         border:1upx solid #6b9fec;
         background-color:#6b9fec;
         padding:8upx 10upx;
         border-radius: 11upx;
+        line-height: 1.2;
       }
       .pt-recommend {
         margin-left: 10upx;
         font-size: 24upx;
         color: #3385FF;
         font-weight: normal;
+        flex-shrink: 0;
+        line-height: 1.2;
       }
     }
   }