90 lines
1.9 KiB
Vue
90 lines
1.9 KiB
Vue
<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>
|