From 9c730831cde49ba0ca05e6857ec996182e498d7c Mon Sep 17 00:00:00 2001
From: yuan <wang.yuan@joydata.com>
Date: Wed, 10 Jan 2024 16:50:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=82=80=E7=BA=A6=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/index.scss |  4 ++
 src/pages/index/index.vue  | 88 +++++++++++++++++++-------------------
 2 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss
index 4f21afa..2ad68b6 100644
--- a/src/pages/index/index.scss
+++ b/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;
+}
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 789d174..f43cfca 100644
--- a/src/pages/index/index.vue
+++ b/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>