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

5
index.html
View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title>
<!-- V:26100154 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26100155 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css">
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 共享助手：授权/跳商城/位置上报（分享卡片同步，见 docs/h5-auth-standard.md 第四节） -->
@@ -139,7 +139,7 @@
而底 tab 早已跳 laixin —— 两套数据导致「红点说有新信、卡里什么都没有」。
改数据源就是修这个，**别再把它接回本地信件数据**（内置来信屏已整体删除，这张卡只认 laixin）。 -->
<button class="letter-card ripple hide" id="homeLetter">
<span class="lc-envwrap"><img class="lc-env" src="assets/img/02cf420f0d07.png" alt="" aria-hidden="true"><b class="lc-num" id="lcNum" aria-hidden="true"></b></span>
<span class="lc-envwrap"><svg class="lc-env lc-env-v" viewBox="0 0 64 48" aria-hidden="true"><rect x="2" y="4" width="60" height="42" rx="7" fill="#fff"/><path d="M4 9l28 20L60 9" fill="none" stroke="#F7C6D1" stroke-width="2.4" stroke-linejoin="round"/><path d="M4 44l20-17M60 44L40 27" stroke="#FBE1E7" stroke-width="2"/><circle cx="32" cy="29" r="8.5" fill="#E2456A"/><path d="M32 33.2c-2.6-1.6-4-3-4-4.4a2 2 0 0 1 4-.7 2 2 0 0 1 4 .7c0 1.4-1.4 2.8-4 4.4z" fill="#fff"/></svg><b class="lc-num" id="lcNum" aria-hidden="true"></b></span>
<span class="lc-stamp" aria-hidden="true"><i>♥</i></span>
<div class="lc-body">
<!-- ⚠️ 这段只是**兜底**（正常情况下用户看不到：卡默认 .hide，
@@ -150,6 +150,7 @@
<div class="lc-desc" id="lcDesc">妈妈，今天我在你肚子里翻了个身……</div>
<div class="lc-link"><span id="lcLink">读读宝宝的话</span> <i>›</i></div>
</div>
<span class="lc-arrow" aria-hidden="true"><svg viewBox="0 0 24 24" width="16" height="16"><path d="M9 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
</button>
<!-- 来信卡收起来时由 hideLetterCard() / renderLetterReminder() 给 #homeBody 挂 .no-letter，

2
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26100154';
var VER = '26100155';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

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))}