'fix'

src/components/avatorGroup.vue

@@ -13,17 +13,19 @@
         height=""
         :src="item.avatar"
       />
-      <div v-if="item.userTag && item.userTag == '团长'" class="is-leader">
-        <cr-image class="crown" width="" height="" src="@/assets/images/leaderIcon.png" />
-      </div>
-      <div v-if="item.userTag && item.userTag == '团长'" class="leader-name">
-        <cr-image
-          class="leader-name-icon"
-          height=""
-          width=""
-          src="@/assets/images/leader-name.png"
-        />
-      </div>
+      <template v-if="item.userTag && item.userTag == '团长'">
+        <div class="is-leader">
+          <cr-image class="crown" width="" height="" src="@/assets/images/leaderIcon.png" />
+        </div>
+        <div class="leader-name">
+          <cr-image
+            class="leader-name-icon"
+            height=""
+            width=""
+            src="@/assets/images/leader-name.png"
+          />
+        </div>
+      </template>
       <div v-if="item.userTag && item.userTag.toLowerCase() == 'new'" class="is-new">
         <cr-image width="25px" src="@/assets/images/new-user.png" />
       </div>
@@ -32,9 +34,23 @@
       v-for="n in placeholderNum"
       :key="`placeholder-${n}`"
       class="placeholder"
+      :class="{ leader: avators.length == 0 }"
       :style="widthStyle"
     >
-      <div class="content">?</div>
+      <template v-if="avators.length == 0 && n == 1">
+        <div class="is-leader">
+          <cr-image class="crown" width="" height="" src="@/assets/images/leaderIcon.png" />
+        </div>
+        <div class="leader-name">
+          <cr-image
+            class="leader-name-icon"
+            height=""
+            width=""
+            src="@/assets/images/leader-name.png"
+          />
+        </div>
+      </template>
+      <div class="content" :class="{ avator: avators.length == 0 && n == 1 }">?</div>
     </div>
     <div v-if="groupHC >= 10" class="more" :style="widthStyle" @click="showMoreAvator">
       <div class="content" />
@@ -193,6 +209,48 @@ export default {
   /deep/ .cr-dialog--message {
     padding-top: 0;
   }
+  .placeholder.leader {
+    position: relative;
+    .is-leader {
+      position: absolute;
+      right: 4px;
+      top: -9px;
+      .crown {
+        width: 22px;
+        height: 20px;
+      }
+    }
+    .leader-name {
+      width: 35px;
+      height: 17px;
+      position: absolute;
+      left: 50%;
+      bottom: -6px;
+      transform: translateX(-50%);
+      &-icon {
+        width: 100%;
+        height: 100%;
+        img {
+          width: 35px;
+          height: 17px;
+        }
+      }
+    }
+    .avator {
+      background: #ffe1e1 url('../assets/images/leaderBorder.png');
+      // border: px solid rgba(255, 212, 0, 0.24);
+      background-size: cover;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 0;
+      /deep/ img {
+        width: 37px;
+        height: 37px;
+      }
+    }
+  }
   .placeholder,
   .more {
     display: flex;