上一版误解了需求——把两种身份的会员卡都改成了 VIP 黑金色, 实际应只有 VIP 使用该专属色,普通用户保持原有浅色卡片。 改动: - 恢复 .member-card.is-vip(黑金 + 金色描边 + 金色文字/图标/光晕) 与 .member-card.is-free(珍珠白 + 深色文字)双形态 - 模板恢复 :class="isVip ? 'is-vip' : 'is-free'" - 暗色主题恢复 is-free 的墨绿底(白底在暗色下刺眼) - 头像外圈与底色按身份区分:VIP 白环 + 半透明白底 + 金棕首字, 普通用户淡品牌色环 + 浅品牌底 + 品牌绿首字 - 「兑换 CDK」按钮保持金色实底,在两种卡片上都有足够对比 保留上一版正确的文案改动:普通用户显示「开通 VIP 即可不限次数」。 已截图确认两种卡片渲染正确(黑金 / 珍珠白 分明)。 npm run build 与 vue-tsc 均通过。
This commit is contained in:
@@ -473,14 +473,14 @@ async function handleRedeemInvite() {
|
||||
中线(切入比例 50%,与中线差值 0px)。头图的 pb 只影响上方留白,
|
||||
不影响对齐(pb-14/pb-16 实测均对齐),故保留 pb-16。 -->
|
||||
<div class="relative px-4 -mt-11 rise-in" style="animation-delay: 40ms">
|
||||
<div class="member-card relative overflow-hidden hero-clip rounded-3xl px-4 py-3 shadow-xl">
|
||||
<div class="member-card relative overflow-hidden hero-clip rounded-3xl px-4 py-3 shadow-xl" :class="isVip ? 'is-vip' : 'is-free'">
|
||||
<div class="pointer-events-none absolute -right-8 -top-10 w-36 h-36 rounded-full member-card-glow" />
|
||||
<div class="relative flex items-center gap-3">
|
||||
<!-- 头像(原顶部头图内容整合至此处) -->
|
||||
<div class="relative flex-shrink-0">
|
||||
<div class="w-11 h-11 rounded-full overflow-hidden ring-2 ring-white/70 shadow-sm bg-white/30 flex items-center justify-center">
|
||||
<div class="w-11 h-11 rounded-full overflow-hidden ring-2 shadow-sm flex items-center justify-center" :class="isVip ? 'ring-white/70 bg-white/30' : 'ring-brand-100 bg-brand-50'">
|
||||
<img v-show="userInfo?.avatar && !avatarFailed" :src="userInfo?.avatar" class="w-full h-full object-cover" alt="头像" @error="avatarFailed = true" />
|
||||
<span v-if="!userInfo?.avatar || avatarFailed" class="text-base font-bold" :class="'text-amber-800'">{{ userInfo?.realName?.[0] || userInfo?.username?.[0] || '?' }}</span>
|
||||
<span v-if="!userInfo?.avatar || avatarFailed" class="text-base font-bold" :class="isVip ? 'text-amber-800' : 'text-brand-700'">{{ userInfo?.realName?.[0] || userInfo?.username?.[0] || '?' }}</span>
|
||||
</div>
|
||||
<div v-if="isVip" class="vip-badge absolute -right-1.5 -bottom-1 z-10 whitespace-nowrap">VIP</div>
|
||||
</div>
|
||||
@@ -1008,19 +1008,29 @@ async function handleRedeemInvite() {
|
||||
mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
|
||||
}
|
||||
|
||||
/* 会员卡:统一为 VIP 专属黑金色(普通用户与 VIP 同一套质感,
|
||||
区别只在文案与角标;固定色,亮暗主题下表现一致) */
|
||||
.member-card {
|
||||
/* 会员卡:VIP 为黑金专属色,普通用户为珍珠白(固定色,亮暗下质感一致) */
|
||||
.member-card.is-vip {
|
||||
background: linear-gradient(135deg, #2b2418 0%, #1b1710 60%, #2d2516 100%);
|
||||
border: 1px solid rgb(246 196 69 / 0.35);
|
||||
}
|
||||
.member-card .member-title { color: #ffe39a; }
|
||||
.member-card .member-sub { color: rgb(255 227 154 / 0.75); }
|
||||
.member-card .member-icon {
|
||||
.member-card.is-vip .member-title { color: #ffe39a; }
|
||||
.member-card.is-vip .member-sub { color: rgb(255 227 154 / 0.75); }
|
||||
.member-card.is-vip .member-icon {
|
||||
color: #5b3a00;
|
||||
background: linear-gradient(135deg, #ffe9a8, #f6c445 55%, #e8a020);
|
||||
}
|
||||
.member-card .member-card-glow { background: radial-gradient(circle, rgb(246 196 69 / 0.35), transparent 70%); }
|
||||
.member-card.is-vip .member-card-glow { background: radial-gradient(circle, rgb(246 196 69 / 0.35), transparent 70%); }
|
||||
.member-card.is-free {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f7fbf9 100%);
|
||||
border: 1px solid rgb(14 40 34 / 0.06);
|
||||
}
|
||||
.member-card.is-free .member-title { color: #17221f; }
|
||||
.member-card.is-free .member-sub { color: #66756f; }
|
||||
.member-card.is-free .member-icon {
|
||||
color: #8a5a00;
|
||||
background: linear-gradient(135deg, #fff1c7, #ffe08a);
|
||||
}
|
||||
.member-card.is-free .member-card-glow { background: radial-gradient(circle, rgb(246 196 69 / 0.22), transparent 70%); }
|
||||
|
||||
/* 邀请卡主按钮:固定紫(白字 6:1)。不用 bg-purple-600:暗色色板把它映射为浅紫作文字色,白字会看不清 */
|
||||
.invite-btn {
|
||||
@@ -1145,8 +1155,14 @@ async function handleRedeemInvite() {
|
||||
|
||||
<style>
|
||||
/* 暗色覆盖:非 scoped(scoped 中 :global(.dark) .x 会编译成仅 .dark 而失效);html.dark 提高优先级压过 .x[data-v] */
|
||||
/* 会员卡暗色:仅微调边框透明度(卡片本身已是黑金,暗色下无需换底色) */
|
||||
html.dark .member-card { border-color: rgb(246 196 69 / 0.28); }
|
||||
/* 会员卡暗色:VIP 微调金色边框透明度;普通用户在暗色下用墨绿底(原亮色白底在暗色刺眼) */
|
||||
html.dark .member-card.is-free {
|
||||
background: linear-gradient(135deg, #1e2c28 0%, #18221f 100%);
|
||||
border-color: rgb(255 255 255 / 0.06);
|
||||
}
|
||||
html.dark .member-card.is-free .member-title { color: #eaf2ef; }
|
||||
html.dark .member-card.is-free .member-sub { color: #98aba4; }
|
||||
html.dark .member-card.is-vip { border-color: rgb(246 196 69 / 0.28); }
|
||||
html.dark .invite-card {
|
||||
background: linear-gradient(135deg, #262040 0%, #211b38 100%);
|
||||
border-color: rgb(185 165 255 / 0.16);
|
||||
|
||||
Reference in New Issue
Block a user