fix: fix layout bug

Author: Niapya

README.md

@@ -1,14 +1,13 @@
 # HackHTU UI
 
-> v2 正在快速迭代中，欢迎提供反馈和建议！
+<p align="center">
+   <img src="icon.svg" alt="icon" width="100" height="100"/>
+</p>
 
 这里是 HackHTU v2 的 UI Library，设计文件遵循 CC-BY-SA-4.0 协议。
 
 <a href="https://www.figma.com/design/dg892ShubXBBfJQ8PANbMk/UI?node-id=0-1&t=voNFXUZztkQaqr5C-1">
 <img src="public/Cover.png" alt="Figma Design" align=center />
-
-点击查看 Figma 设计文件
-<img src="public/Badge.png" width="150" alt="Figma Design" align=center />
 </a>
 
 ## 加入我们

icon.svg

@@ -45,7 +45,7 @@ let isOpen = ref(false);
             <hr class="border-primary my-2 w-full" />
 
             <p class="text-2xl font-bold">Title</p>
-            <p class="text-lg">Content</p>
+            <p class="text-lg whitespace-pre-line">Content</p>
         </div>
     </div>
 </template>

package-lock.json

@@ -1,16 +1,16 @@
 <template>
-    <div
+    <button
         class="border-primary text-primary bg-background m-1 cursor-pointer rounded-xl border-2 px-2 py-1 select-none hover:invert">
         Button
-    </div>
+    </button>
 
-    <div
+    <button
         class="border-primary bg-primary text-background m-1 cursor-pointer rounded-xl border px-2 py-1 select-none hover:invert">
         Button
-    </div>
+    </button>
 
-    <div
+    <button
         class="hover:text-primary m-1 cursor-pointer rounded-xl border border-red-600 bg-red-600 px-2 py-1 text-neutral-50 select-none hover:border-neutral-300 hover:bg-neutral-200">
         Button
-    </div>
+    </button>
 </template>

src/components/Display/Collapse.vue

@@ -1,6 +1,6 @@
 <template>
-    <div
-        class="bg-primary dark:text-primary text-background flex w-full max-w-dvw items-start justify-between gap-5 rounded-3xl p-6 dark:bg-neutral-800">
+    <footer
+        class="bg-primary dark:text-primary text-background flex w-full max-w-dvw items-start justify-between gap-5 rounded-bl-3xl rounded-br-3xl px-6 pt-6 pb-10 select-none dark:bg-neutral-800">
         <div class="flex flex-col items-start gap-1.5">
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -17,7 +17,7 @@
             >
         </div>
 
-        <div class="flex flex-wrap gap-5">
+        <div class="flex flex-wrap gap-10">
             <ul class="space-y-1">
                 <li class="text-lg font-bold">产品</li>
                 <li>NekoEVAL</li>
@@ -39,8 +39,8 @@
                 <li>Telegram 群组</li>
                 <li>Discord 服务器</li>
                 <li>Github 团队</li>
-                <li>邮箱</li>
+                <li>Email 邮箱</li>
             </ul>
         </div>
-    </div>
+    </footer>
 </template>

src/components/Form/Button.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="text-background dark:text-primary flex w-[80dvw] max-w-full items-center justify-between rounded-2xl border border-neutral-300 bg-neutral-900">
+        class="text-background dark:text-primary mx-2 flex w-200 max-w-full items-center justify-between rounded-2xl border border-neutral-300 bg-neutral-900 text-nowrap select-none">
         <svg
             xmlns="http://www.w3.org/2000/svg"
             class="h-14 w-20"