diff --git a/pets-fe/app.wxss b/pets-fe/app.wxss index 53dd91d..0415502 100644 --- a/pets-fe/app.wxss +++ b/pets-fe/app.wxss @@ -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); } diff --git a/pets-fe/components/nav-bar/nav-bar.js b/pets-fe/components/nav-bar/nav-bar.js index c950f34..54a8f6c 100644 --- a/pets-fe/components/nav-bar/nav-bar.js +++ b/pets-fe/components/nav-bar/nav-bar.js @@ -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, diff --git a/pets-fe/components/nav-bar/nav-bar.wxml b/pets-fe/components/nav-bar/nav-bar.wxml index 97805cb..230b1ca 100644 --- a/pets-fe/components/nav-bar/nav-bar.wxml +++ b/pets-fe/components/nav-bar/nav-bar.wxml @@ -1,4 +1,4 @@ - + {{title}} diff --git a/pets-fe/components/nav-bar/nav-bar.wxss b/pets-fe/components/nav-bar/nav-bar.wxss index b376d59..ca96ab0 100644 --- a/pets-fe/components/nav-bar/nav-bar.wxss +++ b/pets-fe/components/nav-bar/nav-bar.wxss @@ -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)} diff --git a/pets-fe/pages/history/history.wxml b/pets-fe/pages/history/history.wxml index d0db908..473f1bf 100644 --- a/pets-fe/pages/history/history.wxml +++ b/pets-fe/pages/history/history.wxml @@ -1,6 +1,6 @@ - + diff --git a/pets-fe/pages/home/home.wxml b/pets-fe/pages/home/home.wxml index 0636b68..87e37a2 100644 --- a/pets-fe/pages/home/home.wxml +++ b/pets-fe/pages/home/home.wxml @@ -1,6 +1,4 @@ - - - + diff --git a/pets-fe/pages/plan/plan.wxml b/pets-fe/pages/plan/plan.wxml index 30393e3..530b6c8 100644 --- a/pets-fe/pages/plan/plan.wxml +++ b/pets-fe/pages/plan/plan.wxml @@ -1,6 +1,6 @@ - + diff --git a/pets-fe/pages/record/record.wxml b/pets-fe/pages/record/record.wxml index e830071..3510b50 100644 --- a/pets-fe/pages/record/record.wxml +++ b/pets-fe/pages/record/record.wxml @@ -1,6 +1,4 @@ - - - + diff --git a/pets-fe/pages/report/report.wxml b/pets-fe/pages/report/report.wxml index f897697..2e5239c 100644 --- a/pets-fe/pages/report/report.wxml +++ b/pets-fe/pages/report/report.wxml @@ -1,6 +1,6 @@ - +