root/financial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化产品展示样式，调整缩略图和信息布局，提升用户体验

Browse Source
This commit is contained in:
Seven
2026-01-20 04:36:30 +07:00
parent 4db8b1d2da
commit 1ccfee2eee
1 changed files with 46 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/views/product/index.vue
View File

@@ -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;
}