richard/mp-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(card): add cover image support for card types

Browse Source
This commit is contained in:
richarjiang
2026-04-15 23:50:12 +08:00
parent 4dacd908a6
commit b02f38dcc7
9 changed files with 262 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
packages/app/src/pages/card/detail.vue
View File

@@ -37,10 +37,18 @@
class="card-row"
@tap="goToDetail(c.id)"
>
<!-- Card Cover — clean minimal -->
<view class="card-cover" :class="getCardCoverClass(c.type)">
<view class="cover-deco cover-deco--1" />
<view class="cover-deco cover-deco--2" />
<!-- Card Cover — image if available, gradient fallback -->
<view class="card-cover" :class="c.coverUrl ? '' : getCardCoverClass(c.type)">
<image
v-if="c.coverUrl"
class="card-cover-img"
:src="c.coverUrl"
mode="aspectFill"
/>
<template v-else>
<view class="cover-deco cover-deco--1" />
<view class="cover-deco cover-deco--2" />
</template>
</view>
<!-- Card info — aligns with card-cover height -->
@@ -77,10 +85,19 @@
<!-- Card content (single card mode) -->
<template v-else>
<!-- Hero section -->
<view class="card-hero" :class="heroClass">
<!-- Decorative circles -->
<view class="hero-deco hero-deco--1" />
<view class="hero-deco hero-deco--2" />
<view class="card-hero" :class="cardData.coverUrl ? 'hero--custom' : heroClass">
<!-- Cover image background -->
<image
v-if="cardData.coverUrl"
class="hero-cover-img"
:src="cardData.coverUrl"
mode="aspectFill"
/>
<!-- Decorative circles (only when no cover image) -->
<template v-else>
<view class="hero-deco hero-deco--1" />
<view class="hero-deco hero-deco--2" />
</template>
<view class="hero-badge">
<text class="hero-badge-text">{{ typeLabel }}</text>
@@ -456,6 +473,18 @@ onMounted(() => {
&.hero--trial {
background: linear-gradient(135deg, #C8D8D2 0%, #A9C4BC 100%);
}
&.hero--custom {
background: #333;
}
}
.hero-cover-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.5;
}
/* Decorative background circles */
@@ -737,6 +766,11 @@ onMounted(() => {
position: relative;
}
.card-cover-img {
width: 100%;
height: 100%;
}
.cover-deco {
position: absolute;
border-radius: 50%;