From 772d53da7dadc2e547536736f55beea37b27591c Mon Sep 17 00:00:00 2001
From: JingBh <jingbohao@yeah.net>
Date: Sun, 1 Sep 2024 17:42:04 +0800
Subject: [PATCH] fix: optimize ui arrangement

---
 src/pages/About.vue             | 6 +++---
 src/pages/AnnouncementIndex.vue | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/About.vue b/src/pages/About.vue
index 61d00b0..f7e6beb 100644
--- a/src/pages/About.vue
+++ b/src/pages/About.vue
@@ -41,15 +41,15 @@ const version = computed(() => {
       />
     </div>
     <div class="flex flex-col items-center gap-2">
-      <h1 class="text-2xl">
+      <h1 class="text-xl sm:text-2xl text-center">
         <span class="font-bold">{{ school.name }}权益墙</span>
         <span
           v-if="version"
-          class="ml-2 text-sm text-gray-500 dark:text-neutral-400"
+          class="ml-2 text-xs text-gray-500 dark:text-neutral-400"
           v-text="version"
         />
       </h1>
-      <p class="text-gray-500 dark:text-neutral-400">
+      <p class="text-sm sm:text-base text-gray-500 dark:text-neutral-400 text-center">
         北京工业大学{{ school.name }}学生会生活权益部
       </p>
     </div>
diff --git a/src/pages/AnnouncementIndex.vue b/src/pages/AnnouncementIndex.vue
index 089513c..56e3148 100644
--- a/src/pages/AnnouncementIndex.vue
+++ b/src/pages/AnnouncementIndex.vue
@@ -228,10 +228,10 @@ const onDelete = (id: number): void => {
     </van-swipe>
     <div
       v-if="categories?.length"
-      class="flex gap-2 sm:gap-3 items-stretch"
+      class="flex gap-2 sm:gap-3 items-stretch flex-nowrap overflow-x-auto"
     >
       <button
-        class="flex-1 block px-3 sm:px-4 py-2 bg-white dark:bg-neutral-900 text-xs sm:text-sm rounded-lg"
+        class="flex-1 flex-shrink-0 block px-4 py-2 bg-white dark:bg-neutral-900 text-xs sm:text-sm rounded-lg break-keep"
         :class="{ 'text-gray-500 dark:text-neutral-400': filter.category, 'text-brand': !filter.category }"
         @click="toggleFilterCategory()"
       >
@@ -240,7 +240,7 @@ const onDelete = (id: number): void => {
       <button
         v-for="item of categories"
         :key="item.id"
-        class="flex-1 block px-3 sm:px-4 py-2 bg-white dark:bg-neutral-900 text-xs sm:text-sm rounded-lg"
+        class="flex-1 flex-shrink-0 block px-4 py-2 bg-white dark:bg-neutral-900 text-xs sm:text-sm rounded-lg break-keep"
         :class="{ 'text-gray-500 dark:text-neutral-400': filter.category !== item.id, 'text-brand': filter.category === item.id }"
         @click="toggleFilterCategory(item.id)"
         v-text="item.name"