jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

宝宝来信卡三版：左侧玫瑰色封口块 + 探出卡沿的矢量信封 + 未读数 + 圆形箭头

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-02 01:26:16 +00:00
parent fcac03ea59
commit 44f0cfeec1
3 changed files with 37 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
mama-box.css
View File

@@ -3410,3 +3410,36 @@ a.skip:focus{left:16px;top:16px}
.td-go::after{content:" ›"}
.td-row:active .td-box{background:#DDF3E9}
.fp2 .td-foot{display:block;margin-top:6px;padding-top:9px;border-top:1px solid rgba(90,160,130,.15);font-size:11.5px;color:#8FA89D;text-align:center}
/* ================= 首页「宝宝来信」卡 三版（2026-10-02 用户：二版太单薄，要简洁但有设计感）=================
结构：左侧一块玫瑰渐变「封口」色块，信封从色块里探出卡片上沿（有纵深）；
右侧文字三行（标题 + 未读说明 + 读读…）；最右一颗实心圆箭头。整卡只用玫瑰一种强调色。 */
.letter-card{gap:12px;padding:0 12px 0 0;overflow:visible;
background:#fff;box-shadow:0 14px 30px rgba(170,70,70,.18),0 2px 6px rgba(170,70,70,.06)}
.lc-envwrap{align-self:stretch;width:74px;height:auto;border-radius:20px 0 0 20px;display:block;position:relative;
background:linear-gradient(150deg,#FF8DA1 0%,#F25C7A 100%)}
.lc-envwrap::before{content:"";position:absolute;right:-10px;top:0;bottom:0;width:20px;border-radius:0 50% 50% 0/0 50% 50% 0;
background:inherit}
.lc-envwrap::after{content:"";position:absolute;inset:0;border-radius:20px 0 0 20px;pointer-events:none;
background:radial-gradient(60px 40px at 20% 100%,rgba(255,255,255,.28),rgba(255,255,255,0) 70%)}
.lc-env{position:absolute;left:8px;top:-14px;width:60px;z-index:1;filter:drop-shadow(0 6px 8px rgba(150,30,60,.3))}
.letter-card.has-new .lc-env{animation:lcFloat 3.2s ease-in-out infinite}
@keyframes lcFloat{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-3px)}}
.lc-num{top:auto;bottom:8px;left:8px;right:auto;z-index:2;background:#fff;color:#E2456A;box-shadow:0 2px 6px rgba(150,30,60,.25);
font-size:11px;min-width:20px;height:20px;line-height:20px;border-radius:10px}
.lc-body{padding-left:6px}
.lc-title{font-size:16px;font-weight:900;color:var(--ink);letter-spacing:.2px}
.lc-desc{font-size:11.5px;color:#9A8880;margin:3px 0 3px}
.lc-link{font-size:12px;font-weight:700;color:#E2456A}
.lc-link i{display:none}
.lc-arrow{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;
background:linear-gradient(135deg,#FF8DA1,#E2456A);box-shadow:0 5px 12px rgba(226,69,106,.32)}
@media (prefers-reduced-motion:reduce){.letter-card.has-new .lc-env{animation:none}}
.lc-envwrap{width:64px}
.lc-envwrap::before{display:none}
.lc-env{left:4px;top:-12px;width:56px}
.letter-card{gap:10px;padding-right:10px}
.lc-body{padding-left:0}
.lc-arrow{flex-basis:26px;width:26px;height:26px}
.lc-arrow svg{width:14px;height:14px}
.lc-env-v{left:9px;top:-10px;width:48px;height:36px;filter:drop-shadow(0 6px 8px rgba(150,30,60,.28))}