图片布局完成

pages/group/index.vue

@@ -11,9 +11,25 @@
       </section>
       <section v-if="list" class="list">
         <section class="group-item" v-for="(item, index) of list" :key="index">
-          <section class="imgs" v-if="item.jobs.length">
+          <section class="imgs" v-if="item.jobs.length === 1">
             <template v-for="(job, idx) of item.jobs">
-              <img v-if="idx < 3" class="img" :src="job && job.icon_url" alt="icon_url" :key="idx">
+              <img class="img" :src="job && job.icon_url" alt="icon_url" :key="idx">
+            </template>
+          </section>
+          <section class="imgs" v-else-if="item.jobs.length === 2">
+            <template v-for="(job, idx) of item.jobs">
+              <img class="img two" :src="job && job.icon_url" alt="icon_url" :key="idx">
+            </template>
+          </section>
+          <section class="imgs" v-else>
+            <template v-for="(job, idx) of item.jobs">
+              <img
+                v-if="idx < 3"
+                class="img three"
+                :src="job && job.icon_url"
+                alt="icon_url"
+                :key="idx"
+              >
             </template>
           </section>
           <p class="name">{{item.name}}</p>
@@ -97,7 +113,7 @@ export default {
   align-items: center;
   width: 250px;
   height: 220px;
-  border-radius:4px;
+  border-radius: 4px;
   border: 1px solid rgba(220, 223, 230, 1);
   margin-top: 20px;
   font-size: 14px;
@@ -106,13 +122,44 @@ export default {
 }
 .imgs {
   position: relative;
-  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 78px;
 }
 .img {
   width: 48px;
   height: 48px;
+  border: 2px solid white;
   border-radius: 50%;
 }
+.two {
+  position: absolute;
+}
+.two:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+.two:nth-child(2) {
+  top: 30px;
+  left: 0;
+}
+.three {
+  position: absolute;
+}
+.three:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+.three:nth-child(2) {
+  top: 30px;
+  left: -20px;
+}
+.three:nth-child(3) {
+  top: 30px;
+  left: 20px;
+}
 .name {
   margin: 14px 0 3px;
 }