Merge pull request #107 from camera-2018/106-fix-friend-cards-components-style

style: 限制最大宽度& 折叠friends

components/Blogger.vue

@@ -1,9 +1,16 @@
 <script setup>
-import { computed } from 'vue'
+import { computed,ref } from 'vue'
 import VPTeamMembersItem from './BloggerItem.vue'
 const size = 'small'
 const props= {friends:(await (await fetch("https://ghproxy.com/https://raw.githubusercontent.com/NX-Official/friends-link-plus/main/output/friends.json")).json()).friends}
-const members =  props.friends
+const isMore = ref(false)
+const members =  computed(() => {
+  if (isMore.value) {
+    return props.friends
+  } else {
+    return props.friends.slice(0, 5)
+  }
+})
 const classes = computed(() => [
   size ?? 'medium',
   `count-${members.length}`
@@ -16,6 +23,9 @@ const classes = computed(() => [
       <div v-for="member in members" :key="member.name" class="item">
         <VPTeamMembersItem :size="size" :member="member" />
       </div>
+      <div v-if="!isMore">
+        <VPTeamMembersItem :blank="true" @click="isMore=true"/>
+      </div>
     </div>
   </div>
 </template>

components/BloggerItem.vue

@@ -2,7 +2,8 @@
 
 defineProps({
   size: String,
-  member: Object
+  member: Object,
+  blank: Boolean
 })
 
 const goUrl = (url) => {
@@ -13,7 +14,7 @@ const goUrl = (url) => {
 
 <template>
   <article class="VPTeamMembersItem" :class="[size ?? 'medium']">
-    <div class="profile" @click="goUrl(member.url)">
+    <div class="profile" @click="goUrl(member.url)" v-if="!blank">
       <figure class="avatar">
         <img class="avatar-img" :src="member.avatar" :alt="member.name">
       </figure>
@@ -41,6 +42,7 @@ const goUrl = (url) => {
         </div>
       </div>
     </div>
+    <div class="profile" v-else><div class="more">More..</div></div>
   </article>
 </template>
 
@@ -60,7 +62,8 @@ const goUrl = (url) => {
 }
 
 .VPTeamMembersItem.small .data {
-  padding-top: 20px;
+  padding-top: 10px;
+  width: 100px;
 }
 
 .VPTeamMembersItem.small .avatar {
@@ -157,12 +160,16 @@ const goUrl = (url) => {
   object-fit: cover;
 }
 
-.author_name {
+.author_name,.more {
   margin: 0;
   font-weight: 600;
   cursor: pointer;
 }
 
+.more{
+  color: var(--vp-c-text-2);
+}
+
 .affiliation {
   margin: 0;
   font-weight: 500;