feat: 添加首页横幅图片，更新页面样式和内容

src/components/layout/default.vue

@@ -12,28 +12,28 @@ const { t } = useI18n();
         <ion-tab-button tab="home" href="/layout/home">
           <div class="flex-col-center gap-1">
             <ion-icon aria-hidden="true" :icon="homeOutline" class="icon" />
-            <ion-label>首页</ion-label>
+            <ion-label>改革先锋</ion-label>
           </div>
         </ion-tab-button>
 
         <ion-tab-button tab="service" href="/layout/service">
           <div class="flex-col-center gap-1">
             <ion-icon aria-hidden="true" :icon="gridOutline" class="icon" />
-            <ion-label>服务</ion-label>
+            <ion-label>思想引领</ion-label>
           </div>
         </ion-tab-button>
 
-        <ion-tab-button tab="video" href="/layout/home">
+        <ion-tab-button tab="video" href="/layout/product">
           <div class="flex-col-center gap-1">
             <ion-icon aria-hidden="true" :icon="videocamOutline" class="icon" />
-            <ion-label>我的</ion-label>
+            <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>
+            <ion-label>我的事务</ion-label>
           </div>
         </ion-tab-button>
       </ion-tab-bar>

src/views/home/index.vue

@@ -49,10 +49,10 @@ const newsList = ref([
 
 // 快捷入口
 const quickActions = ref([
-  { id: 1, name: "签到", icon: calendarOutline, color: "#c41e3a" },
+  { id: 1, name: "签到", icon: calendarOutline, color: "#c32120" },
-  { id: 2, name: "团队中心", icon: peopleOutline, color: "#c41e3a" },
+  { id: 2, name: "团队中心", icon: peopleOutline, color: "#c32120" },
-  { id: 3, name: "战略改革", icon: rocketOutline, color: "#c41e3a" },
+  { id: 3, name: "战略改革", icon: rocketOutline, color: "#c32120" },
-  { id: 4, name: "在线客服", icon: chatbubblesOutline, color: "#c41e3a" },
+  { id: 4, name: "在线客服", icon: chatbubblesOutline, color: "#c32120" },
 ]);
 
 function handleQuickAction(action: any) {
@@ -98,51 +98,21 @@ onUnmounted(() => {
 
 <template>
   <ion-page>
-    <ion-header class="ion-no-border">
+    <ion-header class="ion-no-border header">
       <ion-toolbar class="ion-toolbar">
-        <ion-button slot="start" fill="clear" class="z-1" @click="$router.push('/global-menu')">
+        <div slot="start" class="font-semibold">
-          <IconParkOutlineApplicationMenu slot="icon-only" />
+          国务院深化改革战略推进委员会
-        </ion-button>
+        </div>
-        <ion-title>{{ $t('home.title') }}</ion-title>
       </ion-toolbar>
     </ion-header>
 
-    <ion-content :fullscreen="true" class="home-page">
+    <ion-content :fullscreen="true" class="home-page ion-padding">
-      <!-- 背景装饰 -->
+      <div class="absolute top-0 left-0 w-full h-50 home-pg -z-1" />
-      <div class="bg-decoration">
+
-        <!-- 中国风图案 -->
+      <img src="@/assets/images/home-banner.jpg" class="h-40 w-full object-cover rounded-2xl shadow-lg mb-5" alt="首页横幅">
-        <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">
+      <section class="mb-5 mt-5">
         <div class="grid grid-cols-4 gap-4 bg-white/95 p-5 rounded-2xl shadow-lg">
           <div
             v-for="action in quickActions"
@@ -152,7 +122,7 @@ onUnmounted(() => {
           >
             <div
               class="w-13 h-13 rounded-xl flex-center shadow-lg"
-                :style="{ background: `linear-gradient(135deg, ${action.color}, ${action.color}dd)` }"
+              :style="{ background: action.color }"
             >
               <ion-icon :icon="action.icon" class="text-3xl text-white" />
             </div>
@@ -161,47 +131,6 @@ onUnmounted(() => {
         </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">
@@ -250,16 +179,23 @@ onUnmounted(() => {
           </div>
         </div>
       </section>
-      </div>
     </ion-content>
   </ion-page>
 </template>
 
 <style lang='css' scoped>
-.home-page {
+.ion-toolbar {
-  --background: linear-gradient(180deg, #c41e3a 0%, #e8756d 15%, #f5d5c8 35%, #fef5f1 50%, #fef5f1 65%, #f5d5c8 85%);
+  --background: #c32120;
+  --color: #fff;
 }
 
+.home-pg {
+  background: linear-gradient(180deg, #c32120 0%, #c32120 55%, #fef5f1 100%);
+}
+/* .home-page {
+  --background: linear-gradient(180deg, #c41e3a 0%, #e8756d 15%, #f5d5c8 35%, #fef5f1 50%, #fef5f1 65%, #f5d5c8 85%);
+} */
+
 /* 中国风图案 */
 .chinese-pattern {
   position: absolute;