m1ngsama/FUJI
1
0
Fork 0
mirror of https://github.com/m1ngsama/FUJI.git synced 2025-12-24 10:51:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix style

Browse source
This commit is contained in:
ClasWen 2024-06-04 20:35:46 +08:00
parent 0639315e8f
commit 25d31db78e
8 changed files with 98 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Footer.astro
View file

@ -34,10 +34,12 @@ const year = date.getFullYear();
</div> </div>
</div> </div>
</div> </div>
<div class="bottom"> <div class="flex flex-col md:flex-row items-center md:items-end text-sm pt-3 pb-1">
<div class="copyright"> <div class="">
&copy; {`2018-${year} ${SITE_NAME}`} &copy; {`2018-${year} ${SITE_NAME}`}
<a href="//github.com/austin2035/astro-air-blog">astro-air-blog</a> <a href="//github.com/austin2035/astro-air-blog">astro-air-blog</a>
</div>
<div>
<a href="https://beian.miit.gov.cn/" target="_blank" class="text-xs ml-2">浙ICP备2021030831</a> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-xs ml-2">浙ICP备2021030831</a>
</div> </div>
</div> </div>

87
src/components/MemberCard.astro
View file

@ -1,55 +1,59 @@
--- ---
// Import the global.css file here so that it is included on // Import the global.css file here so that it is included on
// all pages through the use of the <BaseHead /> component. // all pages through the use of the <BaseHead /> component.
import type { Member } from "../store/member"; import type { Member } from "../store/member"
import "../styles/global.css"; import "../styles/global.css"
const { member } = Astro.props as { member: Member }; const { member } = Astro.props as { member: Member }
const avatar = member.avatar; const avatar = member.avatar;
--- ---
<a <a
href={member.link} href={member.link}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="no-link-color" class="no-link-color"
> >
<div class="flex flex-col gap-2 w-full"> <div class="flex flex-col gap-2 w-full">
<div class="w-full rounded-lg overflow-hidden"> <div class="w-full rounded-lg overflow-hidden">
<div <div
class="w-full aspect-square overflow-hidden flex items-center justify-center bg-gradient-to-b from-gray-300/70" class="w-full aspect-square overflow-hidden flex items-center justify-center bg-gradient-to-b from-gray-300/70"
> >
{ {
avatar ? ( avatar
typeof avatar !== "string" ? ( ? (
typeof avatar !== "string"
? (
<img
class="object-cover h-full navigate"
src={(await avatar)?.default?.src}
alt=""
/>
)
: (
<img
class="object-cover h-full navigate"
src={avatar + "?x-oss-process=image/resize,h_512,m_lfit"}
alt=""
/>
)
)
: (
<img <img
class="object-cover h-full navigate" class="object-cover h-3/4 navigate"
src={(await avatar)?.default?.src} src="https://oss.nbtca.space/CA-logo.svg"
alt="" alt=""
/> />
) : ( )
<img
class="object-cover h-full navigate"
src={avatar + "?x-oss-process=image/resize,h_512,m_lfit"}
alt=""
/>
)
) : (
<img
class="object-cover h-3/4 navigate"
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>
</div> </div>
<div class="h-16"> </a>
<div class="text-lg">{member.alias}</div> <style>
<div class="text-sm mt-0.5">{member.profile}</div>
</div>
</div>
</a>
<style>
/* 初始状态 */ /* 初始状态 */
.navigate { .navigate {
/* cursor: pointer; */ /* cursor: pointer; */
@ -66,7 +70,6 @@ const avatar = member.avatar;
.navigate:active { .navigate:active {
animation: ease-in-out 1s exit forwards; animation: ease-in-out 1s exit forwards;
} }
/* 定义 exit 动画 */ /* 定义 exit 动画 */
@keyframes exit { @keyframes exit {
@ -83,4 +86,4 @@ const avatar = member.avatar;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
</style> </style>

54
src/components/Navigation.astro
View file

@ -1,11 +1,35 @@
--- ---
import { SITE_TITLE } from "../consts" import { SITE_TITLE } from "../consts"
import { ref } from "vue"
const menuList = ref<{
link: string
name: string
}[]>([
{
link: "/archive",
name: "目录",
},
{
link: "https://repair.nbtca.space",
name: "维修",
},
{
link: "/calendar",
name: "日历",
},
{
link: "/about",
name: "关于我们",
},
])
--- ---
<nav class="nav"> <nav class="nav">
<div class="nav-wrapper"> <div class="nav-wrapper">
<div class="nav-content-wrapper"> <div class="nav-content-wrapper">
<div class="nav-content"> <div class="flex items-center justify-between">
<a href="/" class="nav-title flex items-center gap-3"> <a href="/" class="nav-title flex items-center gap-3">
<img <img
src="https://oss.nbtca.space/CA-logo.svg" src="https://oss.nbtca.space/CA-logo.svg"
@ -16,24 +40,16 @@ import { SITE_TITLE } from "../consts"
{SITE_TITLE} {SITE_TITLE}
</span> </span>
</a> </a>
<div class="nav-menu"> <div class="flex items-center">
<div class="nav-item-wrapper"> {
<a href="/archive" class="nav-item-content">目录</a> menuList.value.map(menu =>
</div> (
<div class="nav-item-wrapper"> <div class="px-3 lg:px-4">
<a href="https://repair.nbtca.space" class="nav-item-content"> <a href={menu.link} class="nav-item-content hover:text-[#2997ff] text-nowrap">{menu.name}</a>
维修 </div>
</a> ),
</div> )
<div class="nav-item-wrapper"> }
<a href="/calendar" class="nav-item-content">日历</a>
</div>
<div class="nav-item-wrapper">
<a href="/about" class="nav-item-content">关于</a>
</div>
<div class="nav-item-wrapper">
<a href="/join-us" class="nav-item-content">加入我们</a>
</div>
</div> </div>
</div> </div>
</div> </div>

2
src/components/react/Calendar.tsx
View file

@ -8,6 +8,7 @@ class CalendarComponent extends React.Component {
render() { render() {
const calendarStyle = { const calendarStyle = {
width: "80%", width: "80%",
maxWidth: "960px",
margin: "20px auto", margin: "20px auto",
} }
return ( return (
@ -28,6 +29,7 @@ class CalendarComponent extends React.Component {
minute: "2-digit", minute: "2-digit",
meridiem: false, meridiem: false,
}} }}
height="600px"
/> />
</div> </div>
) )

6
src/layouts/BaseLayout.astro
View file

@ -11,9 +11,11 @@ const title = primaryTitle ? `${primaryTitle} - ${SITE_TITLE}` : SITE_TITLE;
<head> <head>
<BaseHead title={title} description={SITE_DESCRIPTION} /> <BaseHead title={title} description={SITE_DESCRIPTION} />
</head> </head>
<body class="page-landing"> <body class="flex flex-col min-h-screen">
<Header /> <Header />
<slot /> <div class="flex-grow h-full">
<slot />
</div>
<Footer /> <Footer />
</body> </body>
</html> </html>

5
src/pages/about.astro
View file

@ -32,8 +32,7 @@ const memberGroupByYear = computed(() => {
<BaseLayout primaryTitle="关于"> <BaseLayout primaryTitle="关于">
<section class="pb-20 bg-[#f5f5f7]"> <section class="pb-20 bg-[#f5f5f7]">
<div class="section-content"> <div class="section-content">
<!-- <div class="text-[32px] leading-[1.125] font-bold py-6">友情链接</div> --> <div class="text-2xl lg:text-3xl leading-[1.125] font-bold pt-6 pb-4 lg:pb-6">协会成员</div>
<div class="text-[32px] leading-[1.125] font-bold py-6">协会成员</div>
<div> <div>
{ {
Object.keys(memberGroupByYear.value) Object.keys(memberGroupByYear.value)
@ -41,7 +40,7 @@ const memberGroupByYear = computed(() => {
.map((year) => { .map((year) => {
return ( return (
<div class="py-4 first:pt-2"> <div class="py-4 first:pt-2">
<div class="text-[24px] font-bold pb-2">{year}</div> <div class="text-lg lg:text-2xl 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"> <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 => ( {memberGroupByYear.value[year].map(member => (
<MemberCard member={member} /> <MemberCard member={member} />

12
src/store/member.ts
View file

@ -12,41 +12,41 @@ export const otherMembers: Member[] = [
alias: "鲁冠泽", alias: "鲁冠泽",
profile: "Java, Web。", profile: "Java, Web。",
avatar: import("../pages/posts/blogs/更多/assets/avatar/cimoccn.png"), avatar: import("../pages/posts/blogs/更多/assets/avatar/cimoccn.png"),
link: "https://cimoc.cn/" link: "https://cimoc.cn/",
}, },
{ {
memberId: undefined, memberId: undefined,
alias: "江蕾", alias: "江蕾",
profile: "前端。", profile: "前端。",
avatar: import("../pages/posts/blogs/更多/assets/avatar/DoEH51Nj97Ah64a.png"), avatar: import("../pages/posts/blogs/更多/assets/avatar/DoEH51Nj97Ah64a.png"),
link: "https://www.cnblogs.com/JLay" link: "https://www.cnblogs.com/JLay",
}, },
{ {
memberId: undefined, memberId: undefined,
alias: "黄文轩", alias: "黄文轩",
profile: "网安, Linux和C/C++。", profile: "网安, Linux和C/C++。",
avatar: import("../pages/posts/blogs/更多/assets/avatar/4J9NfH1UZD3sz5I.png"), avatar: import("../pages/posts/blogs/更多/assets/avatar/4J9NfH1UZD3sz5I.png"),
link: "https://www.cnblogs.com/N3ptune" link: "https://www.cnblogs.com/N3ptune",
}, },
{ {
memberId: undefined, memberId: undefined,
alias: "陈学书", alias: "陈学书",
profile: "Mac, 人工智能, Web和流水账。", profile: "Mac, 人工智能, Web和流水账。",
avatar: import("../pages/posts/blogs/更多/assets/avatar/VjBGkQ6c58vH4l9.png"), avatar: import("../pages/posts/blogs/更多/assets/avatar/VjBGkQ6c58vH4l9.png"),
link: "https://www.cnblogs.com/Flat-White" link: "https://www.cnblogs.com/Flat-White",
}, },
{ {
memberId: undefined, memberId: undefined,
alias: "王纯", alias: "王纯",
profile: "Web。", profile: "Web。",
avatar: import("../pages/posts/blogs/更多/assets/avatar/avatar.png"), avatar: import("../pages/posts/blogs/更多/assets/avatar/avatar.png"),
link: "https://chundot.org" link: "https://chundot.org",
}, },
{ {
memberId: undefined, memberId: undefined,
alias: "章晟玮", alias: "章晟玮",
profile: "算法记录。", profile: "算法记录。",
avatar: undefined, avatar: undefined,
link: "https://bcscb.xyz/" link: "https://bcscb.xyz/",
}, },
] ]

14
src/styles/global.css
View file

@ -381,20 +381,6 @@ a:disabled,
z-index: 2; z-index: 2;
} }
.nav-content {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
}
.nav-menu {
display: flex;
flex-direction: row;
align-items: center;
}
a.nav-title:hover { a.nav-title:hover {
cursor: pointer; cursor: pointer;