diff --git a/pets-fe/app.wxss b/pets-fe/app.wxss index 1f7307a..53dd91d 100644 --- a/pets-fe/app.wxss +++ b/pets-fe/app.wxss @@ -21,6 +21,10 @@ page{ --primary-soft:#FFF4E4; /* 唯一的浅橙底(收编了 9 种近似值) */ --primary-line:#FFD6A1; /* 浅橙块的描边 */ --primary-ink:#A96500; /* 浅橙底上的文字 */ + /* 门面品牌色带(首页/记录页顶部,方案 A)*/ + --band-a:#FFC768; + --band-b:#F5A947; + --band-ink:#7A4A08; /* 色带上的深棕文字 */ /* ── 语义色:soft 底 / base 主体 / ink 文字,三件套配齐 ── */ --green:#73BE9D; --green-soft:#EAF7F1; --green-ink:#2E7D5B; @@ -92,6 +96,7 @@ page{ overflow:hidden; display:flex; flex-direction:column; + position:relative; /* 门面色带 .brand-band 绝对定位锚在页面上 */ } view,text{box-sizing:border-box} @@ -373,6 +378,21 @@ 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 改成半透明白 + 深棕字,选中的实白 */ +.top-bar.on-band .pet-chip{ + background:rgba(255,255,255,.42);border-color:transparent;color:var(--band-ink); +} +.top-bar.on-band .pet-chip.active{background:#fff;color:var(--text);border-color:transparent} +.top-bar.on-band .pet-chip-add{color:rgba(122,74,8,.75)} + /* 帖子卡。社区和用户主页都要用,页面级 wxss 不跨页生效,所以放全局 */ .post-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sd-1);padding:var(--sp-4);margin-bottom:var(--sp-4)} .post-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)} diff --git a/pets-fe/components/nav-bar/nav-bar.js b/pets-fe/components/nav-bar/nav-bar.js index 54a8f6c..c950f34 100644 --- a/pets-fe/components/nav-bar/nav-bar.js +++ b/pets-fe/components/nav-bar/nav-bar.js @@ -4,7 +4,10 @@ Component({ options: { addGlobalClass: true }, properties: { title: { type: String, value: '肉垫计划' }, - showBack: { type: Boolean, value: false } + showBack: { type: Boolean, value: false }, + // tone="brand":透明底 + 深棕字,压在品牌色带上(首页/记录页)。 + // 默认空 = 原来的奶白毛玻璃,另外 7 个页面都靠它,别动默认分支 + tone: { type: String, value: '' } }, data: { statusBarHeight: 20, diff --git a/pets-fe/components/nav-bar/nav-bar.wxml b/pets-fe/components/nav-bar/nav-bar.wxml index 230b1ca..97805cb 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 b6fc5ec..b376d59 100644 --- a/pets-fe/components/nav-bar/nav-bar.wxss +++ b/pets-fe/components/nav-bar/nav-bar.wxss @@ -31,3 +31,13 @@ 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)} diff --git a/pets-fe/pages/home/home.wxml b/pets-fe/pages/home/home.wxml index 078bad3..0636b68 100644 --- a/pets-fe/pages/home/home.wxml +++ b/pets-fe/pages/home/home.wxml @@ -1,6 +1,8 @@ - + + + - + diff --git a/pets-fe/pages/record/record.wxml b/pets-fe/pages/record/record.wxml index 3510b50..e830071 100644 --- a/pets-fe/pages/record/record.wxml +++ b/pets-fe/pages/record/record.wxml @@ -1,4 +1,6 @@ - + + +