style(首页): 头图与第一块卡片衔接——无来信时工具卡压进头图 (v26100414)
- 无来信:头图 250→262、平底,背景图高度钉在 250,多出部分用底边色补;工具卡 margin-top -26 压上去,两个圆角落在橙色里 - 有来信:头图保持原 250 + 弧底(app.js 同步给 .home-hero 切 .no-letter) - #homeBody z-index:1 防头图子元素盖卡;彩色光斑下错 26px 不洗白头图 - 工具卡顶部向上淡投影、顶部更实的白、光晕减半;水印下移 10px Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -7,7 +7,7 @@
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>兜爸心选 · 孕育陪伴</title>
|
||||
<!-- V:26100413 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<!-- V:26100414 缓存版本标记:改 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 第四节) -->
|
||||
@@ -59,7 +59,7 @@
|
||||
<main class="screens" id="screens">
|
||||
|
||||
<section class="screen is-active" id="screen-home" data-screen="home">
|
||||
<div class="home-hero">
|
||||
<div class="home-hero no-letter">
|
||||
<!-- 2026-10-04 头图改版(用户:宝宝按孕周换形态、孕囊跟着宝宝大小变、去掉飘落的花瓣、加阳光和水波纹):
|
||||
背景换成「去掉羊水囊的空背景」,羊水囊 + 宝宝整体都在 .hero-baby 里,按孕周 9 个阶段换图(js/hero-fx.js)。
|
||||
每阶段一张会动的 GIF(本地程序化形变:呼吸、轻浮、小手、蹬脚;脸不动,所以永远闭眼闭嘴)+ 一张同帧静图打底,
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
|
||||
var VER = '26100413';
|
||||
var VER = '26100414';
|
||||
const $ = (s, c) => (c || document).querySelector(s);
|
||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||
|
||||
@@ -738,6 +738,8 @@
|
||||
const card = $('#homeLetter'), body = $('#homeBody');
|
||||
if (card) { card.classList.add('hide'); card.classList.remove('has-new'); }
|
||||
if (body) body.classList.add('no-letter');
|
||||
// 头图跟着切:无来信 → 平底让工具卡压上来;有来信 → 回到弧底(见 mama-box.css「头图 ↔ 第一块卡片的衔接」)
|
||||
const hero = $('.home-hero'); if (hero) hero.classList.add('no-letter');
|
||||
}
|
||||
|
||||
/* 来信提示(首页卡 + 底 tab 红点)的**唯一渲染入口**。
|
||||
@@ -780,6 +782,7 @@
|
||||
card.classList.add('has-new');
|
||||
card.classList.remove('hide');
|
||||
if (body) body.classList.remove('no-letter');
|
||||
const hero = $('.home-hero'); if (hero) hero.classList.remove('no-letter');
|
||||
if (badge) badge.classList.add('show');
|
||||
}
|
||||
/* 2026-10-02 底部导航:「宝宝来信」tab 的信封在有红点时轻轻晃(CSS .has-new)。
|
||||
|
||||
32
mama-box.css
32
mama-box.css
@@ -4439,3 +4439,35 @@ a.skip:focus{left:16px;top:16px}
|
||||
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
|
||||
#screen-me .preg-card,#screen-me .mall-strip,#screen-me .svc-grid,#screen-me .me-logout,#screen-me .list-card{background:rgba(255,255,255,.82)}
|
||||
}
|
||||
|
||||
/* ============ 2026-10-04 头图 ↔ 第一块卡片的衔接 ============
|
||||
问题:衔接原本全靠「宝宝来信」卡的 margin-top:-16 压进头图;来信卡一收起来(大多数用户),
|
||||
工具卡就改成往下空 30px,头图大弧底和平顶卡片之间露出一条米色缝,两块各管各的。
|
||||
改法:不管谁是第一块,都压进头图。
|
||||
· 头图 250 → 262,底边改平(弧线整个藏在卡片下面,不再有两套形状对拼)。
|
||||
背景图高度钉死在 250,宝宝/孕囊/文字的竖向账一律不动;多出的 12px 用图底边的颜色补。
|
||||
· 无来信时第一块 margin-top:-26(= 卡片圆角),卡顶 236:
|
||||
天数卡底 218 → 留 18;孕囊下缘 229.5 → 留 6.5;卡片两个圆角 236~262 全落在橙色里。
|
||||
· 有来信时头图回到原来的 250 + 弧底(app.js 给 .home-hero 同步切 .no-letter),来信卡仍 -16,跟以前一模一样。
|
||||
· #homeBody 建层叠上下文(z-index:1),否则头图里 z-index:2/3 的子元素会盖到卡片上面。
|
||||
· #homeBody 的彩色光斑往下错 26px 不平铺,免得盖到头图底上把橙色洗白。
|
||||
· 第一块卡片:顶部向上一层淡投影(浮在头图上)、顶部改成更实的白(压在橙上也是干净的白)、
|
||||
左上角主题色光晕减半;水印往下挪 10px,不再被右上圆角切掉。 */
|
||||
.home-hero.no-letter{
|
||||
height:calc(262px + env(safe-area-inset-top));
|
||||
border-radius:0;
|
||||
background:
|
||||
linear-gradient(90deg,rgba(150,55,35,.20) 0%,rgba(150,55,35,.07) 38%,rgba(150,55,35,0) 58%),
|
||||
url(assets/img/6a268e7269b7.jpg) right top/auto calc(250px + env(safe-area-inset-top)) no-repeat,
|
||||
linear-gradient(90deg,#CE8069 0%,#D8886F 30%,#DB9073 100%);
|
||||
}
|
||||
#homeBody{z-index:1;background-position:0 26px;background-repeat:no-repeat}
|
||||
.home-body.no-letter>:first-child,
|
||||
.home-body.no-letter>.bb-banner.hide+.tool-dock{margin-top:-26px}
|
||||
#homeBody.no-letter>section.tool-dock{
|
||||
background:
|
||||
linear-gradient(90deg,rgba(var(--gt),.28),rgba(var(--gt),0) 60%) top/100% 2px no-repeat,
|
||||
radial-gradient(240px 110px at 0 0,rgba(var(--gt),.10),rgba(var(--gt),0) 72%),
|
||||
linear-gradient(180deg,rgba(255,255,255,.95) 0,rgba(255,255,255,.7) 70px,rgba(255,255,255,.5) 160px)!important;
|
||||
box-shadow:0 -6px 18px rgba(150,60,40,.10),0 12px 30px rgba(190,110,80,.10),0 2px 6px rgba(190,110,80,.04),inset 0 1px 0 #fff!important}
|
||||
.tool-dock .wm{top:10px}
|
||||
|
||||
Reference in New Issue
Block a user