From 9803aea65b2e6fe7a3efb4f89a4821ccce4b3098 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:25:45 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=A0=BC=E5=BC=8F=E5=8C=96=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Blogger.vue | 55 +++++++++++++++++++++++++++---------------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/components/Blogger.vue b/components/Blogger.vue
index 6122c7e..905ca37 100644
--- a/components/Blogger.vue
+++ b/components/Blogger.vue
@@ -1,20 +1,25 @@
 <script setup>
-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 isMore = ref(false)
-const members =  computed(() => {
+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 isMore = ref(false);
+const members = computed(() => {
   if (isMore.value) {
-    return props.friends
+    return props.friends;
   } else {
-    return props.friends.slice(0, 5)
+    return props.friends.slice(0, 5);
   }
-})
-const classes = computed(() => [
-  size ?? 'medium',
-  `count-${members.length}`
-])
+});
+const classes = computed(() => [size ?? "medium", `count-${members.length}`]);
 </script>
 
 <template>
@@ -24,7 +29,7 @@ const classes = computed(() => [
         <VPTeamMembersItem :size="size" :member="member" />
       </div>
       <div v-if="!isMore">
-        <VPTeamMembersItem :blank="true" @click="isMore=true"/>
+        <VPTeamMembersItem :blank="true" @click="isMore = true" />
       </div>
     </div>
   </div>
@@ -35,9 +40,15 @@ const classes = computed(() => [
   grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
 }
 
-.VPTeamMembers.small.count-1 .container { max-width: 276px; }
-.VPTeamMembers.small.count-2 .container { max-width: calc(276px * 2 + 24px); }
-.VPTeamMembers.small.count-3 .container { max-width: calc(276px * 3 + 24px * 2); }
+.VPTeamMembers.small.count-1 .container {
+  max-width: 276px;
+}
+.VPTeamMembers.small.count-2 .container {
+  max-width: calc(276px * 2 + 24px);
+}
+.VPTeamMembers.small.count-3 .container {
+  max-width: calc(276px * 3 + 24px * 2);
+}
 
 .VPTeamMembers.medium .container {
   grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
@@ -49,8 +60,12 @@ const classes = computed(() => [
   }
 }
 
-.VPTeamMembers.medium.count-1 .container { max-width: 368px; }
-.VPTeamMembers.medium.count-2 .container { max-width: calc(368px * 2 + 24px); }
+.VPTeamMembers.medium.count-1 .container {
+  max-width: 368px;
+}
+.VPTeamMembers.medium.count-2 .container {
+  max-width: calc(368px * 2 + 24px);
+}
 
 .container {
   display: grid;
@@ -58,4 +73,4 @@ const classes = computed(() => [
   margin: 0 auto;
   max-width: 1152px;
 }
-</style>
\ No newline at end of file
+</style>