From a4ccad0989cfa726a1edd6e1b9a237e43d51c252 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B3=E5=85=83=E7=9A=93?= <hw@yuanhau.com>
Date: Tue, 27 May 2025 09:02:05 +0800
Subject: [PATCH] Add tailwind scrollbar && Loading logic?

---
 components/app/windows/news.vue | 14 +++++++++++++-
 styles/main.css                 |  1 +
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/app/windows/news.vue b/components/app/windows/news.vue
index aa776b2..a74e56f 100644
--- a/components/app/windows/news.vue
+++ b/components/app/windows/news.vue
@@ -13,6 +13,7 @@ const errorr = ref(false);
 const switchTabs = ref(false);
 const tabs = ref([]);
 const primary = ref<string>("domestic");
+const likeart = ref([]); 
 
 const updateContent = async (url: string, tabAction: boolean) => {
   if (tabAction === true) {
@@ -75,7 +76,7 @@ watch(
   <div class="justify-center align-center text-center">
     <!--Tabs-->
     <div
-      class="sticky inset-x-0 top-0 bg-gray-300/90 backdrop-blur-xl border shadow-lg rounded-xl p-1 m-1 mt-0 justify-center align-center text-center z-[50] overflow-x-auto scrollbar-hide min-w-min whitespace-nowrap px-2"
+      class="sticky inset-x-0 top-0 bg-gray-300/90 backdrop-blur-xl border shadow-lg rounded-xl p-1 m-1 mt-0 justify-center align-center text-center z-[50] overflow-x-auto scrollbar-xl min-w-min whitespace-nowrap px-2"
     >
       <div class="gap-2 flex flex-row justify-center align-center text-center">
         <button
@@ -88,6 +89,14 @@ watch(
         </button>
       </div>
     </div>
+    <Transition
+      enter-active-class="animate__animated animate__fadeIn"
+      leave-active-class="animate__animated animate__fadeOut"
+    >
+      <div v-if="switchTabs" class="absolute inset-x-0 top-12 p-2 m-12 z-[50]">
+        Loading...
+      </div>
+    </Transition>
     <Transition
       enter-active-class="animate__animated animate__fadeIn"
       leave-active-class="animate__animated animate__fadeOut"
@@ -123,6 +132,9 @@ watch(
                 {{ item.shortDescription }}
               </p>
               <!--ADD 類似 NEWS ARTICLES.-->
+              <div class="flex flex-col bg-gray-500">
+                <div class="" v-for="item in likeart"></div>
+              </div>
             </div>
           </button>
         </div>
diff --git a/styles/main.css b/styles/main.css
index 5fab217..2c09b76 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -46,3 +46,4 @@
     --chart-5: 340 75% 55%;
   }
 }
+@plugin 'tailwind-scrollbar';