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

feat: integrate animate.css for animations, enhance layout, and improve localization files

Browse source
This commit is contained in:
yuanhau 2025-05-06 19:31:53 +08:00
parent 95661e908a
commit 2f20d49091
21 changed files with 252 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

56
pages/newsOrgAbout/[slug].vue
View file

@ -1,17 +1,21 @@
<script setup lang="ts">
import { gsap } from 'gsap';
import { ScrambleTextPlugin } from 'gsap/dist/ScrambleTextPlugin';
gsap.registerPlugin(ScrambleTextPlugin)
import { gsap } from "gsap";
import { ScrambleTextPlugin } from "gsap/dist/ScrambleTextPlugin";
gsap.registerPlugin(ScrambleTextPlugin);
const loading = ref(true);
const route = useRoute();
const slug = route.params.slug;
const { t, locale } = useI18n();
const { t, locale } = useI18n();
definePageMeta({
layout: "newsorg",
});
const { data: fetchNewsOrgInfo, pending, error } = useFetch("/api/getData/fetchNewsOrgInfo", {
const {
data: fetchNewsOrgInfo,
pending,
error,
} = useFetch("/api/getData/fetchNewsOrgInfo", {
method: "POST",
headers: {
"Content-Type": "application/json",
@ -32,10 +36,10 @@ useSeoMeta({
const orgNameAnimation = ref(null);
onMounted(() => {
gsap.to(orgNameAnimation.value, {
duration: 1,
scrambleText: fetchNewsOrgInfo.value?.title,
});
gsap.to(orgNameAnimation.value, {
duration: 1,
scrambleText: fetchNewsOrgInfo.value?.title,
});
});
// Import Icons
@ -44,17 +48,33 @@ import { GlobeAltIcon } from "@heroicons/vue/24/outline";
<template>
<div>
<div class="text-center align-center justify-center">
<div class="flex flex-row bg-[#AAACAAFF] rounded-3xl p-3 gap-3 m-3">
<NuxtImg :src="fetchNewsOrgInfo?.logoUrl" class="w-48 h-48 rounded-[10px]"/>
<div
class="flex flex-row bg-[#AAACAAFF] rounded-3xl p-3 gap-3 m-3 scale-5"
>
<NuxtImg
:src="fetchNewsOrgInfo?.logoUrl"
class="w-48 h-48 rounded-[10px]"
/>
<div class="flex flex-col gap-3 text-left">
<h1 class="text-4xl font-bold m-3 text-left">{{ fetchNewsOrgInfo?.title }}</h1>
<span class="text-ms m-1 mt-5 text-left text-wrap">{{ fetchNewsOrgInfo?.description }}</span>
<h1 class="text-4xl font-bold m-3 text-left">
{{ fetchNewsOrgInfo?.title }}
</h1>
<span class="text-ms m-1 mt-5 text-left text-wrap">{{
fetchNewsOrgInfo?.description
}}</span>
</div>
</div>
<div class="gap-[3px] flex flex-row text-center align-center justify-center">
<a :href="fetchNewsOrgInfo?.website" target="_blank" class="text-blue-200 hover:text-blue-300 transiton-all duration-100 flex flex-row"><GlobeAltIcon class="w-6 h-6" />網站</a>
</div>
<div
class="gap-[3px] flex flex-row text-center align-center justify-center"
>
<a
:href="fetchNewsOrgInfo?.website"
target="_blank"
class="text-blue-200 hover:text-blue-300 transiton-all duration-100 flex flex-row"
><GlobeAltIcon class="w-6 h-6" />網站</a
>
</div>
</div>
</div>
</template>
</div>
</template>