留言页搞定

src/components/MainpageComments.astro

@@ -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>