nuxt初始化

nuxt-web/pages/news/[slug].vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+const route = useRoute()
+const articlePath = `/news/${route.params.slug}`
+
+const { data: article } = await useAsyncData(`news-${route.params.slug}`, () => {
+  return queryCollection('news').path(articlePath).first()
+})
+
+if (!article.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: `News article not found: ${route.params.slug}`
+  })
+}
+
+useSeo({
+  title: article.value.title,
+  description: article.value.description,
+  keywords: article.value.keywords,
+  ogImage: article.value.cover,
+  canonicalPath: articlePath
+})
+
+const breadcrumbItems = [
+  { label: '首页', to: '/' },
+  { label: '新闻动态', to: '/news' },
+  { label: article.value.title }
+]
+</script>
+
+<template>
+  <div>
+    <SectionBanner
+      :title="article!.title"
+      :description="article!.summary"
+      background-image="/images/page-title3.png"
+    />
+    <Breadcrumb :items="breadcrumbItems" />
+
+    <main class="article-page">
+      <article class="article-card">
+        <p class="article-date">{{ article!.date }}</p>
+        <h1>{{ article!.title }}</h1>
+        <img :src="article!.cover" :alt="article!.title" class="article-cover">
+        <ContentRenderer :value="article" />
+      </article>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.article-page {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 24px 20px 64px;
+}
+
+.article-card {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 12px 24px rgba(16, 37, 65, 0.08);
+  padding: 32px;
+}
+
+.article-date {
+  color: #4f6f93;
+  font-size: 14px;
+}
+
+.article-cover {
+  width: 100%;
+  border-radius: 16px;
+  margin: 24px 0;
+}
+</style>

nuxt-web/pages/news/index.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+const { data: articles } = await useAsyncData('news-list', () => {
+  return queryCollection('news')
+    .order('date', 'DESC')
+    .all()
+})
+
+useSeo({
+  title: '新闻动态',
+  description: '了解岸基科技的最新动态、企业荣誉与行业洞察。',
+  keywords: '岸基科技,新闻动态,企业荣誉,行业洞察',
+  canonicalPath: '/news'
+})
+
+const breadcrumbItems = [
+  { label: '首页', to: '/' },
+  { label: '新闻动态' }
+]
+</script>
+
+<template>
+  <div>
+    <SectionBanner
+      title="新闻与洞察"
+      description="了解岸基最新动态，见证每一步成长。"
+      background-image="/images/page-title6.png.webp"
+    />
+    <Breadcrumb :items="breadcrumbItems" />
+
+    <main class="news-page">
+      <article v-for="article in articles || []" :key="article.id" class="news-card">
+        <NuxtLink :to="article.path" class="news-card__link">
+          <img :src="article.cover" :alt="article.title" class="news-card__image">
+          <div class="news-card__body">
+            <p class="news-card__meta">{{ article.date }}</p>
+            <h2>{{ article.title }}</h2>
+            <p>{{ article.summary }}</p>
+          </div>
+        </NuxtLink>
+      </article>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.news-page {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 24px 20px 64px;
+  display: grid;
+  gap: 24px;
+}
+
+.news-card {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 12px 24px rgba(16, 37, 65, 0.08);
+  overflow: hidden;
+}
+
+.news-card__link {
+  display: grid;
+  grid-template-columns: 320px minmax(0, 1fr);
+  color: inherit;
+}
+
+.news-card__image {
+  width: 100%;
+  height: 100%;
+  min-height: 220px;
+  object-fit: cover;
+}
+
+.news-card__body {
+  padding: 24px;
+}
+
+.news-card__meta {
+  color: #4f6f93;
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+
+@media (max-width: 767px) {
+  .news-card__link {
+    grid-template-columns: 1fr;
+  }
+}
+</style>