m1ngsama/FUJI
1
0
Fork 0
mirror of https://github.com/m1ngsama/FUJI.git synced 2025-12-25 02:56:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

group members by year

Browse source
This commit is contained in:
ClasWen 2024-04-01 21:37:09 +08:00
parent e9b1967709
commit f457c1fc6f
2 changed files with 61 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/components/MemberCard.astro Normal file
View file

@ -0,0 +1,24 @@
---
// Import the global.css file here so that it is included on
// all pages through the use of the <BaseHead /> component.
import "../styles/global.css"
const { member } = Astro.props
---
<div class="flex flex-col gap-2 w-full">
<div class="w-full rounded-lg overflow-hidden">
<div class="w-full aspect-square overflow-hidden flex items-center justify-center bg-gradient-to-b from-gray-300/70">
{
member.avatar ? (
<img class="object-cover h-full" src={member.avatar} alt="" />
) : (
<img class="object-cover h-3/4" src="https://oss.nbtca.space/CA-logo.svg" alt="" />
)
}
</div>
</div>
<div class="h-16">
<div class="text-lg">{member.alias}</div>
<div class="text-sm mt-0.5">{member.profile}</div>
</div>
</div>

56
src/pages/about.astro
View file

@ -1,36 +1,54 @@
---
import BaseLayout from "../layouts/BaseLayout.astro"
import { computed } from "vue"
import MemberCard from "../components/MemberCard.astro"
const members = await fetch("https://api.nbtca.space/v2/members").then(res => {
const members: {
memberId: string
alias: string
avatar: string
profile: string
}[] = await fetch("https://api.nbtca.space/v2/members").then(res => {
return res.json()
})
// memberId is like "3232323233", the second and third number is the year of the member
const memberGroupByYear = computed(() => {
const group = members
// TODO delete the test member
.filter(member => member.memberId != "0000000000" && member.memberId != "2333333333")
.reduce((acc, cur) => {
const year = parseInt("20" + cur.memberId.slice(1, 3))
if (!acc[year]) {
acc[year] = []
}
acc[year].push(cur)
return acc
}, {} as Record<string, typeof members>)
return group
})
---
<BaseLayout primaryTitle="关于">
<section class="pb-20 bg-[#f5f5f7]">
<div class="section-content">
<div class="text-[32px] leading-[1.125] font-bold py-6">协会成员</div>
<div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-x-6 gap-y-6 md:gap-y-8">
<div>
{
members.map(member => {
return (
<div class="flex flex-col gap-2 w-full">
<div class="w-full rounded-lg overflow-hidden">
<div class="w-full aspect-square overflow-hidden flex items-center justify-center bg-gradient-to-b from-gray-300/70">
{member.avatar ? (
<img class="object-cover h-full" src={member.avatar} alt="" />
) : (
<img class="object-cover h-3/4" src="https://oss.nbtca.space/CA-logo.svg" alt="" />
)}
Object.keys(memberGroupByYear.value)
.sort((a, b) => parseInt(b) - parseInt(a))
.map(year => {
return (
<div class="py-4 first:pt-2">
<div class="text-[24px] font-bold pb-2">{year}</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-6 gap-y-8">
{memberGroupByYear.value[year].map(member => (
<MemberCard member={member} />
))}
</div>
</div>
<div class="h-16">
<div class="text-lg">{member.alias}</div>
<div class="text-sm mt-0.5">{member.profile}</div>
</div>
</div>
)
})
)
})
}
</div>
</div>