feat: refactor landing pages with ArticleGrid component and fix navigation

2026-01-25 23:51:43 +08:00
parent af4913a799
commit 6f78114865
48 changed files with 1640 additions and 127 deletions
@@ -0,0 +1,56 @@
+<script setup>
+import ArticleCard from './ArticleCard.vue'
+
+defineProps({
+  categories: {
+    type: Array,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="category-index">
+    <div v-for="(category, index) in categories" :key="index" class="category-section">
+      <h2 v-if="category.title" class="category-title">{{ category.title }}</h2>
+      <p v-if="category.description" class="category-desc">{{ category.description }}</p>
+      
+      <div class="card-grid">
+        <ArticleCard
+          v-for="(item, i) in category.items"
+          :key="i"
+          v-bind="item"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.category-index {
+  margin-top: 24px;
+}
+
+.category-section {
+  margin-bottom: 48px;
+}
+
+.category-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 16px;
+  border-bottom: none;
+}
+
+.category-desc {
+  font-size: 1rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 24px;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+}
+</style>