147 lines
4.3 KiB
Vue
147 lines
4.3 KiB
Vue
<template>
|
|
<div class="bg-default py-12">
|
|
<div class="container mx-auto px-4 max-w-6xl">
|
|
<!-- 页面标题 -->
|
|
<div class="text-center mb-12">
|
|
<h1 class="text-3xl lg:text-4xl font-bold text-default mb-2">
|
|
开发资讯
|
|
</h1>
|
|
<p class="text-lg text-muted">NEWS</p>
|
|
</div>
|
|
|
|
<!-- 三栏资讯布局 -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
|
|
<!-- 解决方案栏目 -->
|
|
<div class="bg-default border border-divider rounded-lg shadow-sm">
|
|
<div class="p-6 border-b border-divider">
|
|
<h2 class="text-xl font-semibold text-default">解决方案</h2>
|
|
</div>
|
|
<div class="p-6 space-y-6">
|
|
<div
|
|
v-for="article in articles.solutions"
|
|
:key="article.id"
|
|
class="group cursor-pointer"
|
|
@click="handleArticleClick(article.link)"
|
|
>
|
|
<h3 class="text-lg font-medium text-default group-hover:text-primary transition-colors mb-2 line-clamp-2">
|
|
{{ article.title }}
|
|
</h3>
|
|
<p class="text-sm text-muted">{{ article.date }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 开发知识栏目 -->
|
|
<div class="bg-default border border-divider rounded-lg shadow-sm">
|
|
<div class="p-6 border-b border-divider">
|
|
<h2 class="text-xl font-semibold text-default">开发知识</h2>
|
|
</div>
|
|
<div class="p-6 space-y-6">
|
|
<div
|
|
v-for="article in articles.knowledge"
|
|
:key="article.id"
|
|
class="group cursor-pointer"
|
|
@click="handleArticleClick(article.link)"
|
|
>
|
|
<h3 class="text-lg font-medium text-default group-hover:text-primary transition-colors mb-2">
|
|
{{ article.title }}
|
|
</h3>
|
|
<p class="text-sm text-muted">{{ article.date }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 行业动态栏目 -->
|
|
<div class="bg-default border border-divider rounded-lg shadow-sm">
|
|
<div class="p-6 border-b border-divider">
|
|
<h2 class="text-xl font-semibold text-default">行业动态</h2>
|
|
</div>
|
|
<div class="p-6 space-y-6">
|
|
<div
|
|
v-for="article in articles.trends"
|
|
:key="article.id"
|
|
class="group cursor-pointer"
|
|
@click="handleArticleClick(article.link)"
|
|
>
|
|
<h3 class="text-lg font-medium text-default group-hover:text-primary transition-colors mb-2">
|
|
{{ article.title }}
|
|
</h3>
|
|
<p class="text-sm text-muted">{{ article.date }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// 数据定义
|
|
const articles = {
|
|
solutions: [
|
|
{
|
|
id: 1,
|
|
title: "创特景区SaaS平台 打造专业景区共享出行综合解决方案",
|
|
date: "2025-07-08 12:40",
|
|
link: "/new"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "为什么说景区共享代步车的未来发展空间巨大?",
|
|
date: "2023-05-08 11:25",
|
|
link: "/news/scenic-shared-vehicle-future"
|
|
}
|
|
],
|
|
knowledge: [
|
|
{
|
|
id: 3,
|
|
title: "共享电动车为何能在共享经济中独树一帜?",
|
|
date: "2023-06-29 12:26",
|
|
link: "/news/shared-ebike-unique-position"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "景区共享智能代步车运营方案有哪些?",
|
|
date: "2023-05-10 10:23",
|
|
link: "/news/scenic-smart-vehicle-operations"
|
|
}
|
|
],
|
|
trends: [
|
|
{
|
|
id: 5,
|
|
title: "景区共享电动代步车如何引领景区发展趋势?",
|
|
date: "2024-12-11 23:53",
|
|
link: "/news/scenic-ebike-trend-leadership"
|
|
},
|
|
{
|
|
id: 6,
|
|
title: "景区共享观光代步车为何如此火爆?",
|
|
date: "2023-07-13 15:42",
|
|
link: "/news/scenic-sightseeing-vehicle-popularity"
|
|
}
|
|
]
|
|
}
|
|
|
|
// 处理文章点击事件
|
|
const handleArticleClick = (articleLink) => {
|
|
// 使用Nuxt的navigateTo进行路由跳转
|
|
navigateTo(articleLink)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 1024px) {
|
|
.grid {
|
|
gap: 1.5rem;
|
|
}
|
|
}
|
|
</style> |