From 029f8d7be601f1ab16c68341fc870d437bd48061 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Fri, 16 Jan 2026 22:43:21 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=BA=A7=E5=93=81?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E5=B1=95=E7=A4=BA=E5=9F=BA=E9=87=91?=
 =?UTF-8?q?=E4=BA=A7=E5=93=81=E5=88=97=E8=A1=A8=E5=8F=8A=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts         |   4 +
 src/views/product/index.vue | 205 ++++++++++++++++++++++++++++++++++++
 2 files changed, 209 insertions(+)
 create mode 100644 src/views/product/index.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 84f43d4..775e7d3 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -25,6 +25,10 @@ const routes: Array<RouteRecordRaw> = [
         path: "service",
         component: () => import("@/views/service/index.vue"),
       },
+      {
+        path: "product",
+        component: () => import("@/views/product/index.vue"),
+      },
     ],
   },
 ];
diff --git a/src/views/product/index.vue b/src/views/product/index.vue
new file mode 100644
index 0000000..7b37578
--- /dev/null
+++ b/src/views/product/index.vue
@@ -0,0 +1,205 @@
+<script lang='ts' setup>
+import {
+  calendarOutline,
+  cardOutline,
+  chevronForwardOutline,
+  timeOutline,
+  trendingUpOutline,
+  walletOutline,
+} from "ionicons/icons";
+
+// 基金产品数据
+const fundProducts = ref([
+  {
+    id: 1,
+    name: "稳健增长基金",
+    endTime: "2026-01-25 23:59",
+    image: "https://picsum.photos/seed/fund1/200/200",
+    currentPrice: 1.258,
+    expectedReturn: "15.8%",
+    period: "90天",
+    tag: "稳健",
+    tagColor: "#1890ff",
+  },
+  {
+    id: 2,
+    name: "积极进取基金",
+    endTime: "2026-01-28 23:59",
+    image: "https://picsum.photos/seed/fund2/200/200",
+    currentPrice: 1.482,
+    expectedReturn: "22.5%",
+    period: "180天",
+    tag: "积极",
+    tagColor: "#c41e3a",
+  },
+  {
+    id: 3,
+    name: "均衡配置基金",
+    endTime: "2026-02-01 23:59",
+    image: "https://picsum.photos/seed/fund3/200/200",
+    currentPrice: 1.356,
+    expectedReturn: "18.6%",
+    period: "120天",
+    tag: "均衡",
+    tagColor: "#52c41a",
+  },
+  {
+    id: 4,
+    name: "价值投资基金",
+    endTime: "2026-02-05 23:59",
+    image: "https://picsum.photos/seed/fund4/200/200",
+    currentPrice: 1.189,
+    expectedReturn: "16.2%",
+    period: "90天",
+    tag: "价值",
+    tagColor: "#faad14",
+  },
+]);
+
+function handleProductClick(product: any) {
+  console.log("查看产品:", product.name);
+  // TODO: 跳转到产品详情
+}
+
+function handleSubscribe(product: any, event: Event) {
+  event.stopPropagation();
+  console.log("申购产品:", product.name);
+  // TODO: 实现申购功能
+}
+</script>
+
+<template>
+  <ion-page>
+    <!-- <ion-header class="ion-no-border">
+      <ion-toolbar class="header-toolbar">
+        <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">
+        <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]" />
+            <h3 class="text-lg font-bold text-[#1a1a1a] m-0">
+              热门产品
+            </h3>
+          </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">
+          <div
+            v-for="product in fundProducts"
+            :key="product.id"
+            class="bg-white rounded-2xl overflow-hidden shadow-sm cursor-pointer transition-all active:translate-y-0.5 active:shadow-sm flex"
+            @click="handleProductClick(product)"
+          >
+            <!-- 左侧缩略图 -->
+            <div class="relative w-28 h-36 flex-shrink-0 overflow-hidden bg-gradient-to-br from-[#f5f5f5] to-[#e8e8e8]">
+              <img :src="product.image" :alt="product.name" class="w-full h-full object-cover">
+              <div
+                class="fund-tag absolute top-2 left-2 text-white px-2 py-0.5 rounded-lg text-xs font-semibold shadow-lg"
+                :style="{ background: product.tagColor }"
+              >
+                {{ product.tag }}
+              </div>
+            </div>
+
+            <!-- 右侧信息 -->
+            <div class="flex-1 p-4 flex flex-col justify-between">
+              <div>
+                <h4 class="text-base font-bold text-[#1a1a1a] mb-1 leading-snug">
+                  {{ product.name }}
+                </h4>
+                <div class="flex items-center gap-1 text-xs text-[#999] mb-2">
+                  <ion-icon :icon="timeOutline" class="text-sm" />
+                  <span>申购截止：{{ product.endTime }}</span>
+                </div>
+
+                <!-- 产品信息 -->
+                <div class="grid grid-cols-3 gap-2 mb-2">
+                  <div class="flex flex-col">
+                    <span class="text-xs text-[#999]">当前价格</span>
+                    <span class="text-sm font-bold text-[#c41e3a]">¥{{ product.currentPrice }}</span>
+                  </div>
+                  <div class="flex flex-col">
+                    <span class="text-xs text-[#999]">到期收益</span>
+                    <span class="text-sm font-bold text-[#52c41a] flex items-center gap-0.5">
+                      <ion-icon :icon="trendingUpOutline" class="text-xs" />
+                      {{ product.expectedReturn }}
+                    </span>
+                  </div>
+                  <div class="flex flex-col">
+                    <span class="text-xs text-[#999]">产品周期</span>
+                    <span class="text-sm font-bold text-[#1a1a1a] flex items-center gap-0.5">
+                      <ion-icon :icon="calendarOutline" class="text-xs" />
+                      {{ product.period }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 申购按钮 -->
+              <div class="flex items-center gap-2 mt-2">
+                <ion-button
+                  size="small"
+                  class="subscribe-btn flex-1"
+                  @click="handleSubscribe(product, $event)"
+                >
+                  <ion-icon slot="start" :icon="cardOutline" />
+                  我要申购
+                </ion-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped>
+.header-toolbar {
+  --background: #c32120;
+  --color: #fff;
+}
+
+.header-bg {
+  background: linear-gradient(180deg, #c32120 0%, transparent 100%);
+}
+
+.fund-tag {
+  backdrop-filter: blur(4px);
+}
+
+.subscribe-btn {
+  --background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
+  --background-activated: linear-gradient(135deg, #8b1a2e 0%, #c41e3a 100%);
+  --border-radius: 12px;
+  --padding-start: 16px;
+  --padding-end: 16px;
+  --box-shadow: 0 2px 8px rgba(196, 30, 58, 0.3);
+  font-weight: 600;
+  font-size: 13px;
+  height: 32px;
+  text-transform: none;
+}
+
+.subscribe-btn::part(native) {
+  font-weight: 600;
+}
+</style>