From 4de39d439f6fa986e8004037e02a556045578710 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Fri, 16 Jan 2026 22:35:03 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E5=92=8C=E6=9C=8D=E5=8A=A1=E9=A1=B5=E9=9D=A2=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=B8=83=E5=B1=80=E5=92=8C=E6=A0=B7=E5=BC=8F=EF=BC=8C?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=B0=E9=97=BB=E5=88=97=E8=A1=A8=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/index.vue    | 54 ++++++++++++-----------
 src/views/service/index.vue | 88 ++++++++++++++++++++++++++++++++++++-
 2 files changed, 114 insertions(+), 28 deletions(-)

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 9314e23..a26b486 100644
--- a/src/views/home/index.vue
+++ b/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">
-        <div class="grid grid-cols-4 gap-4 bg-white/95 p-5 rounded-2xl shadow-lg">
+      <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
+          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"
-            :key="action.id"
-            class="flex flex-col items-center gap-2 cursor-pointer transition-transform active:scale-95"
-            @click="handleQuickAction(action)"
+            class="w-13 h-13 rounded-xl flex-center shadow-lg"
+            :style="{ background: action.color }"
           >
-            <div
-              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>
+            <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>
+        <!-- </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">
-              <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]">
+            <div class="flex-1 p-4 flex flex-col justify-between">
+              <div>
+                <div class="text-base font-bold text-[#1a1a1a] mb-1 leading-snug line-clamp-2">
+                  {{ news.title }}
+                </div>
+                <p class="text-sm text-[#666] leading-relaxed line-clamp-2">
+                  {{ news.subtitle }}
+                </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 }}
diff --git a/src/views/service/index.vue b/src/views/service/index.vue
index 3eac010..25ef0e0 100644
--- a/src/views/service/index.vue
+++ b/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>
-      11
+    <ion-content class="ion-padding">
+      <!-- 新闻列表区域 -->
+      <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>