ct/app/components/DevelopNews.vue

<template>
  <div class=" 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>
  </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>