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

feat: 更新capp-eden依赖至0.0.35版本；优化产品展示样式和数据格式化

Browse Source
This commit is contained in:
Seven
2026-01-20 03:40:49 +07:00
parent 2b991ad26a
commit 48d4a6312d
3 changed files with 26 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -43,6 +43,10 @@ function handleSubscribe(product: any, event: Event) {
console.log("申购产品:", product.name);
// TODO: 实现申购功能
}
onMounted(() => {
fetchData();
});
</script>
<template>
@@ -74,12 +78,12 @@ function handleSubscribe(product: any, event: Event) {
<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"
class="bg-white rounded-2xl overflow-hidden shadow-sm cursor-pointer transition-all active:translate-y-0.5 active:shadow-sm flex h-45"
@click="handleProductClick(product)"
>
<!-- 左侧缩略图 -->
<div class="relative w-28 h-36 shrink-0 overflow-hidden bg-linear-to-br from-[#f5f5f5] to-[#e8e8e8]">
<img :src="product.image" :alt="product.name" class="w-full h-full object-cover">
<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"
>
@@ -90,32 +94,32 @@ function handleSubscribe(product: any, event: Event) {
<!-- 右侧信息 -->
<div class="flex-1 p-4 flex flex-col justify-between">
<div>
<h4 class="text-base font-bold text-[#1a1a1a] mb-1 leading-snug">
<div class="text-xl font-bold text-[#1a1a1a] mb-1 leading-snug">
{{ product.name }}
</h4>
</div>
<div class="flex items-center gap-1 text-xs text-[#999] mb-2">
<ion-icon :icon="timeOutline" class="text-sm" />
<span>申购截止：{{ product.subscribeEndAt }}</span>
<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]">¥{{ product.price }}</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-xs" />
{{ product.maturityYield }}
<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-xs text-[#999]">产品周期(天)</span>
<span class="text-lg font-bold text-[#1a1a1a] flex items-center gap-0.5">
<ion-icon :icon="calendarOutline" class="text-xs" />
{{ product.cycleDays }}
<ion-icon :icon="calendarOutline" class="text-base mr-1" />
{{ Number(product.cycleDays) }}
</span>
</div>
</div>
@@ -157,12 +161,12 @@ function handleSubscribe(product: any, event: Event) {
}
.subscribe-btn {
--background: linear-gradient(135deg, #1778ac 0%, #265166 100%);
--background-activated: linear-gradient(135deg, #1778ac 0%, #265166 100%);
--background: linear-gradient(135deg, #ac1717 0%, #662626 100%);
--background-activated: linear-gradient(135deg, #ac1717 0%, #662626 100%);
--border-radius: 12px;
--padding-start: 16px;
--padding-end: 16px;
--box-shadow: 0 2px 8px rgba(30, 124, 196, 0.3);
--box-shadow: 0 2px 8px rgba(196, 30, 30, 0.3);
font-weight: 600;
font-size: 13px;
height: 32px;