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,7 +114,8 @@ onUnmounted(() => {
 
 <template>
   <ion-page>
-    <ion-header class="ion-no-border header">
+    <ion-content :fullscreen="true" class="home-page">
+      <!-- <ion-header class="ion-no-border header">
         <ion-toolbar class="ion-toolbar">
           <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">
@@ -107,15 +124,13 @@ onUnmounted(() => {
             </div>
           </div>
         </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="mt-10 mb-5 grid grid-cols-4 gap-4">
+        <section class="my-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"
@@ -124,10 +139,10 @@ onUnmounted(() => {
             @click="handleQuickAction(action)"
           >
             <div
-            class="w-13 h-13 rounded-xl flex-center shadow-lg"
+              class="w-12 h-12 rounded-full flex-center shadow-lg"
               :style="{ background: action.color }"
             >
-            <ion-icon :icon="action.icon" class="text-3xl text-white" />
+              <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>
@@ -135,13 +150,13 @@ onUnmounted(() => {
         </section>
 
         <!-- 新闻列表区域 -->
-      <section class="mb-5">
+        <section class="mt-10 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]" />
+              <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">
               更多
@@ -184,14 +199,15 @@ onUnmounted(() => {
             </div>
           </div>
         </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 justify-between items-center mb-4">
             <div class="flex items-center gap-2">
-            <ion-icon :icon="walletOutline" 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>
           </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>
-          <ion-button fill="clear" size="small" class="text-sm text-white h-8">
+          </div>
-            更多
-            <ion-icon slot="end" :icon="chevronForwardOutline" />
-          </ion-button>
         </div>
         <div class="flex flex-col gap-4">
           <div