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:
Blizzard
2026-07-31 13:59:05 +08:00
parent bbc34c5bd6
commit b52729dec8
9 changed files with 23 additions and 51 deletions
+1 -4
View File
@@ -4,10 +4,7 @@ Component({
options: { addGlobalClass: true },
properties: {
title: { type: String, value: '肉垫计划' },
showBack: { type: Boolean, value: false },
// tone="brand":透明底 + 深棕字,压在品牌色带上(首页/记录页)。
// 默认空 = 原来的奶白毛玻璃,另外 7 个页面都靠它,别动默认分支
tone: { type: String, value: '' }
showBack: { type: Boolean, value: false }
},
data: {
statusBarHeight: 20,
+1 -1
View File
@@ -1,4 +1,4 @@
<view class="nav-wrap {{tone === 'brand' ? 'tone-brand' : ''}}" style="padding-top:{{statusBarHeight}}px;height:{{statusBarHeight + navBarHeight}}px;">
<view class="nav-wrap" style="padding-top:{{statusBarHeight}}px;height:{{statusBarHeight + navBarHeight}}px;">
<view class="nav-inner" style="height:{{navBarHeight}}px;">
<view wx:if="{{showBack}}" class="nav-back" bindtap="onBack"><pt-icon name="back" size="{{40}}"></pt-icon></view>
<view class="nav-title">{{title}}</view>
+7 -24
View File
@@ -1,24 +1,17 @@
:host{display:block}
/* 原来是一整条半透明色块,底边和页面渐变硬碰硬,屏幕上横着一道接缝。
改成上实下虚的渐变,并且用同一条 mask 把毛玻璃也一起淡出——
只淡化背景色而不淡化 blur 的话,接缝会从「色差」变成「糊边」,一样难看。 */
/* 整页暖橘渐变后,顶部本身就是暖色,nav 不再铺奶白/毛玻璃,透明即可,
文字用深棕压在暖底上。内容在 .page-scroll 里滚,不会跑到 nav 背后,
所以不需要毛玻璃遮挡。 */
.nav-wrap{
position:fixed;top:0;left:0;right:0;z-index:100;
background:linear-gradient(180deg,
rgba(250,247,242,.94) 0%,
rgba(250,247,242,.88) 58%,
rgba(250,247,242,0) 100%);
backdrop-filter:blur(20rpx);
-webkit-backdrop-filter:blur(20rpx);
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
background:none;
}
.nav-inner{
position:relative;display:flex;align-items:center;justify-content:center;
}
.nav-title{
font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text);
font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--band-ink);
letter-spacing:.5rpx;
max-width:56%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@@ -27,17 +20,7 @@
position:absolute;left:var(--sp-3);top:50%;transform:translateY(-50%);
width:60rpx;height:60rpx;border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:var(--text);background:rgba(255,255,255,.72);
color:var(--band-ink);background:rgba(255,255,255,.6);
box-shadow:0 4rpx 12rpx rgba(70,48,25,.06);
}
.nav-back:active{background:rgba(255,255,255,.95)}
/* tone="brand":色带自己是实色,nav 不再铺奶白/毛玻璃/mask,文字换深棕。
只作用在带 tone-brand 的实例,默认分支纹丝不动 */
.nav-wrap.tone-brand{
background:none;
backdrop-filter:none;-webkit-backdrop-filter:none;
-webkit-mask-image:none;mask-image:none;
}
.nav-wrap.tone-brand .nav-title{color:var(--band-ink)}
.nav-wrap.tone-brand .nav-back{color:var(--band-ink);background:rgba(255,255,255,.5)}
.nav-back:active{background:rgba(255,255,255,.92)}