yuanhau/news-analyze
1
0
Fork 0
mirror of https://github.com/hpware/news-analyze.git synced 2025-06-23 13:04:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add tailwind scrollbar && Loading logic?

Browse source
This commit is contained in:
yuanhau 2025-05-27 09:02:05 +08:00
parent 9accdb28c1
commit a4ccad0989
2 changed files with 14 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

14
components/app/windows/news.vue
View file

@ -13,6 +13,7 @@ const errorr = ref(false);
const switchTabs = ref(false); const switchTabs = ref(false);
const tabs = ref([]); const tabs = ref([]);
const primary = ref<string>("domestic"); const primary = ref<string>("domestic");
const likeart = ref([]);
const updateContent = async (url: string, tabAction: boolean) => { const updateContent = async (url: string, tabAction: boolean) => {
if (tabAction === true) { if (tabAction === true) {
@ -75,7 +76,7 @@ watch(
<div class="justify-center align-center text-center"> <div class="justify-center align-center text-center">
<!--Tabs--> <!--Tabs-->
<div <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"> <div class="gap-2 flex flex-row justify-center align-center text-center">
<button <button
@ -88,6 +89,14 @@ watch(
</button> </button>
</div> </div>
</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 <Transition
enter-active-class="animate__animated animate__fadeIn" enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut" leave-active-class="animate__animated animate__fadeOut"
@ -123,6 +132,9 @@ watch(
{{ item.shortDescription }} {{ item.shortDescription }}
</p> </p>
<!--ADD 類似 NEWS ARTICLES.--> <!--ADD 類似 NEWS ARTICLES.-->
<div class="flex flex-col bg-gray-500">
<div class="" v-for="item in likeart"></div>
</div>
</div> </div>
</button> </button>
</div> </div>

1
styles/main.css
View file

@ -46,3 +46,4 @@
--chart-5: 340 75% 55%; --chart-5: 340 75% 55%;
} }
} }
@plugin 'tailwind-scrollbar';