init

2026-07-10 18:23:41 +08:00
commit bc9e794a57
80 changed files with 19016 additions and 0 deletions
@@ -0,0 +1,68 @@
+<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>