moyin/fzu-product
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

style: 格式化代码

Browse Source
This commit is contained in:
少轻狂
2023-08-14 23:25:45 +08:00
parent a6c7295a24
commit 9803aea65b
1 changed files with 35 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
components/Blogger.vue
View File

@@ -1,20 +1,25 @@
<script setup> <script setup>
import { computed,ref } from 'vue' import { computed, ref } from "vue";
import VPTeamMembersItem from './BloggerItem.vue' import VPTeamMembersItem from "./BloggerItem.vue";
const size = 'small' 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 props = {
const isMore = ref(false) friends: (
const members = computed(() => { 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) { if (isMore.value) {
return props.friends return props.friends;
} else { } else {
return props.friends.slice(0, 5) return props.friends.slice(0, 5);
} }
}) });
const classes = computed(() => [ const classes = computed(() => [size ?? "medium", `count-${members.length}`]);
size ?? 'medium',
`count-${members.length}`
])
</script> </script>
<template> <template>
@@ -24,7 +29,7 @@ const classes = computed(() => [
<VPTeamMembersItem :size="size" :member="member" /> <VPTeamMembersItem :size="size" :member="member" />
</div> </div>
<div v-if="!isMore"> <div v-if="!isMore">
<VPTeamMembersItem :blank="true" @click="isMore=true"/> <VPTeamMembersItem :blank="true" @click="isMore = true" />
</div> </div>
</div> </div>
</div> </div>
@@ -35,9 +40,15 @@ const classes = computed(() => [
grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
} }
.VPTeamMembers.small.count-1 .container { max-width: 276px; } .VPTeamMembers.small.count-1 .container {
.VPTeamMembers.small.count-2 .container { max-width: calc(276px * 2 + 24px); } max-width: 276px;
.VPTeamMembers.small.count-3 .container { max-width: calc(276px * 3 + 24px * 2); } }
.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 { .VPTeamMembers.medium .container {
grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); 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-1 .container {
.VPTeamMembers.medium.count-2 .container { max-width: calc(368px * 2 + 24px); } max-width: 368px;
}
.VPTeamMembers.medium.count-2 .container {
max-width: calc(368px * 2 + 24px);
}
.container { .container {
display: grid; display: grid;
@@ -58,4 +73,4 @@ const classes = computed(() => [
margin: 0 auto; margin: 0 auto;
max-width: 1152px; max-width: 1152px;
} }
</style> </style>