mirror of
https://github.com/hpware/news-analyze.git
synced 2025-06-23 21:14:23 +00:00
52 lines
1.7 KiB
Vue
52 lines
1.7 KiB
Vue
<script lang="ts" setup>
|
|
const localePath = useLocalePath();
|
|
// Import Icons
|
|
import { SearchXIcon, CircleSlash2Icon } from "lucide-vue-next";
|
|
const { t } = useI18n();
|
|
// Array
|
|
const tools = [
|
|
{
|
|
name: t("tools.name.checkweirdkeywords"),
|
|
content: t("tools.content.checkweirdkeywords"),
|
|
icon: SearchXIcon,
|
|
go: localePath("/tools/checkweirdkeywords"),
|
|
},
|
|
{
|
|
name: t("tools.name.noadlinetoday"),
|
|
content: t("tools.content.noadlinetoday"),
|
|
icon: CircleSlash2Icon,
|
|
go: localePath("/tools/freelinetoday"),
|
|
},
|
|
];
|
|
useSeoMeta({
|
|
title: `${t("tools.title")}`
|
|
})
|
|
</script>
|
|
<template>
|
|
<div
|
|
class="justify-center align-center absolute inset-0 flex flex-col w-full h-screen"
|
|
>
|
|
<h1 class="text-5xl text-bold m-4 text-center">{{ t("tools.title") }}</h1>
|
|
<div
|
|
class="justify-center align-center gap-2 p-2 w-full flex flex-row flex-wrap relative"
|
|
>
|
|
<NuxtLink :to="item.go" v-for="item in tools">
|
|
<div
|
|
class="px-10 bg-gray-900/70 w-[300px] h-[200px] group rounded-xl shadow-lg hover:shadow-sky-700/90 hover:-translate-y-3 backdrop-blur-sm border border-gray-800 hover:border-gray-600/70 transition-all duration-700 justify-center align-middle flex flex-col"
|
|
>
|
|
<component
|
|
:is="item.icon"
|
|
class="w-8 h-8 text-white group-hover:text-sky-500 transition-colors duration-300"
|
|
/>
|
|
<h3 class="text-xl font-bold">{{ item.name }}</h3>
|
|
<p
|
|
class="text-gray-400 group-hover:text-gray-300 transition-colors duration-300 text-wrap"
|
|
>
|
|
{{ item.content }}
|
|
</p>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
<div class="h-screen"></div>
|
|
</template>
|