文章布局，文章页面采用文章布局

app/components/news/new.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+
 // 文章头部信息
 const articleHeader = {
   title: '共享烘干机APP方案开发与制作',
@@ -278,8 +279,8 @@ const pagination = {
             <div class="relative mb-8">
               <div class="relative overflow-hidden rounded-xl">
                 <img
-                  :src="articleContent.heroImage.src" 
                     :alt="articleContent.heroImage.alt"
+                    :src="articleContent.heroImage.src"
                     class="w-full h-64 md:h-80 object-cover"
                 >
                 <!-- 红色覆盖按钮 -->
@@ -355,8 +356,8 @@ const pagination = {
                 <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"
+                    to="/tags"
                 >
                   {{ tag }}
                 </NuxtLink>

app/layouts/article.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div>
+    <UContainer>
+      <AppHeader/>
+      <slot/>
+      <BottomNavigation/>
+      <AppFooter/>
+    </UContainer>
+  </div>
+</template>

app/pages/new.vue

@@ -1,5 +1,8 @@
 <script lang="ts" setup>
-
+// 设置页面布局
+definePageMeta({
+  layout: 'article'
+})
 </script>
 
 <template>
@@ -11,3 +14,4 @@
 <style scoped>
 
 </style>
+