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);
|
color:var(--text);
|
||||||
font-weight:var(--fw);
|
font-weight:var(--fw);
|
||||||
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif;
|
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif;
|
||||||
|
/* 整页暖橘竖向淡出:顶部品牌橘暖调 → 约半屏处褪到米白。
|
||||||
|
渐变铺在 page 上(不滚),内容在 .page-scroll 里滚过它,顶部常暖。 */
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at 10% 8%, rgba(245,169,71,.26), transparent 30%),
|
linear-gradient(180deg,
|
||||||
radial-gradient(circle at 88% 10%, rgba(115,190,157,.20), transparent 26%),
|
#FFC66E 0%,
|
||||||
radial-gradient(circle at 72% 88%, rgba(120,166,232,.14), transparent 28%),
|
#FFD489 10%,
|
||||||
linear-gradient(135deg,#FBF5EA,#EEF6F1 55%,#F8F1E7);
|
#FCE6C4 28%,
|
||||||
|
var(--bg) 48%,
|
||||||
|
var(--bg) 100%);
|
||||||
|
|
||||||
/* 页面自身不滚,滚动交给 .page-scroll,这样 nav-bar 和 tabBar 才能固定住。
|
/* 页面自身不滚,滚动交给 .page-scroll,这样 nav-bar 和 tabBar 才能固定住。
|
||||||
这 4 行原本在 9 个页面的 wxss 里逐字重复。 */
|
这 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 .pet-switch{padding-bottom:var(--sp-2)}
|
||||||
.top-bar .st-pill{padding-bottom:var(--sp-2)}
|
.top-bar .st-pill{padding-bottom:var(--sp-2)}
|
||||||
|
|
||||||
/* 门面品牌色带(方案 A):绝对定位在页面最上层背后,盖住 nav + 切换条,
|
/* 切换条压在暖色顶部:chip 改成半透明白 + 深棕字,选中的实白 */
|
||||||
下沿大圆角。放在 .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 改成半透明白 + 深棕字,选中的实白 */
|
|
||||||
.top-bar.on-band .pet-chip{
|
.top-bar.on-band .pet-chip{
|
||||||
background:rgba(255,255,255,.42);border-color:transparent;color:var(--band-ink);
|
background:rgba(255,255,255,.42);border-color:transparent;color:var(--band-ink);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,10 +4,7 @@ Component({
|
|||||||
options: { addGlobalClass: true },
|
options: { addGlobalClass: true },
|
||||||
properties: {
|
properties: {
|
||||||
title: { type: String, value: '肉垫计划' },
|
title: { type: String, value: '肉垫计划' },
|
||||||
showBack: { type: Boolean, value: false },
|
showBack: { type: Boolean, value: false }
|
||||||
// tone="brand":透明底 + 深棕字,压在品牌色带上(首页/记录页)。
|
|
||||||
// 默认空 = 原来的奶白毛玻璃,另外 7 个页面都靠它,别动默认分支
|
|
||||||
tone: { type: String, value: '' }
|
|
||||||
},
|
},
|
||||||
data: {
|
data: {
|
||||||
statusBarHeight: 20,
|
statusBarHeight: 20,
|
||||||
|
|||||||
@@ -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 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 wx:if="{{showBack}}" class="nav-back" bindtap="onBack"><pt-icon name="back" size="{{40}}"></pt-icon></view>
|
||||||
<view class="nav-title">{{title}}</view>
|
<view class="nav-title">{{title}}</view>
|
||||||
|
|||||||
@@ -1,24 +1,17 @@
|
|||||||
:host{display:block}
|
:host{display:block}
|
||||||
|
|
||||||
/* 原来是一整条半透明色块,底边和页面渐变硬碰硬,屏幕上横着一道接缝。
|
/* 整页暖橘渐变后,顶部本身就是暖色,nav 不再铺奶白/毛玻璃,透明即可,
|
||||||
改成上实下虚的渐变,并且用同一条 mask 把毛玻璃也一起淡出——
|
文字用深棕压在暖底上。内容在 .page-scroll 里滚,不会跑到 nav 背后,
|
||||||
只淡化背景色而不淡化 blur 的话,接缝会从「色差」变成「糊边」,一样难看。 */
|
所以不需要毛玻璃遮挡。 */
|
||||||
.nav-wrap{
|
.nav-wrap{
|
||||||
position:fixed;top:0;left:0;right:0;z-index:100;
|
position:fixed;top:0;left:0;right:0;z-index:100;
|
||||||
background:linear-gradient(180deg,
|
background:none;
|
||||||
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%);
|
|
||||||
}
|
}
|
||||||
.nav-inner{
|
.nav-inner{
|
||||||
position:relative;display:flex;align-items:center;justify-content:center;
|
position:relative;display:flex;align-items:center;justify-content:center;
|
||||||
}
|
}
|
||||||
.nav-title{
|
.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;
|
letter-spacing:.5rpx;
|
||||||
max-width:56%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
|
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%);
|
position:absolute;left:var(--sp-3);top:50%;transform:translateY(-50%);
|
||||||
width:60rpx;height:60rpx;border-radius:50%;
|
width:60rpx;height:60rpx;border-radius:50%;
|
||||||
display:flex;align-items:center;justify-content:center;
|
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);
|
box-shadow:0 4rpx 12rpx rgba(70,48,25,.06);
|
||||||
}
|
}
|
||||||
.nav-back:active{background:rgba(255,255,255,.95)}
|
.nav-back:active{background:rgba(255,255,255,.92)}
|
||||||
|
|
||||||
/* 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)}
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<nav-bar title="全部记录" show-back="{{true}}"></nav-bar>
|
<nav-bar title="全部记录" show-back="{{true}}"></nav-bar>
|
||||||
|
|
||||||
<view class="top-bar"><pet-switch bind:add="onAddPet"></pet-switch></view>
|
<view class="top-bar on-band"><pet-switch bind:add="onAddPet"></pet-switch></view>
|
||||||
|
|
||||||
<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
|
<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
|
||||||
<view class="page-body no-fab">
|
<view class="page-body no-fab">
|
||||||
|
|||||||
@@ -1,6 +1,4 @@
|
|||||||
<!-- 门面品牌色带(方案 A):盖住 nav + 切换条,门面卡压在接缝上 -->
|
<nav-bar title="肉垫计划"></nav-bar>
|
||||||
<view class="brand-band"></view>
|
|
||||||
<nav-bar title="肉垫计划" tone="brand"></nav-bar>
|
|
||||||
|
|
||||||
<view class="top-bar on-band"><pet-switch bind:add="onAddPet"></pet-switch></view>
|
<view class="top-bar on-band"><pet-switch bind:add="onAddPet"></pet-switch></view>
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<nav-bar title="养宠计划" show-back="{{true}}"></nav-bar>
|
<nav-bar title="养宠计划" show-back="{{true}}"></nav-bar>
|
||||||
|
|
||||||
<view class="top-bar"><pet-switch show-add="{{false}}"></pet-switch></view>
|
<view class="top-bar on-band"><pet-switch show-add="{{false}}"></pet-switch></view>
|
||||||
|
|
||||||
<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
|
<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
|
||||||
<view class="page-body">
|
<view class="page-body">
|
||||||
|
|||||||
@@ -1,6 +1,4 @@
|
|||||||
<!-- 门面品牌色带(方案 A):记录页头部同款 -->
|
<nav-bar title="记录" show-back="{{true}}"></nav-bar>
|
||||||
<view class="brand-band"></view>
|
|
||||||
<nav-bar title="记录" show-back="{{true}}" tone="brand"></nav-bar>
|
|
||||||
|
|
||||||
<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
|
<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
|
||||||
<view class="page-body no-fab">
|
<view class="page-body no-fab">
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<nav-bar title="成长报告"></nav-bar>
|
<nav-bar title="成长报告"></nav-bar>
|
||||||
|
|
||||||
<view class="top-bar"><pet-switch show-add="{{false}}"></pet-switch></view>
|
<view class="top-bar on-band"><pet-switch show-add="{{false}}"></pet-switch></view>
|
||||||
|
|
||||||
<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
|
<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
|
||||||
<view class="page-body tab-nofab">
|
<view class="page-body tab-nofab">
|
||||||
|
|||||||
Reference in New Issue
Block a user