更新邀约页面

src/pages/index/index.scss

@@ -28,3 +28,7 @@ page {
     visibility: hidden !important;
     display: none !important;
 }
+
+.skeleton-avatar .nut-skeleton .nut-skeleton-content .avatarClass {
+    margin-right: 0 !important;
+}

src/pages/index/index.vue

@@ -117,7 +117,7 @@ const goToContactEditPage = (item) => {
         我的邀约
       </view>
     </view>
-    <View class="scroll 100vh">
+    <View class="scroll 100vh w-100">
       <View class="mt-3 p-3">
         <View class="border bg-white p-3 d-flex flex-column" hover-class="card-hover-gray" @tap="goToContactNewPage()" >
           <View class="d-flex justify-content-center">
@@ -146,61 +146,61 @@ const goToContactEditPage = (item) => {
         </View>
         <View v-else>
           <View class="h4 p-3">来访联系人</View>
-          <View class="container-fluid">
-            <View class="row w-100">
-              <View style="width: 25vw" v-for="item in state.normalContacts">
-                <View class="m-2 p-3 border" hover-class="card-hover-gray" @tap="goToContactEditPage(item)">
-                  <View class="d-flex justify-content-center">
-                    <NutBadge :value="item.isVIP?'VIP':''">
-                      <NutAvatar size="normal" color="white" :bg-color="BjxHelper.mbString2RgbHex(item.name)" class="overflow-hidden">
-                        <img  v-if="item.avatar" :src="item.avatar" />
-                        <view v-else-if="BjxHelper.getBJXFirstChar(item.name)">{{BjxHelper.getBJXFirstChar(item.name)}}</view>
-                        <view v-else>
-                          <Text className='fas fa-user fa-lg'/>
-                        </view>
-                      </NutAvatar>
-                    </NutBadge>
-                  </View>
-                  <View class="d-flex justify-content-center small b pt-2 text-nowrap overflow-hidden">
-                    {{item.name}}
-                  </View>
-
+          <View class="w-100 d-flex flex-wrap">
+            <View style="width: 25vw" v-for="item in state.normalContacts">
+              <View class="m-2 p-3 border" hover-class="card-hover-gray" @tap="goToContactEditPage(item)">
+                <View class="d-flex justify-content-center">
+                  <NutBadge :value="item.isVIP?'VIP':''">
+                    <NutAvatar size="normal" color="white" :bg-color="BjxHelper.mbString2RgbHex(item.name)" class="overflow-hidden">
+                      <img  v-if="item.avatar" :src="item.avatar" />
+                      <view v-else-if="BjxHelper.getBJXFirstChar(item.name)">{{BjxHelper.getBJXFirstChar(item.name)}}</view>
+                      <view v-else>
+                        <Text className='fas fa-user fa-lg'/>
+                      </view>
+                    </NutAvatar>
+                  </NutBadge>
+                </View>
+                <View class="d-flex justify-content-center small b pt-2 text-nowrap overflow-hidden">
+                  {{item.name}}
                 </View>
-              </View>
 
+              </View>
             </View>
-          </View>
-          <View class="h4 p-3">可随时来访联系人</View>
 
-          <View class="container-fluid">
-            <View class="row w-100">
-              <View style="width: 25vw" v-for="item in state.flexContacts">
-                <View class="m-2 p-3 border" hover-class="card-hover-gray" @tap="goToContactEditPage(item)">
-                  <View class="d-flex justify-content-center">
-                    <NutBadge :value="item.isVIP?'VIP':''">
-                      <NutAvatar size="normal" color="white" :bg-color="BjxHelper.mbString2RgbHex(item.name)" class="overflow-hidden">
-                        <img  v-if="item.avatar" :src="item.avatar" />
-                        <view v-else-if="BjxHelper.getBJXFirstChar(item.name)">{{BjxHelper.getBJXFirstChar(item.name)}}</view>
-                        <view v-else>
-                          <Text className='fas fa-user fa-lg'/>
-                        </view>
-                      </NutAvatar>
-                    </NutBadge>
-                  </View>
-                  <View class="d-flex justify-content-center small b pt-2 text-nowrap overflow-hidden">
-                    {{item.name}}
-                  </View>
+          </View>
 
+          <View class="h4 p-3">可随时来访联系人</View>
+          <View class="w-100 d-flex flex-wrap">
+            <View style="width: 25vw" v-for="item in state.flexContacts">
+              <View class="m-2 p-3 border" hover-class="card-hover-gray" @tap="goToContactEditPage(item)">
+                <View class="d-flex justify-content-center">
+                  <NutBadge :value="item.isVIP?'VIP':''">
+                    <NutAvatar size="normal" color="white" :bg-color="BjxHelper.mbString2RgbHex(item.name)" class="overflow-hidden">
+                      <img  v-if="item.avatar" :src="item.avatar" />
+                      <view v-else-if="BjxHelper.getBJXFirstChar(item.name)">{{BjxHelper.getBJXFirstChar(item.name)}}</view>
+                      <view v-else>
+                        <Text className='fas fa-user fa-lg'/>
+                      </view>
+                    </NutAvatar>
+                  </NutBadge>
+                </View>
+                <View class="d-flex justify-content-center small b pt-2 text-nowrap overflow-hidden">
+                  {{item.name}}
                 </View>
-              </View>
 
+              </View>
             </View>
+
           </View>
         </View>
       </View>
 
-      <View v-else class="d-flex flex-column">
-        <NutSkeleton v-for="_ in 10" class="p-3" height="15px" animated avatar avatar-size="50px" row="1"/>
+      <View v-else class="d-flex flex-column pt-5">
+        <View class="row w-100 pt-4">
+          <View style="width: 25vw" v-for="_ in 20" class="pb-5 skeleton-avatar d-flex justify-content-center">
+            <NutSkeleton class="p-3" height="15px" animated avatar avatar-size="50px" row="0"/>
+          </View>
+        </View>
       </View>
     </View>