留言板横幅调整

Author: CatCodeMe

src/assets/msgboard/board.png

@@ -1,36 +1,43 @@
 ---
-import { Image } from 'astro:assets';
+import { Image } from 'astro:assets'
 import MsgboardLayout from '@/layouts/MsgboardLayout.astro'
 import DanmakuComments from '@/components/waline/DanmakuComments.astro'
-import bannerImage from '@/assets/msgboard/board.png';
+import bannerImage from '@/assets/msgboard/boat.png'
+import { Icon } from '@/custom/components/user'
 
 const meta = {
   title: '留言板',
   description: '欢迎分享你的故事与想法, 请友善交流, 尊重彼此.'
 }
 ---
 
-<MsgboardLayout info={{ slug: '/msgboard' }} >
-  <div id="content-header" class="animate relative w-full overflow-hidden rounded-lg shadow-lg mb-8 aspect-[3/1] md:aspect-[4/1]">
+<MsgboardLayout info={{ slug: '/msgboard' }}>
+  <div
+    id='content-header'
+    class='animate relative w-full overflow-hidden rounded-lg shadow-lg mb-8 aspect-[3/1] md:aspect-[4/1]'
+  >
     <!-- Optimized Image as Background -->
-    <Image src={bannerImage} alt="留言板横幅" class="absolute inset-0 z-0 w-full h-full object-cover object-center" />
-    
+    <Image
+      src={bannerImage}
+      alt='留言板横幅'
+      class='absolute inset-0 z-0 w-full h-full object-cover object-center'
+    />
+
     <!-- Gradient Overlay -->
-    <div class="absolute inset-0 z-10 bg-gradient-to-r from-black/60 via-black/30 to-transparent"></div>
-    
+    <div class='absolute inset-0 z-10 bg-gradient-to-r from-black/60 via-black/30 to-transparent'>
+    </div>
+
     <!-- Text Content -->
-    <div class="relative z-20 flex h-full flex-col justify-center p-6 md:p-8 md:w-3/4 lg:w-2/3">
-      <div class="flex items-start gap-3">
-        <div>
-          <h1 class="text-3xl font-bold text-white">{meta.title}</h1>
-          <p class="mt-2 text-white/80">
-            {meta.description}
-          </p>
-        </div>
+    <div class='relative z-20 flex h-full flex-col justify-center p-6 md:p-8 md:w-3/4 lg:w-2/3'>
+      <div class='flex items-center gap-3'>
+        <Icon name='msgboard' class='size-8 text-white' />
+        <h1 class='text-3xl font-bold text-white'>{meta.title}</h1>
       </div>
+      <p class='mt-2 text-white/80'>
+        {meta.description}
+      </p>
     </div>
   </div>
 
   <DanmakuComments />
-
-</MsgboardLayout>
+</MsgboardLayout>