feat: 更新首页和服务页面，优化布局和样式，添加新闻列表功能

src/views/home/index.vue

@@ -100,9 +100,9 @@ onUnmounted(() => {
   <ion-page>
     <ion-header class="ion-no-border header">
       <ion-toolbar class="ion-toolbar">
-        <div slot="start" class="flex items-center px-5 py-3">
+        <div slot="start" class="flex items-center px-3 py-3">
           <img src="@/assets/images/guohui.png" alt="国徽" class="inline-block h-10 mr-2">
-          <div class="font-semibold text-md">
+          <div class="font-semibold text-lg">
             国务院深化改革战略推进委员会
           </div>
         </div>
@@ -115,23 +115,23 @@ onUnmounted(() => {
       <img src="@/assets/images/home-banner.jpg" class="h-40 w-full object-cover rounded-2xl shadow-lg mb-5" alt="首页横幅">
 
       <!-- 快捷入口区域 -->
-      <section class="mb-5 mt-5">
+      <section class="mt-10 mb-5 grid grid-cols-4 gap-4">
-        <div class="grid grid-cols-4 gap-4 bg-white/95 p-5 rounded-2xl shadow-lg">
+        <!-- <div class="grid grid-cols-4 gap-4 bg-white/95 p-5 rounded-2xl shadow-lg"> -->
+        <div
+          v-for="action in quickActions"
+          :key="action.id"
+          class="flex flex-col items-center gap-2 cursor-pointer transition-transform active:scale-95"
+          @click="handleQuickAction(action)"
+        >
           <div
-            v-for="action in quickActions"
+            class="w-13 h-13 rounded-xl flex-center shadow-lg"
-            :key="action.id"
+            :style="{ background: action.color }"
-            class="flex flex-col items-center gap-2 cursor-pointer transition-transform active:scale-95"
-            @click="handleQuickAction(action)"
           >
-            <div
+            <ion-icon :icon="action.icon" class="text-3xl text-white" />
-              class="w-13 h-13 rounded-xl flex-center shadow-lg"
-              :style="{ background: action.color }"
-            >
-              <ion-icon :icon="action.icon" class="text-3xl text-white" />
-            </div>
-            <span class="text-xs text-[#333] font-medium text-center">{{ action.name }}</span>
           </div>
+          <span class="text-xs text-[#333] font-medium text-center">{{ action.name }}</span>
         </div>
+        <!-- </div> -->
       </section>
 
       <!-- 新闻列表区域 -->
@@ -152,23 +152,25 @@ onUnmounted(() => {
           <div
             v-for="news in newsList"
             :key="news.id"
-            class="bg-white rounded-2xl overflow-hidden shadow-sm cursor-pointer transition-all active:translate-y-0.5 active:shadow-sm"
+            class="bg-white rounded-2xl overflow-hidden shadow-sm cursor-pointer transition-all active:translate-y-0.5 active:shadow-sm flex"
             @click="handleNewsClick(news)"
           >
-            <div class="relative w-full h-45 overflow-hidden">
+            <div class="relative w-28 h-28 flex-shrink-0 overflow-hidden">
               <img :src="news.image" :alt="news.title" class="w-full h-full object-cover">
-              <div class="news-badge absolute top-3 left-3 bg-gradient-to-br from-[#c41e3a] to-[#8b1a2e] text-white px-3 py-1 rounded-xl text-xs font-semibold shadow-lg">
+              <div class="news-badge absolute top-2 left-2 bg-gradient-to-br from-[#c41e3a] to-[#8b1a2e] text-white px-2 py-0.5 rounded-lg text-xs font-semibold shadow-lg">
                 热点
               </div>
             </div>
-            <div class="p-4">
+            <div class="flex-1 p-4 flex flex-col justify-between">
-              <h4 class="text-base font-bold text-[#1a1a1a] mb-2 leading-snug">
+              <div>
-                {{ news.title }}
+                <div class="text-base font-bold text-[#1a1a1a] mb-1 leading-snug line-clamp-2">
-              </h4>
+                  {{ news.title }}
-              <p class="text-sm text-[#666] mb-3 leading-relaxed line-clamp-2">
+                </div>
-                {{ news.subtitle }}
+                <p class="text-sm text-[#666] leading-relaxed line-clamp-2">
-              </p>
+                  {{ news.subtitle }}
-              <div class="flex items-center gap-4 text-xs text-[#999]">
+                </p>
+              </div>
+              <div class="flex items-center gap-4 text-xs text-[#999] mt-2">
                 <span class="flex items-center gap-1">
                   <ion-icon :icon="timeOutline" class="text-sm" />
                   {{ news.time }}

src/views/service/index.vue

@@ -1,11 +1,95 @@
 <script lang='ts' setup>
+import {
+  chevronForwardOutline,
+  eyeOutline,
+  newspaperOutline,
+  timeOutline,
+} from "ionicons/icons";
 
+const newsList = ref([
+  {
+    id: 1,
+    title: "深化改革进入新阶段",
+    subtitle: "全面推进现代化建设，开创新局面",
+    time: "2026-01-16 10:30",
+    views: 1520,
+    image: "https://picsum.photos/seed/news1/400/250",
+  },
+  {
+    id: 2,
+    title: "团队协作再创佳绩",
+    subtitle: "凝心聚力，共筑梦想，携手共进新时代",
+    time: "2026-01-15 16:20",
+    views: 2340,
+    image: "https://picsum.photos/seed/news2/400/250",
+  },
+  {
+    id: 3,
+    title: "战略布局取得重大突破",
+    subtitle: "科学谋划，精准施策，推动高质量发展",
+    time: "2026-01-14 09:15",
+    views: 1890,
+    image: "https://picsum.photos/seed/news3/400/250",
+  },
+]);
+
+function handleNewsClick(news: any) {
+  console.log("查看新闻:", news.title);
+  // TODO: 跳转到新闻详情
+}
 </script>
 
 <template>
   <ion-page>
-    <ion-content>
+    <ion-content class="ion-padding">
-      11
+      <!-- 新闻列表区域 -->
+      <section class="mb-5">
+        <div class="flex justify-between items-center mb-4">
+          <div class="flex items-center gap-2">
+            <ion-icon :icon="newspaperOutline" class="text-2xl text-[#c41e3a]" />
+            <h3 class="text-lg font-bold text-[#1a1a1a] m-0">
+              新闻动态
+            </h3>
+          </div>
+          <ion-button fill="clear" size="small" class="text-sm text-white h-8">
+            更多
+            <ion-icon slot="end" :icon="chevronForwardOutline" />
+          </ion-button>
+        </div>
+        <div class="flex flex-col gap-4">
+          <div
+            v-for="news in newsList"
+            :key="news.id"
+            class="bg-white rounded-2xl overflow-hidden shadow-sm cursor-pointer transition-all active:translate-y-0.5 active:shadow-sm"
+            @click="handleNewsClick(news)"
+          >
+            <div class="relative w-full h-45 overflow-hidden">
+              <img :src="news.image" :alt="news.title" class="w-full h-full object-cover">
+              <div class="news-badge absolute top-3 left-3 bg-gradient-to-br from-[#c41e3a] to-[#8b1a2e] text-white px-3 py-1 rounded-xl text-xs font-semibold shadow-lg">
+                热点
+              </div>
+            </div>
+            <div class="p-4">
+              <h4 class="text-base font-bold text-[#1a1a1a] mb-2 leading-snug">
+                {{ news.title }}
+              </h4>
+              <p class="text-sm text-[#666] mb-3 leading-relaxed line-clamp-2">
+                {{ news.subtitle }}
+              </p>
+              <div class="flex items-center gap-4 text-xs text-[#999]">
+                <span class="flex items-center gap-1">
+                  <ion-icon :icon="timeOutline" class="text-sm" />
+                  {{ news.time }}
+                </span>
+                <span class="flex items-center gap-1">
+                  <ion-icon :icon="eyeOutline" class="text-sm" />
+                  {{ news.views }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
     </ion-content>
   </ion-page>
 </template>