还缺图片布局与创建路径

pages/group/index.vue

@@ -10,7 +10,15 @@
         <el-button type="primary">创建</el-button>
       </section>
       <section v-if="list" class="list">
-        <section class="group-item" v-for="(item, index) of list" :key="index"></section>
+        <section class="group-item" v-for="(item, index) of list" :key="index">
+          <section class="imgs" v-if="item.jobs.length">
+            <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">
+            </template>
+          </section>
+          <p class="name">{{item.name}}</p>
+          <p class="count">{{item.member_num}}</p>
+        </section>
       </section>
     </section>
   </ws-page>
@@ -83,10 +91,32 @@ export default {
   flex-wrap: wrap;
 }
 .group-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   width: 250px;
   height: 220px;
   border-radius:4px;
   border: 1px solid rgba(220, 223, 230, 1);
   margin-top: 20px;
+  font-size: 14px;
+  color: #333;
+  cursor: pointer;
+}
+.imgs {
+  position: relative;
+  height: 60px;
+}
+.img {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+}
+.name {
+  margin: 14px 0 3px;
+}
+.count {
+  color: #999;
 }
 </style>