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 class="bottom">
<div class="copyright">
<div class="flex flex-col md:flex-row items-center md:items-end text-sm pt-3 pb-1">
<div class="">
&copy; {`2018-${year} ${SITE_NAME}`}
<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>
</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
// all pages through the use of the <BaseHead /> component.
import type { Member } from "../store/member";
import "../styles/global.css";
const { member } = Astro.props as { member: Member };
import type { Member } from "../store/member"
import "../styles/global.css"
const { member } = Astro.props as { member: Member }
const avatar = member.avatar;
---
<a
href={member.link}
target="_blank"
rel="noopener noreferrer"
class="no-link-color"
>
<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"
>
{
avatar ? (
typeof avatar !== "string" ? (
<a
href={member.link}
target="_blank"
rel="noopener noreferrer"
class="no-link-color"
>
<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"
>
{
avatar
? (
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
class="object-cover h-full navigate"
src={(await avatar)?.default?.src}
class="object-cover h-3/4 navigate"
src="https://oss.nbtca.space/CA-logo.svg"
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 class="h-16">
<div class="text-lg">{member.alias}</div>
<div class="text-sm mt-0.5">{member.profile}</div>
</div>
</div>
</a>
<style>
</a>
<style>
/* 初始状态 */
.navigate {
/* cursor: pointer; */
@ -66,7 +70,6 @@ const avatar = member.avatar;
.navigate:active {
animation: ease-in-out 1s exit forwards;
}
/* 定义 exit 动画 */
@keyframes exit {
@ -83,4 +86,4 @@ const avatar = member.avatar;
color: inherit;
text-decoration: none;
}
</style>
</style>

54
src/components/Navigation.astro
View file

@ -1,11 +1,35 @@
---
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">
<div class="nav-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">
<img
src="https://oss.nbtca.space/CA-logo.svg"
@ -16,24 +40,16 @@ import { SITE_TITLE } from "../consts"
{SITE_TITLE}
</span>
</a>
<div class="nav-menu">
<div class="nav-item-wrapper">
<a href="/archive" class="nav-item-content">目录</a>
</div>
<div class="nav-item-wrapper">
<a href="https://repair.nbtca.space" class="nav-item-content">
维修
</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 class="flex items-center">
{
menuList.value.map(menu =>
(
<div class="px-3 lg:px-4">
<a href={menu.link} class="nav-item-content hover:text-[#2997ff] text-nowrap">{menu.name}</a>
</div>
),
)
}
</div>
</div>
</div>

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

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

6
src/layouts/BaseLayout.astro
View file

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

5
src/pages/about.astro
View file

@ -32,8 +32,7 @@ const memberGroupByYear = computed(() => {
<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="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>
{
Object.keys(memberGroupByYear.value)
@ -41,7 +40,7 @@ const memberGroupByYear = computed(() => {
.map((year) => {
return (
<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">
{memberGroupByYear.value[year].map(member => (
<MemberCard member={member} />

12
src/store/member.ts
View file

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