ct/app/components/News.vue

<template>
  <div class="min-h-screen bg-white dark:bg-gray-900 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-gray-900 dark:text-white mb-2">
          开发资讯
        </h1>
        <p class="text-lg text-gray-600 dark:text-gray-400">NEWS</p>
      </div>

      <!-- 三栏资讯布局 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

        <!-- 解决方案栏目 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700">
          <div class="p-6 border-b border-gray-100 dark:border-gray-600">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">解决方案</h2>
          </div>
          <div class="p-6 space-y-6">
            <div class="group cursor-pointer">
              <h3 class="text-lg font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors mb-2 line-clamp-2">
                玉犀景区SaaS平台 打造专业景区共享出行综合解决方案
              </h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">2025-07-08 12:40</p>
            </div>
            <div class="group cursor-pointer">
              <h3 class="text-lg font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors mb-2">
                为什么说景区共享代步车的未来发展空间巨大?
              </h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">2023-05-08 11:25</p>
            </div>
          </div>
        </div>

        <!-- 开发知识栏目 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700">
          <div class="p-6 border-b border-gray-100 dark:border-gray-600">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">开发知识</h2>
          </div>
          <div class="p-6 space-y-6">
            <div class="group cursor-pointer">
              <h3 class="text-lg font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors mb-2">
                共享电动车为何能在共享经济中独树一帜?
              </h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">2023-06-29 12:26</p>
            </div>
            <div class="group cursor-pointer">
              <h3 class="text-lg font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors mb-2">
                景区共享智能代步车运营方案有哪些?
              </h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">2023-05-10 10:23</p>
            </div>
          </div>
        </div>

        <!-- 行业动态栏目 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700">
          <div class="p-6 border-b border-gray-100 dark:border-gray-600">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">行业动态</h2>
          </div>
          <div class="p-6 space-y-6">
            <div class="group cursor-pointer">
              <h3 class="text-lg font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors mb-2">
                景区共享电动代步车如何引领景区发展趋势?
              </h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">2024-12-11 23:53</p>
            </div>
            <div class="group cursor-pointer">
              <h3 class="text-lg font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors mb-2">
                景区共享观光代步车为何如此火爆?
              </h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">2023-07-13 15:42</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 加载更多按钮 -->
      <div class="text-center mt-12">
        <button
            class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-medium transition-colors duration-300">
          加载更多资讯
        </button>
      </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>