feat(fe): 整站改品牌暖橘竖向淡出渐变,取代独立色块
- page 背景换成顶部品牌橘 → 约半屏褪到米白的竖向淡出,铺全部页面, 没有色块接缝问题,整屏更一体 - nav-bar 默认改透明 + 深棕字(顶部本身就暖,不再铺奶白毛玻璃); 去掉 Step4 的 tone 属性和独立 .brand-band - 带切换条的页面(首页/报告/历史/计划)统一 on-band:chip 半透明白、 选中实白,在暖底上更清晰 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
+9
-13
@@ -84,11 +84,15 @@ page{
|
||||
color:var(--text);
|
||||
font-weight:var(--fw);
|
||||
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif;
|
||||
/* 整页暖橘竖向淡出:顶部品牌橘暖调 → 约半屏处褪到米白。
|
||||
渐变铺在 page 上(不滚),内容在 .page-scroll 里滚过它,顶部常暖。 */
|
||||
background:
|
||||
radial-gradient(circle at 10% 8%, rgba(245,169,71,.26), transparent 30%),
|
||||
radial-gradient(circle at 88% 10%, rgba(115,190,157,.20), transparent 26%),
|
||||
radial-gradient(circle at 72% 88%, rgba(120,166,232,.14), transparent 28%),
|
||||
linear-gradient(135deg,#FBF5EA,#EEF6F1 55%,#F8F1E7);
|
||||
linear-gradient(180deg,
|
||||
#FFC66E 0%,
|
||||
#FFD489 10%,
|
||||
#FCE6C4 28%,
|
||||
var(--bg) 48%,
|
||||
var(--bg) 100%);
|
||||
|
||||
/* 页面自身不滚,滚动交给 .page-scroll,这样 nav-bar 和 tabBar 才能固定住。
|
||||
这 4 行原本在 9 个页面的 wxss 里逐字重复。 */
|
||||
@@ -378,15 +382,7 @@ page{scrollbar-width:none;-ms-overflow-style:none}
|
||||
.top-bar .pet-switch{padding-bottom:var(--sp-2)}
|
||||
.top-bar .st-pill{padding-bottom:var(--sp-2)}
|
||||
|
||||
/* 门面品牌色带(方案 A):绝对定位在页面最上层背后,盖住 nav + 切换条,
|
||||
下沿大圆角。放在 .page-scroll 外面,所以不跟着滚。z-index 低于 nav(100) */
|
||||
.brand-band{
|
||||
/* z-index:-1 垫在所有内容背后、页面背景之上。用 0 的话定位元素会盖住切换条 */
|
||||
position:absolute;left:0;right:0;top:0;height:252rpx;z-index:-1;
|
||||
background:linear-gradient(160deg,var(--band-a),var(--band-b));
|
||||
border-radius:0 0 40rpx 40rpx;
|
||||
}
|
||||
/* 切换条压在色带上:chip 改成半透明白 + 深棕字,选中的实白 */
|
||||
/* 切换条压在暖色顶部:chip 改成半透明白 + 深棕字,选中的实白 */
|
||||
.top-bar.on-band .pet-chip{
|
||||
background:rgba(255,255,255,.42);border-color:transparent;color:var(--band-ink);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user