From 3a23aa3d9d2e4d792773b46e2633da0a52673959 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Sat, 25 Oct 2025 17:27:13 +0800
Subject: [PATCH] static news detail

---
 app/components/news/new.vue       | 141 +++++++-----------------------
 app/composables/useImageStyles.ts |   6 +-
 app/pages/news/index.vue          |   3 +
 3 files changed, 36 insertions(+), 114 deletions(-)

diff --git a/app/components/news/new.vue b/app/components/news/new.vue
index 2f6afbd..1d686f3 100644
--- a/app/components/news/new.vue
+++ b/app/components/news/new.vue
@@ -46,11 +46,6 @@ const articleData = computed(() => props.articleData)
 const loading = computed(() => props.loading)
 const error = computed(() => props.error)
 
-// 热门标签
-const hotTags = ref([
-  '景区单车', '政务平台', '共享经济', '共享汽车APP开发', '共享类',
-  '共享汽车软件开发', '共享雨伞APP开发', '共享雨伞软件开发', '共享货车开发'
-])
 
 // 重新加载页面方法
 const reloadPage = () => {
@@ -65,37 +60,12 @@ const {initImageStyles} = useImageStyles(
     '.article-content',
     {
       maxWidth: '100%',
-      margin: '15px 0',
+      margin: '15px 5px',
       display: 'block',
       boxSizing: 'border-box'
     }
 )
 
-// 使用 Nuxt 的 useHead 来管理页面资源
-useHead({
-  title: computed(() => articleData.value?.title ? `${articleData.value.title} - 创特科技` : '文章详情 - 创特科技'),
-  meta: [
-    {
-      name: 'description',
-      content: computed(() => articleData.value?.content ? articleData.value.content.substring(0, 160) + '...' : '创特科技专业文章')
-    },
-    {name: 'keywords', content: '创特科技,技术文章,共享单车,软件开发,解决方案'}
-  ],
-  link: [
-    {rel: 'stylesheet', href: '/news/bootstrap.min.css'},
-
-    {rel: 'stylesheet', href: '/news/main22.css'},
-
-    {rel: 'stylesheet', href: '/news/new_index.css'},
-    {rel: 'stylesheet', href: '/news/float.css'},
-    {rel: 'stylesheet', href: '/news/animate.min.css'},
-    {rel: 'stylesheet', href: '/css/main2.css'},
-  ],
-  script: [
-
-    {src: '/news/float.js', defer: true}
-  ]
-})
 
 onMounted(() => {
   // 初始化图片样式处理
@@ -105,82 +75,42 @@ onMounted(() => {
 
 <template>
   <view>
-    <!-- 顶部 -->
 
-    <!-- 文章正文 -->
-    <section class="container" style="margin-top: 88px;">
-      <div class="row">
-        <!-- 左边部分 -->
-        <div class="col-md-8 wow fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;">
-          <!-- 加载状态 -->
-          <div v-if="loading" class="loading-container" style="text-align: center; padding: 50px;">
-            <div
-                class="loading-spinner"
-                style="border: 4px solid #f3f3f3; border-top: 4px solid #ff8200; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto;"/>
-            <p style="margin-top: 20px; color: #666;">正在加载文章...</p>
-          </div>
+    <section class="container mx-auto mt-20 px-4">
 
-          <!-- 错误提示 -->
-          <div v-else-if="error" class="error-container" style="text-align: center; padding: 50px; color: #ff6b6b;">
-            <p>{{ error }}</p>
-            <button
-                style="margin-top: 20px; padding: 10px 20px; background: #ff8200; color: white; border: none; border-radius: 4px; cursor: pointer;"
-                @click="reloadPage">
-              重新加载
-            </button>
-          </div>
 
-          <!-- 文章内容 -->
-          <div v-else class="row">
-            <div class="col-xs-12">
-              <h2>{{ articleData?.title || '暂无标题' }}</h2>
-              <p id="label" style="border-bottom: 1px solid #ddd; margin-top: 20px;">
-                <span>{{ articleData?.publishDate || '暂无日期' }}</span>
-                <span class="pull-right">分类：{{ articleData?.category || '暂无分类' }}</span>
-              </p>
-              <div class="article-content" v-html="articleData?.content || '暂无内容'"/>
-            </div>
-          </div>
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading-container" style="text-align: center; padding: 50px;">
+        <div
+            class="loading-spinner"
+            style="border: 4px solid #f3f3f3; border-top: 4px solid #ff8200; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto;"/>
+        <p style="margin-top: 20px; color: #666;">正在加载文章...</p>
+      </div>
 
-          <!-- 上一篇/下一篇 -->
-          <div class="nextorpre" style="margin-top: 38px; border-top: 1px solid #ddd; padding-top: 8px;">
-            <li class="pull-left">上一篇：
-              <a :href="articleData?.prevArticle?.url || '#'">{{ articleData?.prevArticle?.title || '暂无上一篇' }}</a>
-            </li>
-            <li class="pull-right">下一篇：
-              <a :href="articleData?.nextArticle?.url || '#'">{{ articleData?.nextArticle?.title || '暂无下一篇' }}</a>
-            </li>
-          </div>
-          <br><br><br><br>
-        </div><!--左边部分-->
+      <!-- 错误提示 -->
+      <div v-else-if="error" class="error-container" style="text-align: center; padding: 50px; color: #ff6b6b;">
+        <p>{{ error }}</p>
+        <button
+            class="bg-primary mt-5 px-5 py-2.5 "
+            style=" color: white; border: none; border-radius: 4px; cursor: pointer;"
+            @click="reloadPage">
+          重新加载
+        </button>
+      </div>
 
-        <!-- 右边部分 -->
-        <aside class="col-md-4" style="border-left: 1px solid #eee; background: #fefefe;">
-          <!-- 热门标签 -->
-          <div
-              class="widget tags wow fadeInRight animated"
-              style="margin-bottom: 30px !important; visibility: visible; animation-name: fadeInRight;">
-            <h4>热门标签</h4>
-            <ul class="tag-cloud">
-              <li v-for="tag in hotTags" :key="tag">
-                <a class="btn btn-xs" href="#" @click.prevent>{{ tag }}</a>
-              </li>
-            </ul>
-          </div><!-- 热门标签 -->
+      <!-- 文章内容 -->
+      <div v-else class="row">
+        <div class="flex  flex-col items-center">
+          <h2>{{ articleData?.title || '暂无标题' }}</h2>
+          <p id="label" style="border-bottom: 1px solid #ddd; margin-top: 20px;">
+            <span>{{ articleData?.publishDate || '暂无日期' }}</span>
+            <span class="pull-right">   分类：{{ articleData?.category || '暂无分类' }}</span>
+          </p>
+          <div class="article-content w-full" v-html="articleData?.content || '暂无内容'"/>
+        </div>
+      </div>
 
-          <!-- 推荐文章 -->
-          <div
-              class="sy_news animated" data-wow-delay="200ms"
-              style="visibility: visible; animation-delay: 200ms; animation-name: fadeInDown;">
-            <RecommendedArticles
-                :articles-per-type="3"
-                :show-title="false"
-                :show-types="['solution', 'developKnowledge', 'industryTrend']"
-            />
-          </div>
-        </aside><!-- 右边部分 -->
 
-      </div><!--/.row-->
     </section><!--/#blog-->
   </view>
 </template>
@@ -201,17 +131,6 @@ onMounted(() => {
 }
 
 
-/* 响应式调整 */
-@media (max-width: 1024px) {
-  .col-md-8, .col-md-4 {
-    width: 100%;
-    margin-bottom: 20px;
-  }
-
-
-}
-
-
 /* 标签云样式 */
 .tag-cloud li {
   display: inline-block;
diff --git a/app/composables/useImageStyles.ts b/app/composables/useImageStyles.ts
index 5835063..96309d6 100644
--- a/app/composables/useImageStyles.ts
+++ b/app/composables/useImageStyles.ts
@@ -1,4 +1,4 @@
-import {nextTick, watch, watchEffect, onMounted, type Ref} from 'vue'
+import {nextTick, onMounted, type Ref, watch, watchEffect} from 'vue'
 
 /**
  * 图片样式处理 Composable
@@ -17,7 +17,7 @@ export const useImageStyles = (
     // 默认配置
     const defaultOptions = {
         maxWidth: 'calc(100% - 0px)',
-        margin: '15px 0',
+        margin: '15px auto',
         display: 'block',
         boxSizing: 'border-box',
         ...options
@@ -36,7 +36,7 @@ export const useImageStyles = (
             img.style.height = 'auto'
             img.style.width = 'auto'
             img.style.display = defaultOptions.display
-            img.style.margin = defaultOptions.margin
+            img.style.margin = 'auto'
             img.style.boxSizing = defaultOptions.boxSizing
         })
     }
diff --git a/app/pages/news/index.vue b/app/pages/news/index.vue
index a913a55..8ccbd93 100644
--- a/app/pages/news/index.vue
+++ b/app/pages/news/index.vue
@@ -6,6 +6,7 @@ const cards = [
     icon: "i-heroicons-academic-cap",
     image: "/img/news/n1.png",
     alt: "AI智慧养蜂系统",
+    to: '5',
     date: "2025.03.07"
   },
   {
@@ -14,6 +15,7 @@ const cards = [
     icon: "i-heroicons-beaker",
     image: "/img/news/n2.png",
     alt: "智能蜂箱展示",
+    to: '6',
     date: "2024.09.26"
   },
   {
@@ -57,6 +59,7 @@ const page = ref(1)
             :key="index"
             :description="card.description"
             :title="card.title"
+            :to="`/news/${card.to}`"
             :ui="{
              root:'group',
         container: 'relative grid lg:grid-cols-[1fr_4fr] gap-8 p-6',