From 6a4800acbb12d6e7b05145e603bdd2643affcf4e Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Tue, 7 Oct 2025 17:10:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E7=AB=A0=E9=A1=B5=E9=9D=A2=E5=92=8C?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/DevelopNews.vue   |  81 +++---
 app/components/news/new.vue      | 470 +++++++++++++++++++++++++++++++
 app/components/news/solution.vue |  11 +
 app/pages/new.vue                |  13 +
 4 files changed, 542 insertions(+), 33 deletions(-)
 create mode 100644 app/components/news/new.vue
 create mode 100644 app/components/news/solution.vue
 create mode 100644 app/pages/new.vue

diff --git a/app/components/DevelopNews.vue b/app/components/DevelopNews.vue
index e29d624..78e85c0 100644
--- a/app/components/DevelopNews.vue
+++ b/app/components/DevelopNews.vue
@@ -18,17 +18,16 @@
             <h2 class="text-xl font-semibold text-default">解决方案</h2>
           </div>
           <div class="p-6 space-y-6">
-            <div class="group cursor-pointer">
+            <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">
-                创特景区SaaS平台 打造专业景区共享出行综合解决方案
+                {{ article.title }}
               </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>
+              <p class="text-sm text-muted">{{ article.date }}</p>
             </div>
           </div>
         </div>
@@ -39,17 +38,16 @@
             <h2 class="text-xl font-semibold text-default">开发知识</h2>
           </div>
           <div class="p-6 space-y-6">
-            <div class="group cursor-pointer">
+            <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">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>
+              <p class="text-sm text-muted">{{ article.date }}</p>
             </div>
           </div>
         </div>
@@ -60,17 +58,16 @@
             <h2 class="text-xl font-semibold text-default">行业动态</h2>
           </div>
           <div class="p-6 space-y-6">
-            <div class="group cursor-pointer">
+            <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">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>
+              <p class="text-sm text-muted">{{ article.date }}</p>
             </div>
           </div>
         </div>
@@ -84,35 +81,53 @@
 const articles = {
   solutions: [
     {
+      id: 1,
       title: "创特景区SaaS平台 打造专业景区共享出行综合解决方案",
-      date: "2025-07-08 12:40"
+      date: "2025-07-08 12:40",
+      link: "/new"
     },
     {
+      id: 2,
       title: "为什么说景区共享代步车的未来发展空间巨大?",
-      date: "2023-05-08 11:25"
+      date: "2023-05-08 11:25",
+      link: "/news/scenic-shared-vehicle-future"
     }
   ],
   knowledge: [
     {
+      id: 3,
       title: "共享电动车为何能在共享经济中独树一帜?",
-      date: "极 2023-06-29 12:26"
+      date: "2023-06-29 12:26",
+      link: "/news/shared-ebike-unique-position"
     },
     {
+      id: 4,
       title: "景区共享智能代步车运营方案有哪些?",
-      date: "2023-05-10 10:23"
+      date: "2023-05-10 10:23",
+      link: "/news/scenic-smart-vehicle-operations"
     }
   ],
   trends: [
     {
+      id: 5,
       title: "景区共享电动代步车如何引领景区发展趋势?",
-      date: "2024-12-11 23:53"
+      date: "2024-12-11 23:53",
+      link: "/news/scenic-ebike-trend-leadership"
     },
     {
+      id: 6,
       title: "景区共享观光代步车为何如此火爆?",
-      date: "2023-07-13 15:42"
+      date: "2023-07-13 15:42",
+      link: "/news/scenic-sightseeing-vehicle-popularity"
     }
   ]
 }
+
+// 处理文章点击事件
+const handleArticleClick = (articleLink) => {
+  // 使用Nuxt的navigateTo进行路由跳转
+  navigateTo(articleLink)
+}
 </script>
 
 <style scoped>
diff --git a/app/components/news/new.vue b/app/components/news/new.vue
new file mode 100644
index 0000000..fb43567
--- /dev/null
+++ b/app/components/news/new.vue
@@ -0,0 +1,470 @@
+<script lang="ts" setup>
+// 文章头部信息
+const articleHeader = {
+  title: '共享烘干机APP方案开发与制作',
+  date: '2019年05月22日 15:36',
+  category: '共享解决方案'
+}
+
+// 文章主要内容
+const articleContent = {
+  headline: '共享干衣机方案开发',
+  description: '解决用户出差旅行时衣服换洗烘干、衣服消毒去味、衣服熨烫等问题，使出行更加方便和快捷，让出差更简单。',
+  heroImage: {
+    src: 'https://picsum.photos/600/400?random=shared-dryer',
+    alt: '共享干衣机',
+    overlayText: '方案开发'
+  },
+  paragraphs: [
+    '根据中国酒店行业市场报告调查显示，随着旅游业的快速发展，酒店行业也迎来了新的发展机遇。共享经济模式在酒店行业的应用越来越广泛，从共享酒店到共享空气净化器，再到共享烘干机，各种共享项目层出不穷。',
+    '共享烘干机解决的痛点主要是酒店住宿人群的一个共享烦恼。在酒店住宿时，衣服洗完后很难快速晾干，特别是在潮湿的天气或者没有阳台的房间。共享烘干机通过手机扫码支付，提供便捷、快速、卫生的烘干服务，让用户在旅途中也能轻松处理衣物问题。'
+  ],
+  tags: [
+    '共享烘干机方案开发',
+    '共享自助干衣机软件硬件方案'
+  ]
+}
+
+// 热门标签
+const popularTags = [
+  '景区单车',
+  '政务平台',
+  '共享经济',
+  '共享汽车APP开发',
+  '共享雨伞APP开发',
+  '共享充电宝APP开发',
+  '共享按摩椅APP开发',
+  '共享洗衣机APP开发',
+  '共享烘干机APP开发'
+]
+
+// 解决方案文章列表
+const solutionsArticles = [
+  {
+    id: 1,
+    title: '共享烘干机APP方案开发与制作',
+    date: '2019-05-22',
+    link: '/news/shared-dryer-solution'
+  },
+  {
+    id: 2,
+    title: '怎么样找合适的共享解决方案开发公司?',
+    date: '2019-05-22',
+    link: '/news/how-to-find-shared-solution-company'
+  },
+  {
+    id: 3,
+    title: '玉屏无人售货机系统软硬件一体化方案',
+    date: '2019-05-21',
+    link: '/news/unmanned-vending-machine-solution'
+  },
+  {
+    id: 4,
+    title: '共享充电线凭什么这么火?',
+    date: '2019-05-20',
+    link: '/news/why-shared-charging-cable-popular'
+  },
+  {
+    id: 5,
+    title: '玉犀无人售货机系统软硬件一体化方案',
+    date: '2019-05-19',
+    link: '/news/yuxi-unmanned-vending-machine'
+  },
+  {
+    id: 6,
+    title: '共享经济下的新商业模式探索',
+    date: '2019-05-18',
+    link: '/news/shared-economy-business-model'
+  },
+  {
+    id: 7,
+    title: '物联网技术在共享设备中的应用',
+    date: '2019-05-17',
+    link: '/news/iot-in-shared-devices'
+  },
+  {
+    id: 8,
+    title: '智能硬件开发的技术难点解析',
+    date: '2019-05-16',
+    link: '/news/smart-hardware-development-challenges'
+  },
+  {
+    id: 9,
+    title: '移动支付在共享经济中的重要性',
+    date: '2019-05-15',
+    link: '/news/mobile-payment-in-shared-economy'
+  },
+  {
+    id: 10,
+    title: '用户体验设计在共享APP中的关键作用',
+    date: '2019-05-14',
+    link: '/news/ux-design-in-shared-app'
+  }
+]
+
+// 开发知识文章列表
+const devKnowledgeArticles = [
+  {
+    id: 1,
+    title: '怎么样找合适的共享解决方案开发公司?',
+    date: '2019-05-22',
+    link: '/news/how-to-find-shared-solution-company'
+  },
+  {
+    id: 2,
+    title: '共享APP开发的技术架构选择',
+    date: '2019-05-21',
+    link: '/news/shared-app-tech-architecture'
+  },
+  {
+    id: 3,
+    title: '移动端开发的最佳实践',
+    date: '2019-05-20',
+    link: '/news/mobile-development-best-practices'
+  },
+  {
+    id: 4,
+    title: '云服务在共享经济中的应用',
+    date: '2019-05-19',
+    link: '/news/cloud-services-in-shared-economy'
+  },
+  {
+    id: 5,
+    title: '数据库设计在共享系统中的考虑',
+    date: '2019-05-18',
+    link: '/news/database-design-shared-system'
+  },
+  {
+    id: 6,
+    title: 'API设计的最佳实践',
+    date: '2019-05-17',
+    link: '/news/api-design-best-practices'
+  },
+  {
+    id: 7,
+    title: '前端框架选择指南',
+    date: '2019-05-16',
+    link: '/news/frontend-framework-selection'
+  },
+  {
+    id: 8,
+    title: '后端技术栈推荐',
+    date: '2019-05-15',
+    link: '/news/backend-tech-stack-recommendation'
+  },
+  {
+    id: 9,
+    title: 'DevOps在项目开发中的应用',
+    date: '2019-05-14',
+    link: '/news/devops-in-project-development'
+  },
+  {
+    id: 10,
+    title: '代码质量保证的方法',
+    date: '2019-05-13',
+    link: '/news/code-quality-assurance'
+  }
+]
+
+// 行业动态文章列表
+const industryTrendsArticles = [
+  {
+    id: 1,
+    title: '酒店共享烘干机 引领共享经济新革命',
+    date: '2019-05-22',
+    link: '/news/hotel-shared-dryer-revolution'
+  },
+  {
+    id: 2,
+    title: '玉犀科技浅析共享碾米机方案开发的发展潜力',
+    date: '2019-05-21',
+    link: '/news/shared-rice-mill-development-potential'
+  },
+  {
+    id: 3,
+    title: '共享经济市场规模持续增长',
+    date: '2019-05-20',
+    link: '/news/shared-economy-market-growth'
+  },
+  {
+    id: 4,
+    title: '物联网技术推动共享设备智能化',
+    date: '2019-05-19',
+    link: '/news/iot-promotes-shared-device-intelligence'
+  },
+  {
+    id: 5,
+    title: '移动支付普及加速共享经济发展',
+    date: '2019-05-18',
+    link: '/news/mobile-payment-accelerates-shared-economy'
+  },
+  {
+    id: 6,
+    title: '人工智能在共享服务中的应用',
+    date: '2019-05-17',
+    link: '/news/ai-in-shared-services'
+  },
+  {
+    id: 7,
+    title: '区块链技术为共享经济带来新机遇',
+    date: '2019-05-16',
+    link: '/news/blockchain-opportunities-shared-economy'
+  },
+  {
+    id: 8,
+    title: '5G技术将如何改变共享经济',
+    date: '2019-05-15',
+    link: '/news/5g-changes-shared-economy'
+  },
+  {
+    id: 9,
+    title: '可持续发展理念在共享经济中的体现',
+    date: '2019-05-14',
+    link: '/news/sustainability-in-shared-economy'
+  },
+  {
+    id: 10,
+    title: '共享经济监管政策的最新动态',
+    date: '2019-05-13',
+    link: '/news/shared-economy-regulation-updates'
+  }
+]
+
+// 分页导航
+const pagination = {
+  previous: {
+    title: '共享充电线凭什么这么火?',
+    link: '/news/why-shared-charging-cable-popular'
+  },
+  next: {
+    title: '玉犀无人售货机系统软硬件一体化方案',
+    link: '/news/yuxi-unmanned-vending-machine'
+  }
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <!-- 页面布局 -->
+    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
+        
+        <!-- 主内容区域 -->
+        <div class="lg:col-span-3">
+          <!-- 文章头部 -->
+          <header class="mb-8">
+            <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
+              {{ articleHeader.title }}
+            </h1>
+            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between text-gray-600 dark:text-gray-400">
+              <span class="text-lg mb-2 sm:mb-0">{{ articleHeader.date }}</span>
+              <span class="text-lg">分类: {{ articleHeader.category }}</span>
+            </div>
+          </header>
+
+          <!-- 文章内容 -->
+          <article class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 md:p-8">
+            <!-- 文章标题 -->
+            <h2 class="text-2xl md:text-3xl font-bold text-blue-600 dark:text-blue-400 mb-6">
+              {{ articleContent.headline }}
+            </h2>
+
+            <!-- 文章描述 -->
+            <p class="text-lg text-gray-700 dark:text-gray-300 mb-8 leading-relaxed">
+              {{ articleContent.description }}
+            </p>
+
+            <!-- 主图展示 -->
+            <div class="relative mb-8">
+              <div class="relative overflow-hidden rounded-xl">
+                <img 
+                  :src="articleContent.heroImage.src" 
+                  :alt="articleContent.heroImage.alt"
+                  class="w-full h-64 md:h-80 object-cover"
+                >
+                <!-- 红色覆盖按钮 -->
+                <div class="absolute bottom-4 right-4">
+                  <div class="bg-red-600 text-white px-4 py-2 rounded-lg font-semibold shadow-lg">
+                    {{ articleContent.heroImage.overlayText }}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 文章段落 -->
+            <div class="space-y-6 mb-8">
+              <p 
+                v-for="(paragraph, index) in articleContent.paragraphs" 
+                :key="index"
+                class="text-gray-700 dark:text-gray-300 leading-relaxed"
+              >
+                {{ paragraph }}
+              </p>
+            </div>
+
+            <!-- 文章标签 -->
+            <div class="mb-8">
+              <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">标签:</h3>
+              <div class="flex flex-wrap gap-2">
+                <span 
+                  v-for="tag in articleContent.tags" 
+                  :key="tag"
+                  class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm font-medium hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors duration-200"
+                >
+                  {{ tag }}
+                </span>
+              </div>
+            </div>
+
+            <!-- 分页导航 -->
+            <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
+              <div class="flex flex-col sm:flex-row sm:justify-between gap-4">
+                <div v-if="pagination.previous" class="flex-1">
+                  <NuxtLink 
+                    :to="pagination.previous.link"
+                    class="block p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200"
+                  >
+                    <div class="text-sm text-gray-500 dark:text-gray-400 mb-1">上一篇:</div>
+                    <div class="text-gray-900 dark:text-white font-medium">{{ pagination.previous.title }}</div>
+                  </NuxtLink>
+                </div>
+                <div v-if="pagination.next" class="flex-1">
+                  <NuxtLink 
+                    :to="pagination.next.link"
+                    class="block p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 text-right"
+                  >
+                    <div class="text-sm text-gray-500 dark:text-gray-400 mb-1">下一篇:</div>
+                    <div class="text-gray-900 dark:text-white font-medium">{{ pagination.next.title }}</div>
+                  </NuxtLink>
+                </div>
+              </div>
+            </div>
+          </article>
+        </div>
+
+        <!-- 侧边栏 -->
+        <div class="lg:col-span-1">
+          <div class="space-y-8">
+            
+            <!-- 热门标签 -->
+            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
+              <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
+                热门标签
+              </h3>
+              <div class="flex flex-wrap gap-2">
+                <NuxtLink 
+                  v-for="tag in popularTags" 
+                  :key="tag"
+                  to="/tags"
+                  class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm hover:bg-blue-100 dark:hover:bg-blue-900 hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200"
+                >
+                  {{ tag }}
+                </NuxtLink>
+              </div>
+            </div>
+
+            <!-- 解决方案 -->
+            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
+              <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
+                解决方案
+              </h3>
+              <div class="space-y-3">
+                <NuxtLink 
+                  v-for="article in solutionsArticles" 
+                  :key="article.id"
+                  :to="article.link"
+                  class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
+                >
+                  <div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
+                    {{ article.title }}
+                  </div>
+                  <div class="text-sm text-gray-500 dark:text-gray-400">
+                    {{ article.date }}
+                  </div>
+                </NuxtLink>
+              </div>
+            </div>
+
+            <!-- 开发知识 -->
+            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
+              <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
+                开发知识
+              </h3>
+              <div class="space-y-3">
+                <NuxtLink 
+                  v-for="article in devKnowledgeArticles" 
+                  :key="article.id"
+                  :to="article.link"
+                  class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
+                >
+                  <div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
+                    {{ article.title }}
+                  </div>
+                  <div class="text-sm text-gray-500 dark:text-gray-400">
+                    {{ article.date }}
+                  </div>
+                </NuxtLink>
+              </div>
+            </div>
+
+            <!-- 行业动态 -->
+            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
+              <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
+                行业动态
+              </h3>
+              <div class="space-y-3">
+                <NuxtLink 
+                  v-for="article in industryTrendsArticles" 
+                  :key="article.id"
+                  :to="article.link"
+                  class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
+                >
+                  <div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
+                    {{ article.title }}
+                  </div>
+                  <div class="text-sm text-gray-500 dark:text-gray-400">
+                    {{ article.date }}
+                  </div>
+                </NuxtLink>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 文本截断样式 */
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* 响应式调整 */
+@media (max-width: 1024px) {
+  .grid-cols-4 {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 悬停效果 */
+.hover\:bg-gray-50:hover {
+  background-color: rgb(249 250 251);
+}
+
+.dark .hover\:bg-gray-50:hover {
+  background-color: rgb(55 65 81);
+}
+
+.hover\:bg-gray-100:hover {
+  background-color: rgb(243 244 246);
+}
+
+.dark .hover\:bg-gray-100:hover {
+  background-color: rgb(75 85 99);
+}
+</style>
\ No newline at end of file
diff --git a/app/components/news/solution.vue b/app/components/news/solution.vue
new file mode 100644
index 0000000..27324a8
--- /dev/null
+++ b/app/components/news/solution.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/app/pages/new.vue b/app/pages/new.vue
new file mode 100644
index 0000000..f6690fc
--- /dev/null
+++ b/app/pages/new.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <view>
+    <NewsNew/>
+  </view>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file