69 lines
2.4 KiB
Vue
69 lines
2.4 KiB
Vue
<script setup>
|
|
import { computed, ref } from "vue";
|
|
import { insights, insightCategories } from "~/data/insights";
|
|
|
|
const categories = insightCategories.filter((category) => category !== "全部");
|
|
const activeCategory = ref(categories[0]);
|
|
|
|
const filteredArticles = computed(() =>
|
|
insights.filter((article) => article.category === activeCategory.value),
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<section class="bg-[#fafafa] py-20" id="insights">
|
|
<div class="container-gm">
|
|
<div class="text-center" data-reveal>
|
|
<p class="text-sm text-[#a1a1a1]">聚焦于</p>
|
|
<h2 class="section-title mt-4">原创观点</h2>
|
|
</div>
|
|
|
|
<div class="mt-8 flex flex-wrap justify-center gap-3" data-reveal>
|
|
<button
|
|
v-for="category in categories"
|
|
:key="category"
|
|
type="button"
|
|
class="rounded-full border px-6 py-2 text-sm transition-all duration-300"
|
|
:class="
|
|
activeCategory === category
|
|
? 'border-gm-green bg-gm-green text-white'
|
|
: 'border-gm-border bg-white text-[#666] hover:border-[#d5d5d5]'
|
|
"
|
|
@click="activeCategory = category"
|
|
>
|
|
{{ category }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3" data-stagger>
|
|
<article
|
|
v-for="article in filteredArticles"
|
|
:key="article.title"
|
|
class="overflow-hidden rounded-[28px] border border-gm-border bg-white shadow-sm transition hover:-translate-y-1 hover:shadow-lg"
|
|
data-stagger-item
|
|
>
|
|
<div class="h-56 overflow-hidden bg-gm-light">
|
|
<img
|
|
:src="article.image"
|
|
:alt="article.title"
|
|
class="h-full w-full object-cover"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
<div class="p-6">
|
|
<p class="text-xs font-medium text-gm-green">{{ article.category }}</p>
|
|
<h3 class="mt-3 text-lg font-semibold leading-7 text-[#262626]">
|
|
{{ article.title }}
|
|
</h3>
|
|
<p class="mt-3 text-xs text-[#9b9b9b]">{{ article.date }}</p>
|
|
<NuxtLink to="/insights" class="mt-4 inline-flex items-center gap-2 text-sm font-medium text-gm-green">
|
|
查看详情
|
|
<span aria-hidden="true">→</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|