修复往届链接 & 头像动画

This commit is contained in:
LazuliKao 2024-05-21 21:59:31 +08:00
parent b1d418cb8f
commit 9ce6880ef8
8 changed files with 89 additions and 16 deletions

View file

@ -1,22 +1,46 @@
---
// 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
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">
<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 + "?x-oss-process=image/resize,h_512,m_lfit"} alt="" />
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-3/4" src="https://oss.nbtca.space/CA-logo.svg" alt="" />
)
}
) : (
<img
class="object-cover h-3/4 navigate"
src="https://oss.nbtca.space/CA-logo.svg"
alt=""
/>
)
}
</div>
</div>
<div class="h-16">
@ -24,3 +48,39 @@ const { member } = Astro.props
<div class="text-sm mt-0.5">{member.profile}</div>
</div>
</div>
</a>
<style>
/* 初始状态 */
.navigate {
/* cursor: pointer; */
transition: transform 0.2s;
}
/* 鼠标移入状态 */
.navigate:hover {
text-decoration: underline;
transform: scale(1.1);
}
/* 鼠标移出状态 */
.navigate:active {
animation: ease-in-out 1s exit forwards;
}
/* 定义 exit 动画 */
@keyframes exit {
0% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
/* 无链接颜色样式 */
.no-link-color {
color: inherit;
text-decoration: none;
}
</style>

View file

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

View file

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 99 KiB

View file

@ -1,8 +1,9 @@
export interface Member {
memberId: string
alias: string
avatar: string
avatar: Promise<typeof import("*.jpg")> | string
profile: string
link?: string
}
export const otherMembers: Member[] = [
@ -10,30 +11,42 @@ export const otherMembers: Member[] = [
memberId: undefined,
alias: "鲁冠泽",
profile: "Java, Web。",
avatar: "",
avatar: import("../pages/posts/blogs/更多/assets/avatar/cimoccn.png"),
link: "https://cimoc.cn/"
},
{
memberId: undefined,
alias: "江蕾",
profile: "前端。",
avatar: "",
avatar: import("../pages/posts/blogs/更多/assets/avatar/DoEH51Nj97Ah64a.png"),
link: "https://www.cnblogs.com/JLay"
},
{
memberId: undefined,
alias: "黄文轩",
profile: "网安, Linux和C/C++。",
avatar: "",
avatar: import("../pages/posts/blogs/更多/assets/avatar/4J9NfH1UZD3sz5I.png"),
link: "https://www.cnblogs.com/N3ptune"
},
{
memberId: undefined,
alias: "陈学书",
profile: "Mac, 人工智能, Web和流水账。",
avatar: "",
avatar: import("../pages/posts/blogs/更多/assets/avatar/VjBGkQ6c58vH4l9.png"),
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"
},
{
memberId: undefined,
alias: "章晟玮",
profile: "算法记录。",
avatar: "",
avatar: undefined,
link: "https://bcscb.xyz/"
},
]