feat(首页头图): 去掉孕肚、宝宝缩小、左侧提亮,四周改散景光点 (v26093003)
- 孕肚弧线太写实(用户反馈有巨物感),只从原图抠出羊水囊 + 宝宝,缩到约 8 成放在右侧。 - 底子按原图色调重铺紫玫瑰渐变,比上一版亮;囊后一圈柔和暖光晕保留包裹感,周围散景光点。 - 左侧压字渐变从 .5 降到 .22,明显变浅。 - 嘴边气泡锚点按新图重新定位(右 0.408H、顶 0.491H)。 - 新图 assets/img/ab3c7e20811a.jpg(1560×750,59KB),替换上一版预览图 4cd9891cec31.jpg。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB |
BIN
assets/img/ab3c7e20811a.jpg
Normal file
BIN
assets/img/ab3c7e20811a.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
@@ -7,7 +7,7 @@
|
|||||||
<meta name="mobile-web-app-capable" content="yes">
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<title>兜爸心选 · 孕育陪伴</title>
|
<title>兜爸心选 · 孕育陪伴</title>
|
||||||
<!-- V:26093002 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
<!-- V:26093003 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||||
<link rel="stylesheet" href="mama-box.css">
|
<link rel="stylesheet" href="mama-box.css">
|
||||||
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
||||||
<!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) -->
|
<!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) -->
|
||||||
@@ -59,7 +59,7 @@
|
|||||||
<section class="screen is-active" id="screen-home" data-screen="home">
|
<section class="screen is-active" id="screen-home" data-screen="home">
|
||||||
<div class="home-hero">
|
<div class="home-hero">
|
||||||
<div class="petals" id="petals"></div>
|
<div class="petals" id="petals"></div>
|
||||||
<!-- 2026-09-30:宝宝不再是右上角一张圆形 PNG,整张孕 25 周图(孕肚弧线 + 羊水囊)
|
<!-- 2026-09-30:宝宝不再是右上角一张圆形 PNG,孕 25 周图(羊水囊 + 宝宝,四周散景光点)
|
||||||
铺成橙区背景,见 style.css 的 .home-hero。这里只剩嘴边冒的气泡,
|
铺成橙区背景,见 style.css 的 .home-hero。这里只剩嘴边冒的气泡,
|
||||||
.hero-baby 是钉在图里嘴位置的一个零尺寸锚点。 -->
|
.hero-baby 是钉在图里嘴位置的一个零尺寸锚点。 -->
|
||||||
<div class="hero-baby" aria-hidden="true">
|
<div class="hero-baby" aria-hidden="true">
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
|
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
|
||||||
var VER = '26093002';
|
var VER = '26093003';
|
||||||
const $ = (s, c) => (c || document).querySelector(s);
|
const $ = (s, c) => (c || document).querySelector(s);
|
||||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||||
|
|
||||||
|
|||||||
19
mama-box.css
19
mama-box.css
@@ -191,17 +191,18 @@ a.skip:focus{left:16px;top:16px}
|
|||||||
hero 橙色区底缘:中部 ≈y420(210) 两侧 ≈y340(170) → 椭圆下沿 44px
|
hero 橙色区底缘:中部 ≈y420(210) 两侧 ≈y340(170) → 椭圆下沿 44px
|
||||||
⚠️ 上面这些是**设计稿**的数,不是现在的实现值。设计稿里没有 slogan,
|
⚠️ 上面这些是**设计稿**的数,不是现在的实现值。设计稿里没有 slogan,
|
||||||
加进去之后品牌字以下整列都下移了,实际纵向排布以 .home-hero 里那笔账为准。 */
|
加进去之后品牌字以下整列都下移了,实际纵向排布以 .home-hero 里那笔账为准。 */
|
||||||
/* 2026-09-30 背景换成孕 25 周图(assets/img/4cd9891cec31.jpg,1560×750 = 3 倍图 520×250):
|
/* 2026-09-30 背景换成孕 25 周图(assets/img/ab3c7e20811a.jpg,1560×750 = 3 倍图 520×250):
|
||||||
宝宝和孕肚弧线靠右(为给左侧文字让位,原图羊水囊右侧裁掉一截),左侧是按原图左缘色调横向补出来的暗粉紫,
|
只抠了原图里的羊水囊 + 宝宝(孕肚太写实,用户要求去掉),缩到原来约 8 成放在右侧,
|
||||||
所以图高钉死 = 橙区高、右对齐,屏宽 ≤520 都铺得满;再宽就露底色 #25141f(=图左缘中段色)。
|
底子是按原图色调重铺的紫玫瑰渐变 + 囊后一圈暖光晕 + 散景光点。
|
||||||
上面叠一层左深右透的渐变,只为压住孕肚弧线那道亮光,让左边白字(孕周环、天数卡)读得清。
|
图高钉死 = 橙区高、右对齐,屏宽 ≤520 都铺得满;再宽就露底色 #5c344e(=图左缘色)。
|
||||||
|
上面叠一层很淡的左深右透渐变,只为让左边白字(孕周环、天数卡)再稳一点。
|
||||||
形状(高度、底部椭圆弧)不变。 */
|
形状(高度、底部椭圆弧)不变。 */
|
||||||
.home-hero{
|
.home-hero{
|
||||||
position:relative;color:#fff;overflow:hidden;
|
position:relative;color:#fff;overflow:hidden;
|
||||||
background:
|
background:
|
||||||
linear-gradient(90deg,rgba(24,9,16,.5) 0%,rgba(24,9,16,.22) 38%,rgba(24,9,16,0) 58%),
|
linear-gradient(90deg,rgba(40,14,28,.22) 0%,rgba(40,14,28,.08) 38%,rgba(40,14,28,0) 58%),
|
||||||
url(assets/img/4cd9891cec31.jpg) right center/auto 100% no-repeat,
|
url(assets/img/ab3c7e20811a.jpg) right center/auto 100% no-repeat,
|
||||||
#25141f;
|
#5c344e;
|
||||||
padding:env(safe-area-inset-top) 15px 0 16px;
|
padding:env(safe-area-inset-top) 15px 0 16px;
|
||||||
/* 设计稿橙区 210px。但设计稿里气泡下缘是被白卡盖住的,
|
/* 设计稿橙区 210px。但设计稿里气泡下缘是被白卡盖住的,
|
||||||
现在气泡补全成整圆(高 189.5),橙区必须够高才不会被 overflow:hidden 切掉。
|
现在气泡补全成整圆(高 189.5),橙区必须够高才不会被 overflow:hidden 切掉。
|
||||||
@@ -292,10 +293,10 @@ a.skip:focus{left:16px;top:16px}
|
|||||||
/* 定位和浮动都挂在外壳上,img 只负责铺满 —— 这样嘴边的泡泡是
|
/* 定位和浮动都挂在外壳上,img 只负责铺满 —— 这样嘴边的泡泡是
|
||||||
相对气泡本身定位的,会跟着整幅画一起上下浮,而不是自己飘在原地 */
|
相对气泡本身定位的,会跟着整幅画一起上下浮,而不是自己飘在原地 */
|
||||||
/* 2026-09-30 起宝宝是橙区背景图的一部分,这里只剩一个零尺寸锚点,钉在图里宝宝嘴(拳头)边:
|
/* 2026-09-30 起宝宝是橙区背景图的一部分,这里只剩一个零尺寸锚点,钉在图里宝宝嘴(拳头)边:
|
||||||
背景图右对齐、高 = 橙区高 H,嘴在图上距右边 0.372H、距顶 0.5H(按 1560×750 原图量的),
|
背景图右对齐、高 = 橙区高 H,嘴在图上距右边 0.408H、距顶 0.491H(按 1560×750 原图量的),
|
||||||
所以 right 要按 H 算,不能写百分比(百分比是按宽算的)。
|
所以 right 要按 H 算,不能写百分比(百分比是按宽算的)。
|
||||||
背景不浮动了,气泡也就不再跟着整体上下浮。 */
|
背景不浮动了,气泡也就不再跟着整体上下浮。 */
|
||||||
.hero-baby{position:absolute;z-index:2;top:50%;right:calc((250px + env(safe-area-inset-top)) * .372);
|
.hero-baby{position:absolute;z-index:2;top:49.1%;right:calc((250px + env(safe-area-inset-top)) * .408);
|
||||||
width:0;height:0;pointer-events:none;user-select:none}
|
width:0;height:0;pointer-events:none;user-select:none}
|
||||||
/* 嘴边的小气泡。起点定在图里嘴的位置(约 46%/52%),往左上飘 ——
|
/* 嘴边的小气泡。起点定在图里嘴的位置(约 46%/52%),往左上飘 ——
|
||||||
宝宝头朝右上侧躺,左上正好是「水面」方向。
|
宝宝头朝右上侧躺,左上正好是「水面」方向。
|
||||||
|
|||||||
Reference in New Issue
Block a user