From 4119bfc303dced6b9c542004bec1107f2280db58 Mon Sep 17 00:00:00 2001 From: xcbyy <2578898740@qq.com> Date: Mon, 19 Oct 2026 16:00:37 +0800 Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=BC=98=E5=8C=96=E5=A4=A7=E7=A5=9E?= =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E5=BA=95=E9=83=A8=E6=93=8D=E4=BD=9C?= =?UTF-8?q?=E6=A0=8F=E5=B8=83=E5=B1=80=EF=BC=88=E4=B8=8D=E5=86=8D=E6=8C=A4?= =?UTF-8?q?=E5=8E=8B=E6=8D=A2=E8=A1=8C=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 左侧「私聊/收藏/举报」独立成 bar-actions 组：固定 76rpx 宽、flex-shrink:0、文案 nowrap，杜绝被价格块挤压换行 - 价格块改为右对齐两行展示：小字标签「当前选定」+ 金额(独立 ¥ 符号，大号加粗)，不再与标签挤在一行 - 「立即预约」按钮 flex-shrink:0 + min-width 220rpx，胶囊圆角(999rpx)，保证任何机型都可点且不被压缩 - 未认证大神的提示改为独立的 guest-tip（右对齐、单行） - 底部栏高度改为 min-height+内边距并保留安全区；暖色主题同步补充 summary-sym/guest-tip 配色 - 新增回归护栏 detail-bottom-bar.spec.ts（99 套件/681 用例全绿） --- pwuniapp/pages/expert/detail.vue | 145 +++++++++++++++++-------- server/tests/detail-bottom-bar.spec.ts | 35 ++++++ 2 files changed, 136 insertions(+), 44 deletions(-) create mode 100644 server/tests/detail-bottom-bar.spec.ts diff --git a/pwuniapp/pages/expert/detail.vue b/pwuniapp/pages/expert/detail.vue index a4cdd1d..007a614 100644 --- a/pwuniapp/pages/expert/detail.vue +++ b/pwuniapp/pages/expert/detail.vue @@ -170,27 +170,33 @@ - - - 私聊 - - - - {{ isFav ? '已收藏' : '收藏' }} - - - - 举报 + + + + 私聊 + + + + {{ isFav ? '已收藏' : '收藏' }} + + + + 举报 + + - - 该用户尚未认证为大神，暂不可预约 + + 该用户尚未认证为大神，暂不可预约 @@ -1131,70 +1137,112 @@ const submitReportTicket = async () => { bottom: 0; left: 0; right: 0; - height: calc(120rpx + env(safe-area-inset-bottom)); - padding: 0 32rpx env(safe-area-inset-bottom); + min-height: calc(112rpx + env(safe-area-inset-bottom)); + padding: 12rpx 24rpx calc(12rpx + env(safe-area-inset-bottom)); box-sizing: border-box; background-color: rgba(21, 29, 48, 0.95); backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; - gap: 20rpx; + gap: 12rpx; z-index: 100; max-width: 450px; margin: 0 auto; - .icon-action { + /* 左侧三个图标动作：固定宽度，绝不换行/被压缩 */ + .bar-actions { display: flex; - flex-direction: column; align-items: center; - width: 80rpx; + gap: 6rpx; + flex-shrink: 0; - .action-svg { - width: 36rpx; - height: 36rpx; - } - .action-text { - font-size: 18rpx; - color: #94A3B8; - margin-top: 4rpx; + .icon-action { + width: 76rpx; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; - &.fav-active { - color: #F59E0B; - font-weight: 600; + .action-svg { + width: 36rpx; + height: 36rpx; + } + .action-text { + font-size: 20rpx; + color: #94A3B8; + margin-top: 4rpx; + white-space: nowrap; + line-height: 1.2; + + &.fav-active { + color: #F59E0B; + font-weight: 600; + } } } } + /* 价格块：右对齐、两行（标签 + 金额），不换行 */ .price-summary { - flex: 1; + margin-left: auto; + flex-shrink: 0; display: flex; - align-items: baseline; + flex-direction: column; + align-items: flex-end; + justify-content: center; + padding: 0 4rpx; .summary-label { - font-size: 22rpx; + font-size: 20rpx; color: #64748B; + white-space: nowrap; + line-height: 1.2; } - .summary-price { - font-size: 36rpx; + .summary-price-row { + display: flex; + align-items: baseline; + } + .summary-sym { + font-size: 22rpx; font-weight: 700; color: #10B981; - margin-left: 6rpx; + margin-right: 2rpx; + } + .summary-price { + font-size: 38rpx; + font-weight: 700; + color: #10B981; + line-height: 1.1; font-variant-numeric: tabular-nums; } } .btn-book { + flex-shrink: 0; + min-width: 220rpx; background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); color: #FFF; - font-size: 28rpx; + font-size: 30rpx; font-weight: 700; - border-radius: 44rpx; - height: 80rpx; - line-height: 80rpx; - padding: 0 48rpx; - box-shadow: 0 4rpx 20rpx rgba(99, 102, 241, 0.4); + border-radius: 999rpx; + height: 84rpx; + line-height: 84rpx; + padding: 0 36rpx; margin: 0; + white-space: nowrap; + box-shadow: 0 4rpx 20rpx rgba(99, 102, 241, 0.4); + } + + .guest-tip { + margin-left: auto; + flex: 1; + text-align: right; + + .guest-tip-text { + font-size: 22rpx; + color: #94A3B8; + } } } @@ -1591,11 +1639,20 @@ const submitReportTicket = async () => { .summary-label { color: #78716C; } + .summary-sym { + color: #EA580C; + } .summary-price { color: #EA580C; } } + .guest-tip { + .guest-tip-text { + color: #57534E; + } + } + .btn-book { background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%); box-shadow: 0 4rpx 20rpx rgba(234, 88, 12, 0.35); diff --git a/server/tests/detail-bottom-bar.spec.ts b/server/tests/detail-bottom-bar.spec.ts new file mode 100644 index 0000000..f28ed37 --- /dev/null +++ b/server/tests/detail-bottom-bar.spec.ts @@ -0,0 +1,35 @@ +// 已读取AGENTS.md +import * as fs from 'fs'; +import * as path from 'path'; + +/** + * 第八十三批：大神详情页底部操作栏布局（不换行、不被压缩、价格块右对齐）。 + */ +describe('第八十三批详情页底部栏布局闸门', () => { + const root = path.resolve(__dirname, '../../'); + const detail = fs.readFileSync(path.join(root, 'pwuniapp/pages/expert/detail.vue'), 'utf-8'); + + it('底部栏左侧图标动作独立成组，固定宽度不换行', () => { + expect(detail).toContain(''); + expect(detail).toContain('.bar-actions {'); + expect(detail).toContain('flex-shrink: 0;'); + expect(detail).toContain('white-space: nowrap;'); + }); + + it('价格块右对齐两行展示（标签+金额），金额独立符号', () => { + expect(detail).toContain('当前选定'); + expect(detail).toContain('class="summary-price-row"'); + expect(detail).toContain('class="summary-sym"'); + expect(detail).toContain('align-items: flex-end;'); + }); + + it('预约按钮不被压缩且最小宽度保证可点击', () => { + expect(detail).toContain('min-width: 220rpx;'); + expect(detail).toContain('border-radius: 999rpx;'); + }); + + it('兼容暖色主题的底部栏配色', () => { + expect(detail).toContain('.guest-tip-text'); + expect(detail).toContain('color: #EA580C;'); + }); +});