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 00:13:37 +00:00
parent 5dc647af3c
commit 18feb14b4b
3 changed files with 21 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
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:26100151 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26100152 缓存版本标记：改 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 第四节） -->

2
js/app.js
View File

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

45
mama-box.css
View File

@@ -3337,32 +3337,25 @@ a.skip:focus{left:16px;top:16px}
.hero-slogan{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
font-size:13px;font-weight:500;letter-spacing:1.2px;opacity:.95}
/* ================= 首页「宝宝来信」卡改版（2026-10-01 用户：太素）=================
航空信封：外圈一道红/蓝斜纹边（航空邮件那种），里面奶油信纸；右上一枚爱心邮戳，
信封右上角红色未读数气泡；标题用童趣手写体，「读读宝宝的话」做成小胶囊。尺寸/定位不变（249×80，见上面那笔账）。 */
.letter-card{padding:0 12px 0 11px;background:
repeating-linear-gradient(135deg,#FF7E8E 0 7px,#fff 7px 12px,#7FA8F2 12px 19px,#fff 19px 24px);
box-shadow:0 12px 28px rgba(150,60,40,.22),0 2px 6px rgba(150,60,40,.08);backdrop-filter:none;-webkit-backdrop-filter:none;z-index:6}
.letter-card::before{content:"";position:absolute;inset:3.5px;z-index:-1;border-radius:17px;
background:radial-gradient(90px 60px at 0% 100%, rgba(255,214,222,.55), rgba(255,214,222,0) 70%),linear-gradient(180deg,#FFFEFB,#FFF7F0)}
.letter-card::after{content:"";position:absolute;inset:3.5px;z-index:-1;border-radius:17px;pointer-events:none;
background:repeating-linear-gradient(180deg,transparent 0 21px,rgba(240,190,170,.22) 21px 22px);background-position:0 8px;
-webkit-mask:linear-gradient(90deg,transparent 0 76px,#000 96px);mask:linear-gradient(90deg,transparent 0 76px,#000 96px)}
.lc-env{width:60px;transform:rotate(-6deg);filter:drop-shadow(0 5px 8px rgba(200,90,70,.25))}
/* ================= 首页「宝宝来信」卡（2026-10-02 二版）=================
用户：一版的航空斜纹边 + 邮戳 + 信纸横线太乱、和整页不协调。
二版收敛：白色磨砂卡 + 一圈很淡的粉边，左边信封落在一团浅粉圆底上（未读数气泡挂信封角），
标题用页面统一的黑体，只留一处品牌色：右侧「读读…›」。 */
.letter-card{padding:0 12px 0 10px;gap:10px;
background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,248,246,.97));
box-shadow:0 10px 26px rgba(150,60,40,.15),inset 0 0 0 1px rgba(255,205,200,.55)}
.lc-envwrap{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
background:radial-gradient(circle at 50% 45%,#FFE9EC 0,#FFE1E4 60%,#FFD6DB 100%)}
.lc-env{width:46px;filter:drop-shadow(0 3px 5px rgba(200,90,90,.2))}
.letter-card.has-new .lc-env{animation:lcFloat 3.2s ease-in-out infinite}
@keyframes lcFloat{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-3px)}}
@keyframes lcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.letter-card.has-new .lc-envwrap::after{display:none}
.lc-num{position:absolute;top:-2px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
font-size:11px;font-weight:900;line-height:19px;text-align:center;color:#fff;font-style:normal;
background:linear-gradient(135deg,#FF5B6E,#E8344E);box-shadow:0 0 0 2px #fff,0 3px 6px rgba(232,52,78,.35);animation:newPulse 1.6s var(--ease) infinite}
.lc-num{position:absolute;top:-2px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
font-size:10.5px;font-weight:800;line-height:18px;text-align:center;color:#fff;font-style:normal;
background:#F4593C;box-shadow:0 0 0 2px #fff}
.lc-num:empty{display:none}
.lc-title{font-family:var(--font-kid);font-size:17px;font-weight:800;color:#C2364E;text-shadow:none;letter-spacing:.3px}
.lc-desc{font-size:11px;color:#8A6A5E;margin:3px 0 5px}
.lc-link{display:inline-flex;width:auto;max-width:100%;padding:2px 9px 2px 10px;border-radius:99px;font-size:11.5px;
color:#fff;background:linear-gradient(135deg,#FF7A8A,#E8344E);box-shadow:0 3px 8px rgba(232,52,78,.25)}
.lc-stamp{position:absolute;right:9px;top:9px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
border:1.5px dashed rgba(194,54,78,.55);transform:rotate(14deg);color:#E8344E;font-size:11px;opacity:.85}
.lc-stamp i{font-style:normal;line-height:1}
.lc-body{padding-right:22px}
@media (prefers-reduced-motion:reduce){.letter-card.has-new .lc-env,.lc-num{animation:none}}
.lc-num{right:auto;left:-4px;top:-4px}
.lc-stamp{display:none}
.lc-title{font-size:15.5px;font-weight:800;color:var(--ink);text-shadow:none}
.lc-desc{font-size:11.5px;color:#8A7A72;margin:3px 0 4px}
.lc-link{font-size:12px;color:var(--brand)}
@media (prefers-reduced-motion:reduce){.letter-card.has-new .lc-env{animation:none}}