ct/app/components/DevelopNews.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>