mirror of
https://github.com/m1ngsama/FUJI.git
synced 2025-12-24 10:51:27 +00:00
89 lines
2.2 KiB
Text
89 lines
2.2 KiB
Text
---
|
|
// 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 }
|
|
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"
|
|
? (
|
|
<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 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>
|
|
</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>
|