修复往届链接 & 头像动画
|
|
@ -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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 7.1 KiB |
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 99 KiB |
|
|
@ -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/"
|
||||
},
|
||||
]
|
||||
|
|
|
|||