From b99099759f04c96f10f76da4095fcd79d315864d Mon Sep 17 00:00:00 2001 From: Blizzard Date: Wed, 29 Jul 2026 10:28:48 +0800 Subject: [PATCH] =?UTF-8?q?refactor(fe):=20=E7=BB=93=E6=9E=84=E5=8E=BB?= =?UTF-8?q?=E9=87=8D=20+=20=E4=BF=AE=20FAB=20=E9=81=AE=E6=8C=A1=E5=86=85?= =?UTF-8?q?=E5=AE=B9=EF=BC=88=E8=A7=86=E8=A7=89=E7=AD=89=E4=BB=B7=EF=BC=8C?= =?UTF-8?q?=E4=B8=8D=E5=90=AB=E8=AE=BE=E8=AE=A1=E8=B0=83=E6=95=B4=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit app.wxss 是从 preview.html 迁移来的，带来一批小程序里根本不生效的 标签选择器（wxml 没有 h2/p/b/span）：.page-title h2、.task-text b、 .stat b、.article-card p、.record-row span、.poster h3。各页当初都 自建了替身 class，于是 .pt-h2 在 5 个文件里逐字重复、.ac-b 3 处、 .tt-b 2 处、page{height:100vh} 更是 9 个文件一模一样抄了 9 遍。 - 删掉 6 组死规则，替身 class 收进 app.wxss - 页面骨架 page{} / .page-scroll / .page-body 统一到 app.wxss - learn.wxss 清空后删除（该页已无私有样式） - 左右留白统一 40rpx（home/article 原本是 36rpx） 顺带修一个真 bug：FAB 固定在 bottom:190rpx、高 116rpx，上沿距底 306rpx，但 7 个挂 FAB 的页面只留了 210rpx（learn/profile 更只有 60rpx）底部留白，最后一张卡片一直被它压住。改为 --pad-b-fab 330rpx。 本次不含任何色值/字号/圆角改动，设计调整在下一步。 Co-Authored-By: Claude Opus 5 --- pets-fe/app.wxss | 41 ++++++++++++++++-------- pets-fe/pages/article/article.wxml | 2 +- pets-fe/pages/article/article.wxss | 4 --- pets-fe/pages/community/community.wxss | 6 ---- pets-fe/pages/home/home.wxss | 10 ------ pets-fe/pages/learn/learn.wxss | 9 ------ pets-fe/pages/onboarding/onboarding.wxss | 2 -- pets-fe/pages/plan/plan.wxss | 10 ------ pets-fe/pages/profile/profile.wxss | 4 --- pets-fe/pages/record/record.wxss | 6 ---- pets-fe/pages/report/report.wxss | 6 ---- 11 files changed, 29 insertions(+), 71 deletions(-) delete mode 100644 pets-fe/pages/learn/learn.wxss diff --git a/pets-fe/app.wxss b/pets-fe/app.wxss index f115284..160b8a1 100644 --- a/pets-fe/app.wxss +++ b/pets-fe/app.wxss @@ -23,6 +23,12 @@ page{ --shadow2:0 36rpx 88rpx rgba(70,48,25,.13); --radius:44rpx; + /* 页面留白。FAB 固定在 bottom:190rpx、高 116rpx，上沿距底 306rpx， + 内容必须让开这段距离，否则最后一张卡会被它压住（7 个挂 FAB 的页面都中过这个招）。 */ + --pad-x:40rpx; + --pad-b-fab:calc(330rpx + env(safe-area-inset-bottom)); + --pad-b-plain:calc(60rpx + env(safe-area-inset-bottom)); + color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif; background: @@ -30,10 +36,22 @@ page{ 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); - min-height:100vh; + + /* 页面自身不滚，滚动交给 .page-scroll，这样 nav-bar 和 tabBar 才能固定住。 + 这 4 行原本在 9 个页面的 wxss 里逐字重复。 */ + height:100vh; + overflow:hidden; + display:flex; + flex-direction:column; } view,text{box-sizing:border-box} +/* 页面骨架：nav-bar → .page-scroll(承载滚动) → .page-body(内容留白) */ +.page-scroll{flex:1;min-height:0} +.page-body{padding:8rpx var(--pad-x) var(--pad-b-fab)} +/* 没挂 FAB 的页面（目前只有文章详情）不需要给它让位 */ +.page-body.no-fab{padding-bottom:var(--pad-b-plain)} + /* 全局隐藏滚动条（页面级 + 组件级），保留正常滚动 */ ::-webkit-scrollbar{ width:0 !important; @@ -59,10 +77,12 @@ page{scrollbar-width:none;-ms-overflow-style:none} } .head-links{display:flex;align-items:center;gap:26rpx} -/* 页面标题 */ +/* 页面标题。 + 注意：小程序没有 h2/p/b/span 标签，从 preview.html 迁移过来的标签选择器全是死规则， + 各页当初都自建了替身 class（.pt-h2 在 5 个文件里逐字重复）。这里统一收编。 */ .page-title{margin:4rpx 0 28rpx} -.page-title h2{font-size:46rpx;letter-spacing:-.6rpx;font-weight:800} -.page-title p{color:var(--muted);font-size:26rpx;margin-top:10rpx} +.pt-h2{font-size:46rpx;letter-spacing:-.6rpx;font-weight:800} +.pt-p{color:var(--muted);font-size:26rpx;margin-top:10rpx} /* 按钮 */ .btn{ @@ -187,8 +207,8 @@ page{scrollbar-width:none;-ms-overflow-style:none} .task.done{opacity:.55} .task.done .circle{background:var(--green);border-color:var(--green)} .task-text{flex:1} -.task-text b{font-size:28rpx} -.task-text p{font-size:24rpx;color:var(--muted);margin-top:8rpx;line-height:1.45} +.tt-b{font-size:28rpx;font-weight:700} +.tt-p{font-size:24rpx;color:var(--muted);margin-top:8rpx;line-height:1.45} .priority{ font-size:22rpx;color:#A96500;background:#FFF0D7;border-radius:999rpx;padding:8rpx 14rpx;font-weight:900;flex:none; } @@ -199,14 +219,10 @@ page{scrollbar-width:none;-ms-overflow-style:none} border-bottom:1rpx solid var(--line);font-size:26rpx; } .record-row:last-child{border-bottom:0} -.record-row b{font-size:28rpx} -.record-row span{color:var(--muted);font-size:24rpx} /* 统计格 */ .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16rpx;margin:28rpx 0} .stat{background:#fff;border:1rpx solid var(--line);border-radius:32rpx;padding:24rpx 14rpx;text-align:center} -.stat b{display:block;font-size:36rpx;margin-bottom:8rpx} -.stat span{font-size:22rpx;color:var(--muted)} /* 文章卡 */ .article-card{ @@ -216,8 +232,8 @@ page{scrollbar-width:none;-ms-overflow-style:none} width:116rpx;height:116rpx;border-radius:36rpx;flex:none;display:flex;align-items:center; justify-content:center;background:#FFF1D8;font-size:56rpx; } -.article-card b{font-size:30rpx} -.article-card p{color:var(--muted);font-size:24rpx;line-height:1.45;margin-top:10rpx} +.ac-b{font-size:30rpx;font-weight:700} +.ac-p{color:var(--muted);font-size:24rpx;line-height:1.45;margin-top:10rpx} /* 海报 */ .poster{ @@ -226,7 +242,6 @@ page{scrollbar-width:none;-ms-overflow-style:none} linear-gradient(160deg,#FFF7E8,#FFFFFF); border:1rpx solid #F2DFC3;border-radius:52rpx;padding:36rpx;text-align:center;overflow:hidden;position:relative; } -.poster h3{font-size:40rpx;margin-bottom:20rpx;font-weight:800} .poster-avatar{ width:152rpx;height:152rpx;margin:16rpx auto 20rpx;border-radius:54rpx; background:linear-gradient(135deg,#FFE5B7,#FFC06B);display:flex;align-items:center;justify-content:center; diff --git a/pets-fe/pages/article/article.wxml b/pets-fe/pages/article/article.wxml index a5e7dde..ba0386c 100644 --- a/pets-fe/pages/article/article.wxml +++ b/pets-fe/pages/article/article.wxml @@ -1,7 +1,7 @@ - + 加载中… {{error}} diff --git a/pets-fe/pages/article/article.wxss b/pets-fe/pages/article/article.wxss index 3581c41..8453d68 100644 --- a/pets-fe/pages/article/article.wxss +++ b/pets-fe/pages/article/article.wxss @@ -1,7 +1,3 @@ -page{height:100vh;overflow:hidden;display:flex;flex-direction:column} -.page-scroll{flex:1;min-height:0} -.page-body{padding:8rpx 36rpx calc(60rpx + env(safe-area-inset-bottom))} - .hint{padding:60rpx 0;text-align:center;color:var(--muted);font-size:28rpx} .art-head{padding:12rpx 0 28rpx} diff --git a/pets-fe/pages/community/community.wxss b/pets-fe/pages/community/community.wxss index e25dce0..936feb7 100644 --- a/pets-fe/pages/community/community.wxss +++ b/pets-fe/pages/community/community.wxss @@ -1,7 +1,3 @@ -.page-body{padding:8rpx 40rpx calc(210rpx + env(safe-area-inset-bottom))} -.pt-h2{font-size:46rpx;letter-spacing:-.6rpx;font-weight:800} -.pt-p{color:var(--muted);font-size:26rpx;margin-top:10rpx} - .feed-tabs{white-space:nowrap;padding:0 0 24rpx} .feed-tab{ display:inline-block;border:1rpx solid var(--line);background:#fff;border-radius:999rpx; @@ -37,8 +33,6 @@ .empty-hint{text-align:center;color:var(--muted);font-size:26rpx;padding:80rpx 0} /* 页面不自身滚动，改由 page-scroll 承载滚动（隐藏滚动条）*/ -page{height:100vh;overflow:hidden;display:flex;flex-direction:column} -.page-scroll{flex:1;min-height:0} /* 帖子分享按钮：用微信原生 open-type=share，需抹掉 button 默认外观 */ .pa-share{ diff --git a/pets-fe/pages/home/home.wxss b/pets-fe/pages/home/home.wxss index 0f96936..331d950 100644 --- a/pets-fe/pages/home/home.wxss +++ b/pets-fe/pages/home/home.wxss @@ -1,5 +1,3 @@ -.page-body{padding:8rpx 36rpx calc(210rpx + env(safe-area-inset-bottom))} - .top-row{display:flex;align-items:center;justify-content:space-between;margin:4rpx 0 28rpx} .greet-h2{font-size:44rpx;line-height:1.15;letter-spacing:-.8rpx;font-weight:800} .greet-p{font-size:26rpx;color:var(--muted);margin-top:10rpx} @@ -39,9 +37,6 @@ .day.has-dot::after{content:"";display:block;width:10rpx;height:10rpx;border-radius:50%;background:var(--green);margin:8rpx auto 0} .task-empty{padding:36rpx 8rpx;text-align:center;color:var(--muted);font-size:26rpx} -.tt-b{font-size:28rpx;font-weight:700} -.tt-p{font-size:24rpx;color:var(--muted);margin-top:8rpx;line-height:1.45} - .quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18rpx} .quick{ background:#FBFAF8;border-radius:32rpx;min-height:132rpx; @@ -53,9 +48,4 @@ .ai-banner{background:linear-gradient(135deg,#F2FAF6,#FFFFFF)} .ai-text{color:#59635D;font-size:28rpx;line-height:1.6} -.ac-b{font-size:30rpx;font-weight:700} -.ac-p{color:var(--muted);font-size:24rpx;line-height:1.45;margin-top:10rpx} - /* 页面不自身滚动，改由 page-scroll 承载滚动（隐藏滚动条）*/ -page{height:100vh;overflow:hidden;display:flex;flex-direction:column} -.page-scroll{flex:1;min-height:0} diff --git a/pets-fe/pages/learn/learn.wxss b/pets-fe/pages/learn/learn.wxss deleted file mode 100644 index b646141..0000000 --- a/pets-fe/pages/learn/learn.wxss +++ /dev/null @@ -1,9 +0,0 @@ -.page-body{padding:8rpx 40rpx calc(60rpx + env(safe-area-inset-bottom))} -.pt-h2{font-size:46rpx;letter-spacing:-.6rpx;font-weight:800} -.pt-p{color:var(--muted);font-size:26rpx;margin-top:10rpx} -.ac-b{font-size:30rpx;font-weight:700} -.ac-p{color:var(--muted);font-size:24rpx;line-height:1.45;margin-top:10rpx} - -/* 页面不自身滚动，改由 page-scroll 承载滚动（隐藏滚动条）*/ -page{height:100vh;overflow:hidden;display:flex;flex-direction:column} -.page-scroll{flex:1;min-height:0} diff --git a/pets-fe/pages/onboarding/onboarding.wxss b/pets-fe/pages/onboarding/onboarding.wxss index efdbd3d..3655ad6 100644 --- a/pets-fe/pages/onboarding/onboarding.wxss +++ b/pets-fe/pages/onboarding/onboarding.wxss @@ -1,5 +1,3 @@ -page{height:100vh;overflow:hidden;display:flex;flex-direction:column} -.page-scroll{flex:1;min-height:0} .onboard-page{ padding:0 40rpx 56rpx; min-height:100%; diff --git a/pets-fe/pages/plan/plan.wxss b/pets-fe/pages/plan/plan.wxss index 41a9966..a865891 100644 --- a/pets-fe/pages/plan/plan.wxss +++ b/pets-fe/pages/plan/plan.wxss @@ -1,11 +1,3 @@ -.page-body{padding:8rpx 40rpx calc(210rpx + env(safe-area-inset-bottom))} -.pt-h2{font-size:46rpx;letter-spacing:-.6rpx;font-weight:800} -.pt-p{color:var(--muted);font-size:26rpx;margin-top:10rpx} -.tt-b{font-size:28rpx;font-weight:700} -.tt-p{font-size:24rpx;color:var(--muted);margin-top:8rpx;line-height:1.45} -.ac-b{font-size:30rpx;font-weight:700} -.ac-p{color:var(--muted);font-size:24rpx;line-height:1.45;margin-top:10rpx} - .inline-tabs{display:flex;padding:8rpx;gap:8rpx;border-radius:32rpx;background:#EFE8DE;margin-bottom:28rpx} .it-btn{ flex:1;height:68rpx;line-height:68rpx;text-align:center;border-radius:24rpx; @@ -64,5 +56,3 @@ .ex-b{display:block;font-size:26rpx;margin-bottom:6rpx;font-weight:700} /* 页面不自身滚动，改由 page-scroll 承载滚动（隐藏滚动条）*/ -page{height:100vh;overflow:hidden;display:flex;flex-direction:column} -.page-scroll{flex:1;min-height:0} diff --git a/pets-fe/pages/profile/profile.wxss b/pets-fe/pages/profile/profile.wxss index 49ae875..4cf2b0a 100644 --- a/pets-fe/pages/profile/profile.wxss +++ b/pets-fe/pages/profile/profile.wxss @@ -1,5 +1,3 @@ -.page-body{padding:8rpx 40rpx calc(60rpx + env(safe-area-inset-bottom))} - .profile-header{text-align:center;padding:24rpx 0 32rpx} .ph-avatar{margin:0 auto 20rpx;width:152rpx;height:152rpx;font-size:76rpx;border-radius:56rpx;position:relative;overflow:visible} .ph-avatar-img{width:100%;height:100%;border-radius:56rpx} @@ -16,5 +14,3 @@ .pr-val{color:var(--muted);font-weight:700;font-size:26rpx} /* 页面不自身滚动，改由 page-scroll 承载滚动（隐藏滚动条）*/ -page{height:100vh;overflow:hidden;display:flex;flex-direction:column} -.page-scroll{flex:1;min-height:0} diff --git a/pets-fe/pages/record/record.wxss b/pets-fe/pages/record/record.wxss index 331e61d..6d2c273 100644 --- a/pets-fe/pages/record/record.wxss +++ b/pets-fe/pages/record/record.wxss @@ -1,7 +1,3 @@ -.page-body{padding:8rpx 40rpx calc(210rpx + env(safe-area-inset-bottom))} -.pt-h2{font-size:46rpx;letter-spacing:-.6rpx;font-weight:800} -.pt-p{color:var(--muted);font-size:26rpx;margin-top:10rpx} - .record-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24rpx;margin-bottom:28rpx} .record-item{ height:184rpx;background:#fff;border-radius:44rpx;box-shadow:var(--shadow); @@ -48,8 +44,6 @@ .he-img{margin-top:14rpx;width:220rpx;height:220rpx;border-radius:20rpx} /* 页面不自身滚动，改由 page-scroll 承载滚动（隐藏滚动条）*/ -page{height:100vh;overflow:hidden;display:flex;flex-direction:column} -.page-scroll{flex:1;min-height:0} /* 时间轴类型筛选 */ .rec-filter{white-space:nowrap;margin-bottom:20rpx} diff --git a/pets-fe/pages/report/report.wxss b/pets-fe/pages/report/report.wxss index 3a8f708..b99f71a 100644 --- a/pets-fe/pages/report/report.wxss +++ b/pets-fe/pages/report/report.wxss @@ -1,7 +1,3 @@ -.page-body{padding:8rpx 40rpx calc(210rpx + env(safe-area-inset-bottom))} -.pt-h2{font-size:46rpx;letter-spacing:-.6rpx;font-weight:800} -.pt-p{color:var(--muted);font-size:26rpx;margin-top:10rpx} - .report-card{background:linear-gradient(135deg,#FFFFFF,#F2FAF6)} .rc-text{color:var(--muted);font-size:28rpx;line-height:1.6} .stat-b{display:block;font-size:36rpx;margin-bottom:8rpx;font-weight:800} @@ -15,5 +11,3 @@ .mini-bar-fill{display:block;height:100%;border-radius:999rpx;background:linear-gradient(90deg,var(--blue),#A9C8F6)} /* 页面不自身滚动，改由 page-scroll 承载滚动（隐藏滚动条）*/ -page{height:100vh;overflow:hidden;display:flex;flex-direction:column} -.page-scroll{flex:1;min-height:0}