From 339db47517f560739a2e49d5a6e77b23e16a1ea3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=91=E8=BD=BB=E7=8B=82?= <1677568218@qq.com>
Date: Mon, 14 Aug 2023 23:21:17 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E9=99=90=E5=88=B6=E6=9C=80=E5=A4=A7?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6&=20=E6=8A=98=E5=8F=A0friends?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Blogger.vue     | 14 ++++++++++++--
 components/BloggerItem.vue | 15 +++++++++++----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/components/Blogger.vue b/components/Blogger.vue
index af9f78a..6122c7e 100644
--- a/components/Blogger.vue
+++ b/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>
diff --git a/components/BloggerItem.vue b/components/BloggerItem.vue
index 25655e3..b3add8c 100644
--- a/components/BloggerItem.vue
+++ b/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;