feat: 添加个人资料页面，更新服务和产品页面，优化图标和样式

components.d.ts

@@ -14,6 +14,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     BackButton: typeof import('./src/components/back-button.vue')['default']
     IonApp: typeof import('@ionic/vue')['IonApp']
+    IonAvatar: typeof import('@ionic/vue')['IonAvatar']
     IonButton: typeof import('@ionic/vue')['IonButton']
     IonCheckbox: typeof import('@ionic/vue')['IonCheckbox']
     IonContent: typeof import('@ionic/vue')['IonContent']
@@ -39,6 +40,7 @@ declare module 'vue' {
 declare global {
   const BackButton: typeof import('./src/components/back-button.vue')['default']
   const IonApp: typeof import('@ionic/vue')['IonApp']
+  const IonAvatar: typeof import('@ionic/vue')['IonAvatar']
   const IonButton: typeof import('@ionic/vue')['IonButton']
   const IonCheckbox: typeof import('@ionic/vue')['IonCheckbox']
   const IonContent: typeof import('@ionic/vue')['IonContent']

src/components/layout/default.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { gridOutline, homeOutline, personOutline, walletOutline } from "ionicons/icons";
+import { grid, home, person, wallet } from "ionicons/icons";
 
 const { t } = useI18n();
 </script>
@@ -11,28 +11,28 @@ 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="homeOutline" class="icon" />
+            <ion-icon aria-hidden="true" :icon="home" class="icon" />
             <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-icon aria-hidden="true" :icon="grid" class="icon" />
             <ion-label>思想引领</ion-label>
           </div>
         </ion-tab-button>
 
         <ion-tab-button tab="video" href="/layout/product">
           <div class="flex-col-center gap-1">
-            <ion-icon aria-hidden="true" :icon="walletOutline" class="icon" />
+            <ion-icon aria-hidden="true" :icon="wallet" 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-icon aria-hidden="true" :icon="person" class="icon" />
             <ion-label>我的事务</ion-label>
           </div>
         </ion-tab-button>

src/router/index.ts

@@ -29,6 +29,10 @@ const routes: Array<RouteRecordRaw> = [
         path: "product",
         component: () => import("@/views/product/index.vue"),
       },
+      {
+        path: "profile",
+        component: () => import("@/views/profile/index.vue"),
+      },
     ],
   },
 ];

src/theme/styles.css

@@ -0,0 +1,3 @@
+* {
+  box-sizing: border-box;
+}

src/views/home/index.vue

@@ -45,6 +45,22 @@ const newsList = ref([
     views: 1890,
     image: "https://picsum.photos/seed/news3/400/250",
   },
+  {
+    id: 4,
+    title: "深化改革进入新阶段",
+    subtitle: "全面推进现代化建设，开创新局面",
+    time: "2026-01-16 10:30",
+    views: 1520,
+    image: "https://picsum.photos/seed/news1/400/250",
+  },
+  {
+    id: 5,
+    title: "团队协作再创佳绩",
+    subtitle: "凝心聚力，共筑梦想，携手共进新时代",
+    time: "2026-01-15 16:20",
+    views: 2340,
+    image: "https://picsum.photos/seed/news2/400/250",
+  },
 ]);
 
 // 快捷入口
@@ -98,100 +114,100 @@ onUnmounted(() => {
 
 <template>
   <ion-page>
-    <ion-header class="ion-no-border header">
+    <ion-content :fullscreen="true" class="home-page">
-      <ion-toolbar class="ion-toolbar">
+      <!-- <ion-header class="ion-no-border header">
-        <div slot="start" class="flex items-center px-3 py-3">
+        <ion-toolbar class="ion-toolbar">
-          <img src="@/assets/images/guohui.png" alt="国徽" class="inline-block h-10 mr-2">
+          <div slot="start" class="flex items-center px-3 py-3">
-          <div class="font-semibold text-lg">
+            <img src="@/assets/images/guohui.png" alt="国徽" class="inline-block h-10 mr-2">
-            国务院深化改革战略推进委员会
+            <div class="font-semibold text-lg">
+              国务院深化改革战略推进委员会
+            </div>
           </div>
-        </div>
+        </ion-toolbar>
-      </ion-toolbar>
+      </ion-header> -->
-    </ion-header>
 
-    <ion-content :fullscreen="true" class="home-page ion-padding">
+      <img src="@/assets/images/home-banner.jpg" class="h-60 w-full object-cover" alt="首页横幅">
-      <div class="absolute top-0 left-0 w-full h-50 home-pg -z-1" />
 
-      <img src="@/assets/images/home-banner.jpg" class="h-40 w-full object-cover rounded-2xl shadow-lg mb-5" alt="首页横幅">
+      <div class="ion-padding-horizontal">
-
+        <!-- 快捷入口区域 -->
-      <!-- 快捷入口区域 -->
+        <section class="my-5 grid grid-cols-4 gap-4">
-      <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
-            class="w-13 h-13 rounded-xl flex-center shadow-lg"
+            v-for="action in quickActions"
-            :style="{ background: action.color }"
+            :key="action.id"
+            class="flex flex-col items-center gap-2 cursor-pointer transition-transform active:scale-95"
+            @click="handleQuickAction(action)"
           >
-            <ion-icon :icon="action.icon" class="text-3xl text-white" />
+            <div
+              class="w-12 h-12 rounded-full flex-center shadow-lg"
+              :style="{ background: action.color }"
+            >
+              <ion-icon :icon="action.icon" class="text-xl 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>
-        <!-- </div> -->
-      </section>
 
-      <!-- 新闻列表区域 -->
+        <!-- 新闻列表区域 -->
-      <section class="mb-5">
+        <section class="mt-10 mb-5">
-        <div class="flex justify-between items-center mb-4">
+          <div class="flex justify-between items-center mb-4">
-          <div class="flex items-center gap-2">
+            <div class="flex items-center gap-2">
-            <ion-icon :icon="newspaperOutline" class="text-2xl text-[#c41e3a]" />
+              <img src="@/assets/images/icon.png" class="size-7">
-            <h3 class="text-lg font-bold text-[#1a1a1a] m-0">
+              <div class="text-xl font-bold text-[#1a1a1a]">
-              新闻动态
+                新闻动态
-            </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 flex"
-            @click="handleNewsClick(news)"
-          >
-            <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-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="flex-1 p-4 flex flex-col justify-between">
+            <ion-button fill="clear" size="small" class="text-sm text-white h-8">
-              <div>
+              更多
-                <div class="text-base font-bold text-[#1a1a1a] mb-1 leading-snug line-clamp-2">
+              <ion-icon slot="end" :icon="chevronForwardOutline" />
-                  {{ news.title }}
+            </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 flex"
+              @click="handleNewsClick(news)"
+            >
+              <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-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>
-                <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">
+              <div class="flex-1 p-4 flex flex-col justify-between">
-                <span class="flex items-center gap-1">
+                <div>
-                  <ion-icon :icon="timeOutline" class="text-sm" />
+                  <div class="text-base font-bold text-[#1a1a1a] mb-1 leading-snug line-clamp-2">
-                  {{ news.time }}
+                    {{ news.title }}
-                </span>
+                  </div>
-                <span class="flex items-center gap-1">
+                  <p class="text-sm text-[#666] leading-relaxed line-clamp-2">
-                  <ion-icon :icon="eyeOutline" class="text-sm" />
+                    {{ news.subtitle }}
-                  {{ news.views }}
+                  </p>
-                </span>
+                </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 }}
+                  </span>
+                  <span class="flex items-center gap-1">
+                    <ion-icon :icon="eyeOutline" class="text-sm" />
+                    {{ news.views }}
+                  </span>
+                </div>
               </div>
             </div>
           </div>
-        </div>
+        </section>
-      </section>
+      </div>
     </ion-content>
   </ion-page>
 </template>
 
 <style lang='css' scoped>
 .ion-toolbar {
-  --background: #c32120;
+  /* --background: #c32120; */
-  --color: #fff;
+  /* --color: #fff; */
 }
 
 .home-pg {

src/views/product/index.vue

@@ -70,35 +70,20 @@ function handleSubscribe(product: any, event: Event) {
 
 <template>
   <ion-page>
-    <!-- <ion-header class="ion-no-border">
+    <ion-content>
-      <ion-toolbar class="header-toolbar">
+      <img src="@/assets/images/product-banner.jpg" class="h-50 w-full object-cover" alt="服务页横幅">
-        <div class="px-5 py-3">
-          <div class="text-xl font-bold text-white m-0">
-            业务办理
-          </div>
-          <p class="text-sm text-white/80 m-0 mt-1">
-            精选优质基金产品
-          </p>
-        </div>
-      </ion-toolbar>
-    </ion-header> -->
-
-    <ion-content class="ion-padding">
-      <div class="absolute top-0 left-0 w-full h-30 header-bg -z-1" />
 
       <!-- 基金产品列表 -->
-      <section class="mb-5">
+      <section class="mb-5 -mt-5 ion-padding-horizontal">
         <div class="flex justify-between items-center mb-4">
-          <div class="flex items-center gap-2">
+          <div class="flex justify-between items-center mb-4">
-            <ion-icon :icon="walletOutline" class="text-2xl text-[#c41e3a]" />
+            <div class="flex items-center gap-2">
-            <h3 class="text-lg font-bold text-[#1a1a1a] m-0">
+              <img src="@/assets/images/icon.png" class="size-7">
-              热门产品
+              <div class="text-xl font-bold text-[#1a1a1a]">
-            </h3>
+                基金产品
+              </div>
+            </div>
           </div>
-          <ion-button fill="clear" size="small" class="text-sm text-[#c41e3a] h-8 font-semibold">
-            全部
-            <ion-icon slot="end" :icon="chevronForwardOutline" />
-          </ion-button>
         </div>
 
         <div class="flex flex-col gap-4">

src/views/profile/index.vue

@@ -0,0 +1,30 @@
+<script lang='ts' setup>
+
+</script>
+
+<template>
+  <ion-page>
+    <ion-content>
+      <img src="@/assets/images/profile-banner.jpg" class="h-50 w-full object-cover" alt="我的横幅">
+
+      <div class="absolute top-10 left-5 flex-center gap-3">
+        <ion-avatar class="size-18">
+          <img alt="Silhouette of a person's head" src="@/assets/images/avatar.jpg">
+        </ion-avatar>
+        <div>
+          <div class="text-primary text-xl font-bold">
+            周少华
+          </div>
+          <div class="text-primary text-sm font-semibold">
+            手机号：138****1234
+          </div>
+          <div class="text-primary text-sm font-semibold">
+            邀请码：ABCD1234
+          </div>
+        </div>
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped></style>

src/views/service/index.vue

@@ -41,20 +41,18 @@ function handleNewsClick(news: any) {
 
 <template>
   <ion-page>
-    <ion-content class="ion-padding">
+    <ion-content>
+      <img src="@/assets/images/service-banner1.jpg" class="h-50 w-full object-cover" alt="服务页横幅">
+
       <!-- 新闻列表区域 -->
-      <section class="mb-5">
+      <section class="mb-5 -mt-5 ion-padding-horizontal">
         <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]" />
+            <img src="@/assets/images/icon.png" class="size-7">
-            <h3 class="text-lg font-bold text-[#1a1a1a] m-0">
+            <div class="text-xl font-bold text-[#1a1a1a]">
               新闻动态
-            </h3>
+            </div>
           </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