From 44f0cfeec1fac40bc32a5ed0a46bd254bba288a4 Mon Sep 17 00:00:00 2001
From: Karlcarlo <karlcarlo@163.com>
Date: Fri, 2 Oct 2026 01:26:16 +0000
Subject: [PATCH] =?UTF-8?q?=E5=AE=9D=E5=AE=9D=E6=9D=A5=E4=BF=A1=E5=8D=A1?=
 =?UTF-8?q?=E4=B8=89=E7=89=88=EF=BC=9A=E5=B7=A6=E4=BE=A7=E7=8E=AB=E7=91=B0?=
 =?UTF-8?q?=E8=89=B2=E5=B0=81=E5=8F=A3=E5=9D=97=20+=20=E6=8E=A2=E5=87=BA?=
 =?UTF-8?q?=E5=8D=A1=E6=B2=BF=E7=9A=84=E7=9F=A2=E9=87=8F=E4=BF=A1=E5=B0=81?=
 =?UTF-8?q?=20+=20=E6=9C=AA=E8=AF=BB=E6=95=B0=20+=20=E5=9C=86=E5=BD=A2?=
 =?UTF-8?q?=E7=AE=AD=E5=A4=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 index.html   |  5 +++--
 js/app.js    |  2 +-
 mama-box.css | 33 +++++++++++++++++++++++++++++++++
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 9ebb529..7688a21 100644
--- a/index.html
+++ b/index.html
@@ -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，
diff --git a/js/app.js b/js/app.js
index ea5a223..9f08963 100644
--- a/js/app.js
+++ b/js/app.js
@@ -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));
 
diff --git a/mama-box.css b/mama-box.css
index 6dc9a96..43f6e16 100644
--- a/mama-box.css
+++ b/mama-box.css
@@ -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))}