132 lines
4.4 KiB
Vue
132 lines
4.4 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 class="group cursor-pointer">
|
|
<h3 class="text-lg font-medium text-default group-hover:text-primary transition-colors mb-2 line-clamp-2">
|
|
创特景区SaaS平台 打造专业景区共享出行综合解决方案
|
|
</h3>
|
|
<p class="text-sm text-muted">2025-07-08 12:40</p>
|
|
</div>
|
|
<div class="group cursor-pointer">
|
|
<h3 class="text-lg font-medium text-default group-hover:text-primary transition-colors mb-2">
|
|
为什么说景区共享代步车的未来发展空间巨大?
|
|
</h3>
|
|
<p class="text-sm text-muted">2023-05-08 11:25</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 class="group cursor-pointer">
|
|
<h3 class="text-lg font-medium text-default group-hover:text-primary transition-colors mb-2">
|
|
共享电动车为何能在共享经济中独树一帜?
|
|
</h3>
|
|
<p class="text-sm text-muted">2023-06-29 12:26</p>
|
|
</div>
|
|
<div class="group cursor-pointer">
|
|
<h3 class="text-lg font-medium text-default group-hover:text-primary transition-colors mb-2">
|
|
景区共享智能代步车运营方案有哪些?
|
|
</h3>
|
|
<p class="text-sm text-muted">2023-05-10 10:23</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 class="group cursor-pointer">
|
|
<h3 class="text-lg font-medium text-default group-hover:text-primary transition-colors mb-2">
|
|
景区共享电动代步车如何引领景区发展趋势?
|
|
</h3>
|
|
<p class="text-sm text-muted">2024-12-11 23:53</p>
|
|
</div>
|
|
<div class="group cursor-pointer">
|
|
<h3 class="text-lg font-medium text-default group-hover:text-primary transition-colors mb-2">
|
|
景区共享观光代步车为何如此火爆?
|
|
</h3>
|
|
<p class="text-sm text-muted">2023-07-13 15:42</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// 数据定义
|
|
const articles = {
|
|
solutions: [
|
|
{
|
|
title: "创特景区SaaS平台 打造专业景区共享出行综合解决方案",
|
|
date: "2025-07-08 12:40"
|
|
},
|
|
{
|
|
title: "为什么说景区共享代步车的未来发展空间巨大?",
|
|
date: "2023-05-08 11:25"
|
|
}
|
|
],
|
|
knowledge: [
|
|
{
|
|
title: "共享电动车为何能在共享经济中独树一帜?",
|
|
date: "极 2023-06-29 12:26"
|
|
},
|
|
{
|
|
title: "景区共享智能代步车运营方案有哪些?",
|
|
date: "2023-05-10 10:23"
|
|
}
|
|
],
|
|
trends: [
|
|
{
|
|
title: "景区共享电动代步车如何引领景区发展趋势?",
|
|
date: "2024-12-11 23:53"
|
|
},
|
|
{
|
|
title: "景区共享观光代步车为何如此火爆?",
|
|
date: "2023-07-13 15:42"
|
|
}
|
|
]
|
|
}
|
|
</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> |