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;'); + }); +});