From c0e7102d9b9bc1fca0dd1e1e1347d4b224d3742e Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Fri, 16 Jan 2026 17:32:58 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=85=AC=E5=91=8A=E5=92=8C=E6=96=B0?=
 =?UTF-8?q?=E9=97=BB=E5=88=97=E8=A1=A8=EF=BC=8C=E4=BC=98=E5=8C=96=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=92=8C=E4=BA=A4=E4=BA=92=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/default.vue |  27 ++-
 src/views/auth/login.vue          |  98 +-------
 src/views/auth/signup.vue         | 120 ++--------
 src/views/home/index.vue          | 372 +++++++++++++++++++++++++++++-
 4 files changed, 418 insertions(+), 199 deletions(-)

diff --git a/src/components/layout/default.vue b/src/components/layout/default.vue
index 6ffdc79..c89a033 100644
--- a/src/components/layout/default.vue
+++ b/src/components/layout/default.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cellular, chatboxEllipses, compass, personCircle, swapHorizontal } from "ionicons/icons";
+import { gridOutline, homeOutline, personOutline, videocamOutline } from "ionicons/icons";
 
 const { t } = useI18n();
 </script>
@@ -11,22 +11,29 @@ const { t } = useI18n();
       <ion-tab-bar slot="bottom">
         <ion-tab-button tab="home" href="/layout/home">
           <div class="flex-col-center gap-1">
-            <ion-icon aria-hidden="true" :icon="compass" class="icon" />
-            <ion-label>{{ t('tabs.home') }}</ion-label>
+            <ion-icon aria-hidden="true" :icon="homeOutline" class="icon" />
+            <ion-label>首页</ion-label>
           </div>
         </ion-tab-button>
 
-        <ion-tab-button tab="notify" href="/layout/notify">
+        <ion-tab-button tab="service" href="/layout/service">
           <div class="flex-col-center gap-1">
-            <ion-icon aria-hidden="true" :icon="chatboxEllipses" class="icon" />
-            <ion-label>{{ t('tabs.notify') }}</ion-label>
+            <ion-icon aria-hidden="true" :icon="gridOutline" class="icon" />
+            <ion-label>服务</ion-label>
           </div>
         </ion-tab-button>
 
-        <ion-tab-button tab="user" href="/layout/user">
+        <ion-tab-button tab="video" href="/layout/home">
           <div class="flex-col-center gap-1">
-            <ion-icon aria-hidden="true" :icon="personCircle" class="icon" />
-            <ion-label>{{ t('tabs.user') }}</ion-label>
+            <ion-icon aria-hidden="true" :icon="videocamOutline" class="icon" />
+            <ion-label>我的</ion-label>
+          </div>
+        </ion-tab-button>
+
+        <ion-tab-button tab="profile" href="/layout/profile">
+          <div class="flex-col-center gap-1">
+            <ion-icon aria-hidden="true" :icon="personOutline" class="icon" />
+            <ion-label>我们</ion-label>
           </div>
         </ion-tab-button>
       </ion-tab-bar>
@@ -37,7 +44,7 @@ const { t } = useI18n();
 <style  scoped>
 ion-tab-bar {
   height: 60px;
-  --background: var(--ion-background-color);
+  --background: white;
   box-shadow: 0px 0px 12px var(--ion-color-tertiary);
   padding-bottom: var(--ion-safe-area-bottom);
 }
diff --git a/src/views/auth/login.vue b/src/views/auth/login.vue
index a84154f..ba193d9 100644
--- a/src/views/auth/login.vue
+++ b/src/views/auth/login.vue
@@ -45,10 +45,10 @@ function goToTerms(type: "service" | "privacy") {
       </div>
 
       <!-- 主要内容区域 -->
-      <div class="content-wrapper">
+      <div class="relative z-2 h-full flex flex-col p-10 px-6 pb-5">
         <!-- 顶部Logo和欢迎语 -->
-        <div class="header-section">
-          <div class="emblem">
+        <div class="text-center mb-10">
+          <div class="flex justify-center mb-5">
             <div class="emblem-circle">
               <div class="emblem-inner">
                 <div class="star">
@@ -60,16 +60,16 @@ function goToTerms(type: "service" | "privacy") {
               </div>
             </div>
           </div>
-          <h1 class="welcome-title">
+          <h1 class="text-4xl font-bold text-[#2c3e50] mb-2 tracking-wider">
             你好
           </h1>
-          <h2 class="welcome-subtitle">
+          <h2 class="text-2xl font-semibold text-[#2c3e50] tracking-wide">
             欢迎登录深化改革
           </h2>
         </div>
 
         <!-- 登录表单 -->
-        <div class="form-section">
+        <div class="flex-1 flex flex-col gap-4 max-w-[400px] w-full mx-auto">
           <!-- 手机号输入 -->
           <ion-item lines="none" class="input-item">
             <ion-input
@@ -98,20 +98,20 @@ function goToTerms(type: "service" | "privacy") {
           </ion-item>
 
           <!-- 协议同意 -->
-          <div class="agreement-section">
+          <div class="flex items-center gap-2 px-1">
             <ion-checkbox v-model="agreed" class="agreement-checkbox" />
-            <span class="agreement-text">
+            <span class="text-xs text-[#666] leading-snug">
               我已阅读并同意
-              <a class="link-service" @click="goToTerms('service')">《服务条款》</a>
+              <a class="text-[#c41e3a] no-underline cursor-pointer font-medium hover:underline" @click="goToTerms('service')">《服务条款》</a>
               和
-              <a class="link-privacy" @click="goToTerms('privacy')">《隐私政策》</a>
+              <a class="text-[#c41e3a] no-underline cursor-pointer font-medium hover:underline" @click="goToTerms('privacy')">《隐私政策》</a>
             </span>
           </div>
 
           <!-- 登录按钮 -->
           <ion-button
             expand="block"
-            class="login-button"
+            class="login-button mt-2"
             @click="handleLogin"
           >
             登录
@@ -223,28 +223,7 @@ function goToTerms(type: "service" | "privacy") {
   }
 }
 
-/* 内容包装器 */
-.content-wrapper {
-  position: relative;
-  z-index: 2;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 40px 24px 20px;
-}
-
-/* 头部区域 */
-.header-section {
-  text-align: center;
-  margin-bottom: 40px;
-}
-
 /* 国徽 */
-.emblem {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 20px;
-}
 
 .emblem-circle {
   width: 70px;
@@ -287,34 +266,6 @@ function goToTerms(type: "service" | "privacy") {
   width: 40px;
 }
 
-/* 欢迎文字 */
-.welcome-title {
-  font-size: 32px;
-  font-weight: bold;
-  color: #2c3e50;
-  margin: 0 0 8px 0;
-  letter-spacing: 2px;
-}
-
-.welcome-subtitle {
-  font-size: 24px;
-  font-weight: 600;
-  color: #2c3e50;
-  margin: 0;
-  letter-spacing: 1px;
-}
-
-/* 表单区域 */
-.form-section {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  max-width: 400px;
-  width: 100%;
-  margin: 0 auto;
-}
-
 /* 输入框 */
 .input-item {
   --background: rgba(255, 255, 255, 0.9);
@@ -340,14 +291,6 @@ function goToTerms(type: "service" | "privacy") {
   cursor: pointer;
 }
 
-/* 协议同意 */
-.agreement-section {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 4px;
-}
-
 .agreement-checkbox {
   --size: 20px;
   --border-radius: 4px;
@@ -357,25 +300,6 @@ function goToTerms(type: "service" | "privacy") {
   flex-shrink: 0;
 }
 
-.agreement-text {
-  font-size: 13px;
-  color: #666;
-  line-height: 1.4;
-}
-
-.link-service,
-.link-privacy {
-  color: #c41e3a;
-  text-decoration: none;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-.link-service:hover,
-.link-privacy:hover {
-  text-decoration: underline;
-}
-
 /* 登录按钮 */
 .login-button {
   --background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
diff --git a/src/views/auth/signup.vue b/src/views/auth/signup.vue
index 113308b..2116364 100644
--- a/src/views/auth/signup.vue
+++ b/src/views/auth/signup.vue
@@ -79,31 +79,31 @@ function goToTerms(type: "service" | "privacy") {
       </div>
 
       <!-- 主要内容区域 -->
-      <div class="content-wrapper">
+      <div class="relative z-2 h-full flex flex-col py-8 px-6 pb-5 overflow-y-auto">
         <!-- 顶部Logo和标题 -->
-        <div class="header-section">
-          <div class="emblem">
-            <div class="emblem-circle">
-              <div class="emblem-inner">
-                <div class="star">
+        <div class="text-center mb-8 shrink-0">
+          <div class="flex justify-center mb-4">
+            <div class="emblem-circle-sm">
+              <div class="emblem-inner-sm">
+                <div class="star-sm">
                   ★
                 </div>
-                <div class="emblem-text">
+                <div class="emblem-text-sm">
                   中华人民共和国
                 </div>
               </div>
             </div>
           </div>
-          <h1 class="welcome-title">
+          <h1 class="text-3xl font-bold text-[#1a1a1a] mb-1.5 tracking-wider">
             创建账号
           </h1>
-          <h2 class="welcome-subtitle">
+          <h2 class="text-lg font-semibold text-[#2c3e50] tracking-wide">
             加入深化改革平台
           </h2>
         </div>
 
         <!-- 注册表单 -->
-        <div class="form-section">
+        <div class="flex-1 flex flex-col gap-3 max-w-[400px] w-full mx-auto pb-50">
           <!-- 手机号输入 -->
           <ion-item lines="none" class="input-item">
             <ion-input
@@ -179,20 +179,20 @@ function goToTerms(type: "service" | "privacy") {
           </ion-item>
 
           <!-- 协议同意 -->
-          <div class="agreement-section">
+          <div class="flex items-center gap-2 px-1 pt-2 pb-1">
             <ion-checkbox v-model="agreed" class="agreement-checkbox" />
-            <span class="agreement-text">
+            <span class="text-xs text-[#666] leading-snug">
               我已阅读并同意
-              <a class="link-service" @click="goToTerms('service')">《服务条款》</a>
+              <a class="text-[#c41e3a] no-underline cursor-pointer font-medium hover:underline" @click="goToTerms('service')">《服务条款》</a>
               和
-              <a class="link-privacy" @click="goToTerms('privacy')">《隐私政策》</a>
+              <a class="text-[#c41e3a] no-underline cursor-pointer font-medium hover:underline" @click="goToTerms('privacy')">《隐私政策》</a>
             </span>
           </div>
 
           <!-- 注册按钮 -->
           <ion-button
             expand="block"
-            class="signup-button"
+            class="signup-button mt-2"
             @click="handleSignup"
           >
             注册
@@ -304,32 +304,8 @@ function goToTerms(type: "service" | "privacy") {
   }
 }
 
-/* 内容包装器 */
-.content-wrapper {
-  position: relative;
-  z-index: 2;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 30px 24px 20px;
-  overflow-y: auto;
-}
-
-/* 头部区域 */
-.header-section {
-  text-align: center;
-  margin-bottom: 30px;
-  flex-shrink: 0;
-}
-
-/* 国徽 */
-.emblem {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 16px;
-}
-
-.emblem-circle {
+/* 国徽 - 小尺寸 */
+.emblem-circle-sm {
   width: 60px;
   height: 60px;
   background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
@@ -341,7 +317,7 @@ function goToTerms(type: "service" | "privacy") {
   border: 3px solid #c41e3a;
 }
 
-.emblem-inner {
+.emblem-inner-sm {
   width: 48px;
   height: 48px;
   background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
@@ -353,14 +329,14 @@ function goToTerms(type: "service" | "privacy") {
   position: relative;
 }
 
-.star {
+.star-sm {
   font-size: 20px;
   color: #ffd700;
   font-weight: bold;
   margin-bottom: -3px;
 }
 
-.emblem-text {
+.emblem-text-sm {
   font-size: 5px;
   color: #ffd700;
   font-weight: bold;
@@ -370,35 +346,6 @@ function goToTerms(type: "service" | "privacy") {
   width: 36px;
 }
 
-/* 欢迎文字 */
-.welcome-title {
-  font-size: 28px;
-  font-weight: bold;
-  color: #1a1a1a;
-  margin: 0 0 6px 0;
-  letter-spacing: 2px;
-}
-
-.welcome-subtitle {
-  font-size: 18px;
-  font-weight: 600;
-  color: #2c3e50;
-  margin: 0;
-  letter-spacing: 1px;
-}
-
-/* 表单区域 */
-.form-section {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-width: 400px;
-  width: 100%;
-  margin: 0 auto;
-  padding-bottom: 200px;
-}
-
 /* 输入框 */
 .input-item {
   --background: rgba(255, 255, 255, 0.95);
@@ -424,14 +371,6 @@ function goToTerms(type: "service" | "privacy") {
   cursor: pointer;
 }
 
-/* 协议同意 */
-.agreement-section {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 4px 4px;
-}
-
 .agreement-checkbox {
   --size: 20px;
   --border-radius: 4px;
@@ -441,25 +380,6 @@ function goToTerms(type: "service" | "privacy") {
   flex-shrink: 0;
 }
 
-.agreement-text {
-  font-size: 13px;
-  color: #666;
-  line-height: 1.4;
-}
-
-.link-service,
-.link-privacy {
-  color: #c41e3a;
-  text-decoration: none;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-.link-service:hover,
-.link-privacy:hover {
-  text-decoration: underline;
-}
-
 /* 注册按钮 */
 .signup-button {
   --background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index ee401fa..cc4bc39 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,5 +1,99 @@
 <script lang='ts' setup>
+import {
+  calendarOutline,
+  chatbubblesOutline,
+  chevronForwardOutline,
+  eyeOutline,
+  megaphoneOutline,
+  newspaperOutline,
+  peopleOutline,
+  rocketOutline,
+  timeOutline,
+} from "ionicons/icons";
+import { onMounted, onUnmounted, ref } from "vue";
 
+// 公告数据
+const announcements = ref([
+  { id: 1, title: "关于深化改革的重要通知", time: "2026-01-16" },
+  { id: 2, title: "平台升级维护公告", time: "2026-01-15" },
+  { id: 3, title: "新年贺词：砥砺前行，共创辉煌", time: "2026-01-01" },
+]);
+
+// 新闻数据（模拟数据）
+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",
+  },
+]);
+
+// 快捷入口
+const quickActions = ref([
+  { id: 1, name: "签到", icon: calendarOutline, color: "#c41e3a" },
+  { id: 2, name: "团队中心", icon: peopleOutline, color: "#c41e3a" },
+  { id: 3, name: "战略改革", icon: rocketOutline, color: "#c41e3a" },
+  { id: 4, name: "在线客服", icon: chatbubblesOutline, color: "#c41e3a" },
+]);
+
+function handleQuickAction(action: any) {
+  console.log("点击快捷入口:", action.name);
+  // TODO: 实现各个快捷入口的功能
+}
+
+function handleAnnouncementClick(announcement: any) {
+  console.log("查看公告:", announcement.title);
+  // TODO: 跳转到公告详情
+}
+
+function handleNewsClick(news: any) {
+  console.log("查看新闻:", news.title);
+  // TODO: 跳转到新闻详情
+}
+
+// 走马灯相关
+const currentAnnouncementIndex = ref(0);
+let announcementTimer: number | null = null;
+
+function startAnnouncementCarousel() {
+  announcementTimer = setInterval(() => {
+    currentAnnouncementIndex.value = (currentAnnouncementIndex.value + 1) % announcements.value.length;
+  }, 3000); // 每3秒切换
+}
+
+function stopAnnouncementCarousel() {
+  if (announcementTimer) {
+    clearInterval(announcementTimer);
+    announcementTimer = null;
+  }
+}
+
+onMounted(() => {
+  startAnnouncementCarousel();
+});
+
+onUnmounted(() => {
+  stopAnnouncementCarousel();
+});
 </script>
 
 <template>
@@ -12,8 +106,282 @@
         <ion-title>{{ $t('home.title') }}</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content :fullscreen="true" class="ion-padding" />
+
+    <ion-content :fullscreen="true" class="home-page">
+      <!-- 背景装饰 -->
+      <div class="bg-decoration">
+        <!-- 中国风图案 -->
+        <div class="chinese-pattern">
+          <svg class="pattern-svg pattern-1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="2" />
+            <circle cx="50" cy="50" r="30" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1.5" />
+            <path d="M50 10 L50 30 M50 70 L50 90 M10 50 L30 50 M70 50 L90 50" stroke="rgba(255,255,255,0.15)" stroke-width="2" />
+          </svg>
+          <svg class="pattern-svg pattern-2" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+            <path d="M30 30 Q50 45 70 30 Q55 50 70 70 Q50 55 30 70 Q45 50 30 30" fill="none" stroke="rgba(255,255,255,0.12)" stroke-width="2" />
+          </svg>
+        </div>
+        <!-- 五角星装饰 -->
+        <div class="stars-decoration">
+          <div class="star star-1">
+            ★
+          </div>
+          <div class="star star-2">
+            ★
+          </div>
+          <div class="star star-3">
+            ★
+          </div>
+        </div>
+        <!-- 底部波浪 -->
+        <svg class="wave-bottom" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
+          <path d="M0 80 Q300 40 600 80 T1200 80 L1200 120 L0 120 Z" fill="rgba(255,255,255,0.08)" />
+          <path d="M0 95 Q300 60 600 95 T1200 95 L1200 120 L0 120 Z" fill="rgba(255,255,255,0.05)" />
+        </svg>
+      </div>
+
+      <div class="relative z-1 p-4">
+        <!-- 快捷入口区域 -->
+        <section class="mb-5">
+          <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
+                class="w-13 h-13 rounded-xl flex-center shadow-lg"
+                :style="{ background: `linear-gradient(135deg, ${action.color}, ${action.color}dd)` }"
+              >
+                <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>
+
+        <!-- 公告通知区域 - 走马灯 -->
+        <section class="mb-5">
+          <div
+            class="bg-white rounded-2xl shadow-sm overflow-hidden cursor-pointer relative"
+            @click="handleAnnouncementClick(announcements[currentAnnouncementIndex])"
+          >
+            <div class="announcement-carousel relative h-20">
+              <transition-group name="slide">
+                <div
+                  v-for="(announcement, index) in announcements"
+                  v-show="index === currentAnnouncementIndex"
+                  :key="announcement.id"
+                  class="flex items-center gap-3 p-4 absolute inset-0"
+                >
+                  <div class="text-2xl shrink-0">
+                    📢
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <div class="text-sm text-[#333] font-medium mb-1 truncate">
+                      {{ announcement.title }}
+                    </div>
+                    <div class="text-xs text-[#999]">
+                      {{ announcement.time }}
+                    </div>
+                  </div>
+                  <ion-icon :icon="chevronForwardOutline" class="text-lg text-[#ccc] shrink-0" />
+                </div>
+              </transition-group>
+            </div>
+            <!-- 指示器 -->
+            <div class="flex justify-center gap-1.5 pb-2">
+              <div
+                v-for="(announcement, index) in announcements"
+                :key="announcement.id"
+                class="w-1.5 h-1.5 rounded-full transition-all duration-300"
+                :class="index === currentAnnouncementIndex ? 'bg-[#c41e3a] w-4' : 'bg-[#ddd]'"
+              />
+            </div>
+          </div>
+        </section>
+
+        <!-- 新闻列表区域 -->
+        <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>
+      </div>
+    </ion-content>
   </ion-page>
 </template>
 
-<style lang='css' scoped></style>
+<style lang='css' scoped>
+.home-page {
+  --background: linear-gradient(180deg, #c41e3a 0%, #e8756d 15%, #f5d5c8 35%, #fef5f1 50%, #fef5f1 65%, #f5d5c8 85%);
+}
+
+/* 中国风图案 */
+.chinese-pattern {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0.8;
+}
+
+.pattern-svg {
+  position: absolute;
+  animation: rotate-pattern 30s linear infinite;
+}
+
+.pattern-1 {
+  width: 150px;
+  height: 150px;
+  top: 20px;
+  right: 30px;
+}
+
+.pattern-2 {
+  width: 120px;
+  height: 120px;
+  top: 100px;
+  left: 40px;
+  animation-direction: reverse;
+  animation-duration: 40s;
+}
+
+@keyframes rotate-pattern {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 五角星装饰 */
+.stars-decoration {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.star {
+  position: absolute;
+  color: rgba(255, 215, 0, 0.3);
+  font-size: 24px;
+  animation: twinkle 3s ease-in-out infinite;
+}
+
+.star-1 {
+  top: 40px;
+  left: 25%;
+  animation-delay: 0s;
+}
+
+.star-2 {
+  top: 80px;
+  right: 30%;
+  font-size: 18px;
+  animation-delay: 1s;
+}
+
+.star-3 {
+  top: 130px;
+  left: 15%;
+  font-size: 20px;
+  animation-delay: 2s;
+}
+
+@keyframes twinkle {
+  0%,
+  100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.2);
+  }
+}
+
+/* 底部波浪 */
+.wave-bottom {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 120px;
+  opacity: 0.6;
+}
+
+/* 新闻标签渐变 - 使用 @apply 不支持渐变，需要保留 */
+.news-badge {
+  box-shadow: 0 2px 8px rgba(196, 30, 58, 0.3);
+}
+
+/* 走马灯动画 */
+.announcement-carousel {
+  transition: height 0.3s ease;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.5s ease;
+}
+
+.slide-enter-from {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.slide-leave-to {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+
+.slide-enter-to,
+.slide-leave-from {
+  transform: translateX(0);
+  opacity: 1;
+}
+</style>