文章页面修改，去除未渲染内容闪烁

app/components/news/new.vue

@@ -71,64 +71,33 @@ const {initImageStyles} = useImageStyles(
     }
 )
 
-onMounted(() => {
-  // 只在客户端执行
-  if (typeof window !== 'undefined') {
-    // 加载CSS样式文件
-    loadCSSFiles()
+// 使用 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'}
+  ],
+  script: [
 
-    // 加载JavaScript文件
-    loadJSFiles()
-  }
+    {src: '/news/float.js', defer: true}
+  ]
 })
 
-// 初始化图片样式处理
-initImageStyles()
-
-const loadJSFiles = () => {
-  if (typeof document === 'undefined') return
-  
-  const jsFiles = [
-    '/news/jquery.1.11.3.min.js',
-    '/news/bootstrap.min.js',
-    '/news/float.js',
-  ]
-
-  jsFiles.forEach(src => {
-    // 检查是否已经加载过该JS文件
-    const existingScript = document.querySelector(`script[src="${src}"]`)
-    if (!existingScript) {
-      const script = document.createElement('script')
-      script.src = src
-      script.type = 'text/javascript'
-      document.head.appendChild(script)
-    }
-  })
-}
-
-const loadCSSFiles = () => {
-  if (typeof document === 'undefined') return
-  
-  const cssFiles = [
-    '/news/bootstrap.min.css',
-    '/news/main22.css',
-    '/news/new_index.css',
-    '/news/float.css',
-    '/news/animate.min.css'
-  ]
-
-  cssFiles.forEach(href => {
-    // 检查是否已经加载过该CSS文件
-    const existingLink = document.querySelector(`link[href="${href}"]`)
-    if (!existingLink) {
-      const link = document.createElement('link')
-      link.rel = 'stylesheet'
-      link.href = href
-      link.type = 'text/css'
-      document.head.appendChild(link)
-    }
-  })
-}
+onMounted(() => {
+  // 初始化图片样式处理
+  initImageStyles()
+})
 </script>
 
 <template>

app/layouts/no-navigation.vue

@@ -4,9 +4,9 @@
 <template>
   <div>
     <!--    <AppHeader/>-->
-  
+    <!--    <Navigation/>-->
     <slot/>
-    <BottomNavigation/>
+    <!--    <BottomNavigation/>-->
     <AppFooter/>
   </div>
 </template>

app/pages/articles.vue

@@ -3,6 +3,16 @@
 definePageMeta({
   layout: 'default'
 })
+
+// 使用 Nuxt 的 useHead 来管理页面资源
+useHead({
+  title: '文章中心 - 探索最新的技术文章和行业动态',
+  meta: [
+    {name: 'description', content: '探索最新的技术文章和行业动态，包括解决方案、开发知识和行业趋势'},
+    {name: 'keywords', content: '技术文章,行业动态,解决方案,开发知识,共享单车,软件开发'}
+  ],
+
+})
 </script>
 
 <template>
@@ -14,14 +24,14 @@ definePageMeta({
           <p class="page-subtitle">探索最新的技术文章和行业动态</p>
         </div>
       </div>
-      
+
       <!-- 推荐文章 -->
       <div class="row" style="margin-top: 40px;">
         <div class="col-xs-12">
-          <RecommendedArticles 
-            :show-types="['solution', 'developKnowledge', 'industryTrend']"
-            :articles-per-type="6"
-            title="推荐文章"
+          <RecommendedArticles
+              :articles-per-type="6"
+              :show-types="['solution', 'developKnowledge', 'industryTrend']"
+              title="推荐文章"
           />
         </div>
       </div>
@@ -29,24 +39,24 @@ definePageMeta({
       <!-- 按类型分类的文章 -->
       <div class="row" style="margin-top: 60px;">
         <div class="col-xs-12 col-md-4">
-          <RecommendedArticles 
-            :show-types="['solution']"
-            :articles-per-type="8"
-            title="解决方案"
+          <RecommendedArticles
+              :articles-per-type="8"
+              :show-types="['solution']"
+              title="解决方案"
           />
         </div>
         <div class="col-xs-12 col-md-4">
-          <RecommendedArticles 
-            :show-types="['developKnowledge']"
-            :articles-per-type="8"
-            title="开发知识"
+          <RecommendedArticles
+              :articles-per-type="8"
+              :show-types="['developKnowledge']"
+              title="开发知识"
           />
         </div>
         <div class="col-xs-12 col-md-4">
-          <RecommendedArticles 
-            :show-types="['industryTrend']"
-            :articles-per-type="8"
-            title="行业动态"
+          <RecommendedArticles
+              :articles-per-type="8"
+              :show-types="['industryTrend']"
+              title="行业动态"
           />
         </div>
       </div>
@@ -80,7 +90,7 @@ definePageMeta({
   .page-title {
     font-size: 28px;
   }
-  
+
   .page-subtitle {
     font-size: 16px;
   }