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

feat: 修复二级页面头图展示问题

Browse Source
This commit is contained in:
zoujing committed 2026-09-17 11:37:49 +08:00
1 parent d2dab27afa
commit 87cf7dfbaa
4 files changed
+67 -130
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/BenefitCard/index.vue
+14 -28
View File
@@ -105,12 +105,8 @@ const onTap = () => {
</script>
<template>
<view
class="relative flex h-[130px] bg-white border-[0.5px] rounded-card mt-[11px]"
:class="rootStateCls"
hover-class="opacity-90"
@click="onTap"
>
<view class="relative flex h-[130px] bg-white border-[0.5px] rounded-card mt-[11px]" :class="rootStateCls"
hover-class="opacity-90" @click="onTap">
<!-- 左：信息区（四行固定顺序） -->
<view class="flex-1 min-w-0 rounded-l-card px-[14px] pt-[13px] pb-3 flex flex-col" :class="sideStateCls">
<!-- ① 类型 -->
@@ -126,25 +122,19 @@ const onTap = () => {
<text class="text-[15px] font-bold" :class="priceNumCls">¥</text>
<text class="text-display font-extrabold tracking-[-1px]" :class="priceNumCls">{{ deal }}</text>
<text v-if="original" class="text-[11.5px] font-medium line-through" :class="wasCls">¥{{ original }}</text>
<text
v-if="pct"
class="ml-auto text-[10px] font-bold tracking-[0.2px] rounded-[6px] px-[6px] py-[3px]"
:class="pctCls"
>
<text v-if="pct" class="ml-auto text-[10px] font-bold tracking-[0.2px] rounded-[6px] px-[6px] py-[3px]"
:class="pctCls">
{{ pct }}
</text>
</view>
<!-- ③ 规格胶囊 + 适用范围 -->
<view class="flex items-center gap-[6px] mt-[7px] text-[11px] whitespace-nowrap" :class="scopeCls">
<text
v-if="spec"
class="shrink-0 text-hint font-semibold rounded-[6px] px-[6px] py-[2px] border-[0.5px]"
:class="specCls"
>
<text v-if="spec" class="shrink-0 text-hint font-semibold rounded-[6px] px-[6px] py-[2px] border-[0.5px]"
:class="specCls">
{{ spec }}
</text>
<text class="min-w-0 truncate">{{ b.scope_desc || b.merchant_name || "" }}</text>
<view class="min-w-0 flex-1 line-clamp-1">{{ b.scope_desc || b.merchant_name || "" }}</view>
</view>
<!-- ④ 有效期 + 第二项随态 -->
@@ -153,10 +143,8 @@ const onTap = () => {
<AppIcon name="clock" tone="ink3" :size="12" />
<text>{{ validText }}</text>
</view>
<view
class="flex items-center gap-[3.5px] shrink-0 whitespace-nowrap"
:class="secondMeta.ok ? 'text-[#00A46C]' : ''"
>
<view class="flex items-center gap-[3.5px] shrink-0 whitespace-nowrap"
:class="secondMeta.ok ? 'text-[#00A46C]' : ''">
<AppIcon :name="secondMeta.icon" :tone="secondMeta.ok ? 'brand' : 'ink3'" :size="12" />
<text>{{ secondMeta.text }}</text>
</view>
@@ -165,20 +153,18 @@ const onTap = () => {
<!-- 右：配图区（62%/38% 撕口） -->
<view
class="relative w-[38%] min-w-[112px] shrink-0 overflow-hidden rounded-r-card border-l border-dashed border-[rgba(255,138,61,0.45)]"
>
class="relative w-[38%] min-w-[112px] shrink-0 overflow-hidden rounded-r-card border-l border-dashed border-[rgba(255,138,61,0.45)]">
<image class="absolute inset-0 w-full h-full" :class="coverImgCls" :src="b.image_url" mode="aspectFill" />
<view class="absolute inset-0 scrim-cover" />
<view class="absolute top-[11px] right-[11px] z-[2] text-right text-[11.5px] font-bold leading-[1.5] text-white tracking-[0.6px] [rotate:-8deg] [text-shadow:0_1px_7px_rgba(0,0,0,0.5)]">
<view
class="absolute top-[11px] right-[11px] z-[2] text-right text-[11.5px] font-bold leading-[1.5] text-white tracking-[0.6px] [rotate:-8deg] [text-shadow:0_1px_7px_rgba(0,0,0,0.5)]">
<text v-for="(line, i) in slogan" :key="i" class="block">{{ line }}</text>
</view>
<view class="absolute left-0 right-0 bottom-3 z-[2] flex justify-center">
<view
class="h-[30px] px-4 rounded-full text-white text-cap font-semibold flex items-center whitespace-nowrap"
:class="ctaStateCls"
>
<view class="h-[30px] px-4 rounded-full text-white text-cap font-semibold flex items-center whitespace-nowrap"
:class="ctaStateCls">
{{ ctaText }}
</view>
</view>