From 1ccfee2eee43e102f209999b54515dfc59e10f89 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Tue, 20 Jan 2026 04:36:30 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=BA=A7=E5=93=81?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E6=A0=B7=E5=BC=8F=EF=BC=8C=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E7=BC=A9=E7=95=A5=E5=9B=BE=E5=92=8C=E4=BF=A1=E6=81=AF=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/product/index.vue | 103 ++++++++++++++++--------------------
 1 file changed, 46 insertions(+), 57 deletions(-)

diff --git a/src/views/product/index.vue b/src/views/product/index.vue
index d0a56ae..124eb40 100644
--- a/src/views/product/index.vue
+++ b/src/views/product/index.vue
@@ -78,66 +78,57 @@ onMounted(() => {
           <div
             v-for="product in data"
             :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 h-45"
+            class="bg-white rounded-2xl overflow-hidden shadow-sm cursor-pointer transition-all active:translate-y-0.5 active:shadow-sm"
             @click="handleProductClick(product)"
           >
-            <!-- 左侧缩略图 -->
-            <div class="relative w-28 h-full shrink-0 overflow-hidden bg-linear-to-br from-[#f5f5f5] to-[#e8e8e8]">
+            <!-- 顶部缩略图 -->
+            <div class="relative w-full h-45 overflow-hidden bg-gradient-to-br from-[#f5f5f5] to-[#e8e8e8]">
               <img v-if="product.coverImage" :src="product.coverImage" :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"
-              >
-                {{ product.tag }}
-              </div> -->
+              <div class="fund-tag 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="flex-1 p-4 flex flex-col justify-between">
-              <div>
-                <div class="text-xl font-bold text-[#1a1a1a] mb-1 leading-snug">
-                  {{ product.name }}
-                </div>
-                <div class="flex items-center gap-1 text-xs text-[#999] mb-2">
-                  <ion-icon :icon="timeOutline" class="text-sm" />
-                  <span>申购截止：{{ useDateFormat(product.subscribeEndAt, 'YYYY-MM-DD') }}</span>
-                </div>
+            <!-- 底部信息 -->
+            <div class="p-4">
+              <div class="text-xl font-bold text-[#1a1a1a] mb-2 leading-snug">
+                {{ product.name }}
+              </div>
+              <div class="flex items-center gap-1 text-xs text-[#999] mb-3">
+                <ion-icon :icon="timeOutline" class="text-sm" />
+                <span>申购截止：{{ useDateFormat(product.subscribeEndAt, 'YYYY-MM-DD') }}</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-lg font-bold text-[#c41e3a]">¥{{ Number(product.price) }}</span>
-                  </div>
-                  <div class="flex flex-col">
-                    <span class="text-xs text-[#999]">到期收益</span>
-                    <span class="text-lg font-bold text-[#52c41a] flex items-center gap-0.5">
-                      <ion-icon :icon="trendingUpOutline" class="text-base mr-1" />
-                      {{ Number(product.maturityYield) }}
-                    </span>
-                  </div>
-                  <div class="flex flex-col">
-                    <span class="text-xs text-[#999]">产品周期(天)</span>
-                    <span class="text-lg font-bold text-[#1a1a1a] flex items-center gap-0.5">
-                      <ion-icon :icon="calendarOutline" class="text-base mr-1" />
-                      {{ Number(product.cycleDays) }}
-                    </span>
-                  </div>
+              <!-- 产品信息 -->
+              <div class="grid grid-cols-3 gap-3 mb-3">
+                <div class="flex flex-col">
+                  <span class="text-xs text-[#999] mb-1">当前价格</span>
+                  <span class="text-lg font-bold text-[#c41e3a]">¥{{ Number(product.price) }}</span>
+                </div>
+                <div class="flex flex-col">
+                  <span class="text-xs text-[#999] mb-1">到期收益</span>
+                  <span class="text-lg font-bold text-[#52c41a] flex items-center gap-0.5">
+                    ¥{{ Number(product.maturityYield) }}
+                  </span>
+                </div>
+                <div class="flex flex-col">
+                  <span class="text-xs text-[#999] mb-1">周期(天)</span>
+                  <span class="text-lg font-bold text-[#1a1a1a] flex items-center gap-0.5">
+                    <ion-icon :icon="calendarOutline" class="text-base" />
+                    {{ Number(product.cycleDays) }}
+                  </span>
                 </div>
               </div>
 
               <!-- 申购按钮 -->
-              <div class="flex items-center gap-2 mt-2">
-                <ion-button
-                  size="small"
-                  class="subscribe-btn flex-1"
-                  @click="handleSubscribe(product, $event)"
-                >
-                  <div class="flex-center gap-2">
-                    <ion-icon slot="start" :icon="cardOutline" />
-                    <span>我要申购</span>
-                  </div>
-                </ion-button>
-              </div>
+              <ion-button
+                expand="block"
+                class="subscribe-btn"
+                @click="handleSubscribe(product, $event)"
+              >
+                <ion-icon slot="start" :icon="cardOutline" />
+                我要申购
+              </ion-button>
             </div>
           </div>
         </div>
@@ -161,15 +152,13 @@ onMounted(() => {
 }
 
 .subscribe-btn {
-  --background: linear-gradient(135deg, #ac1717 0%, #662626 100%);
-  --background-activated: linear-gradient(135deg, #ac1717 0%, #662626 100%);
+  --background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
+  --background-activated: linear-gradient(135deg, #8b1a2e 0%, #6d1523 100%);
   --border-radius: 12px;
-  --padding-start: 16px;
-  --padding-end: 16px;
-  --box-shadow: 0 2px 8px rgba(196, 30, 30, 0.3);
+  --box-shadow: 0 2px 8px rgba(196, 30, 58, 0.3);
   font-weight: 600;
-  font-size: 13px;
-  height: 32px;
+  font-size: 15px;
+  height: 44px;
   text-transform: none;
 }