留言页搞定
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
2026-04-01 01:45:07 +08:00
parent 93b2853d30
commit a69d3f81ce
4 changed files with 329 additions and 26 deletions

View File

@ -0,0 +1,174 @@
---
// 不想写得屎长屎长,所以就用单独的文件写了
import { Image } from 'astro:assets'
---
<div class="comments">
{
[
[
'https://legacy.passthem.top/assets/ice-BN4Z25mt.jpg',
'超几何冰精',
'⑨',
<>
<p>
<s>@☀️ 可以当靶场玩吗</s>
</p>
<p>我喜欢passthem</p>
</>,
],
[
'https://legacy.passthem.top/assets/pigeon-16qh82EW.jpg',
'pigeon某人',
'可爱的鸽子Bilibili 著名 YTPMVer',
<>
<Image
src="https://legacy.passthem.top/assets/idk-DjwAIbw0.jpg"
width={100}
height={95}
alt="用户「pigeon某人」的个人形象的表情包"
/>
<p>这个可以贴吗</p>
</>,
],
[
'https://legacy.passthem.top/assets/kio-DikBD7t4.jpg',
'asynkio',
'西多kitaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
<p>asynkio 祝 jazzwhom.top 開張大吉!</p>,
],
[
'https://legacy.passthem.top/assets/leukos-Ci6_szKv.jpg',
'leukos',
'冰镇西米露,在幻想乡被称作露米娅',
<p>帕,移动</p>,
],
[
'https://legacy.passthem.top/assets/mono-BkJO6fUP.webp',
'モノクロ子',
'全て変えるのなら黒にする。',
<>
<>
<p>pt的音mad做的特别厉害当时给我看哭了……</p>
<p>谢谢你pt。我希望有一天我也能做出那样的音mad。</p>
</>
</>,
],
[
'https://legacy.passthem.top/assets/graffiti-DHeEktlb.webp',
'Graffiti_',
'泡壳老师,虽然是僵尸,却比人类都要暖',
<p>人与人之间是情感连接着的</p>,
],
[
'https://legacy.passthem.top/assets/miskplar-CJpcFQZ_.webp',
'miskplar',
'校友',
<p>后悔的时候,不要后悔</p>,
],
[
'https://legacy.passthem.top/assets/sge-Da3d1ENG.webp',
'一根烤肠肠',
'小孩小孩你别馋,过了腊八就是年',
<p>产出作品是你持续站在舞台上的唯一方式</p>,
],
[
'https://legacy.passthem.top/assets/aishi-OOmvQDjV.jpg',
'蔼石',
'校友,东方社团「有顶天变电站」运营中',
<Image
src="https://legacy.passthem.top/assets/mgmg-qXzHVGjP.jpg"
width={140}
height={140}
alt="表情包东方project角色露娜萨·普莉兹姆利巴吃年糕"
/>,
],
].map((elements) => (
<div class="comment">
<div class="comment-head">
<Image
class="avatar"
src={elements[0] as string}
width={48}
height={48}
alt={`${elements[1]} 的头像`}
/>
<div class="userinfo">
<div class="username">{elements[1]}</div>
<div class="comment">{elements[2]}</div>
</div>
</div>
<div class="comment-content">{elements[3]}</div>
</div>
))
}
</div>
<style>
.comments {
overflow-y: scroll;
padding-inline: 3rem;
margin-inline: 1rem;
height: 100%;
padding-block: 2rem;
@media (max-width: 767px) {
padding-inline: 1rem;
}
& > .comment {
padding-block-start: 1.5rem;
padding-block-end: 1.5rem;
&:not(:last-child) {
border-bottom: solid 2px rgb(from var(--color-fg-0) r g b / 0.05);
}
& > .comment-head {
display: flex;
align-items: center;
padding-inline: 1.25rem;
padding-block-end: 1.5rem;
gap: 1rem;
& > .avatar {
flex: none;
width: 3rem;
height: 3rem;
border-radius: 9999px;
object-fit: cover;
}
& > .userinfo {
min-width: 0;
flex-shrink: 1;
& > .username {
overflow-x: hidden;
font-weight: 700;
}
& > .comment {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0.5;
}
}
}
& > .comment-content {
padding-inline: 1.5rem;
p {
margin: 0.5rem 0;
}
s {
opacity: 0.5;
}
}
}
}
</style>