sundynix/sundynix-pets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(fe): 结构去重 + 修 FAB 遮挡内容（视觉等价，不含设计调整）

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Blizzard
2026-07-29 10:28:48 +08:00
parent b4a4a4b3c0
commit b99099759f
11 changed files with 29 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pets-fe/app.wxss
+28 -13
View File
@@ -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;
pets-fe/pages/article/article.wxml
+1 -1
View File
@@ -1,7 +1,7 @@
<nav-bar title="新手知识" show-back="{{true}}"></nav-bar>
<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
<view class="page-body">
<view class="page-body no-fab">
<view wx:if="{{loading}}" class="hint">加载中…</view>
<view wx:elif="{{error}}" class="hint">{{error}}</view>
pets-fe/pages/article/article.wxss
-4
View File
@@ -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}
pets-fe/pages/community/community.wxss
-6
View File
@@ -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{
pets-fe/pages/home/home.wxss
-10
View File
@@ -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}
pets-fe/pages/learn/learn.wxss
-9
View File
@@ -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}
pets-fe/pages/onboarding/onboarding.wxss
-2
View File
@@ -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%;
pets-fe/pages/plan/plan.wxss
-10
View File
@@ -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}
pets-fe/pages/profile/profile.wxss
-4
View File
@@ -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}
pets-fe/pages/record/record.wxss
-6
View File
@@ -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}
pets-fe/pages/report/report.wxss
-6
View File
@@ -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}