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

21
packages/app/src/components/CardShop.vue
View File

@@ -30,10 +30,18 @@
class="card-row"
@tap="goToDetail(card.id)"
>
<!-- Card Cover — clean minimal design -->
<view class="card-cover" :class="getCardCoverClass(card.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="card.coverUrl ? '' : getCardCoverClass(card.type)">
<image
v-if="card.coverUrl"
class="card-cover-img"
:src="card.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 -->
@@ -178,6 +186,11 @@ function goToAllCards() {
position: relative;
}
.card-cover-img {
width: 100%;
height: 100%;
}
/* Decorative circles */
.cover-deco {
position: absolute;