/* pages/index/result.wxss - AI分析结果(按旧版模板重构) */ .container { min-height: 100vh; background-color: #f5f5f5; /* 底部三按钮栏:min-height+内边距+阴影,略多留空避免末段卡片被挡 */ padding: 0 24rpx calc(260rpx + env(safe-area-inset-bottom)); } /* ========== 分析中模态框 ========== */ .analyzing-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 9999; } .analyzing-content { background-color: #fff; border-radius: 24rpx; padding: 80rpx 60rpx; width: 560rpx; display: flex; flex-direction: column; align-items: center; box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15); } .analyzing-icon { width: 120rpx; height: 120rpx; margin-bottom: 40rpx; display: flex; align-items: center; justify-content: center; } .spinner { width: 120rpx; height: 120rpx; border: 8rpx solid #e0e0e0; border-top-color: #e63946; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .analyzing-title { font-size: 36rpx; font-weight: 600; color: #333; margin-bottom: 16rpx; } .analyzing-desc { font-size: 28rpx; color: #e63946; margin-bottom: 24rpx; text-align: center; font-weight: 500; } .analyzing-bar { width: 400rpx; height: 12rpx; background: #e5e5e5; border-radius: 6rpx; overflow: hidden; margin-bottom: 24rpx; } .analyzing-bar-fill { height: 100%; background: linear-gradient(90deg, #e63946, #ff6b9d); border-radius: 6rpx; transition: width 0.3s ease; } .analyzing-hint { font-size: 24rpx; color: #999; text-align: center; line-height: 1.6; } /* ========== 状态横幅 ========== */ .status-banner { background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%); padding: 24rpx; border-radius: 12rpx; display: flex; align-items: center; margin: 24rpx 0; } .status-dot { width: 12rpx; height: 12rpx; background-color: #4caf50; border-radius: 50%; margin-right: 16rpx; } .status-text { font-size: 26rpx; color: #2e7d32; } .error-banner { background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%); } .error-dot { background-color: #f44336; } .error-banner .status-text { color: #c62828; font-weight: bold; } .error-content { background-color: #fff; border-radius: 16rpx; padding: 32rpx; margin-bottom: 24rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); border-left: 4rpx solid #f44336; } .error-title { font-size: 28rpx; color: #c62828; font-weight: bold; display: block; margin-bottom: 16rpx; } .error-message { font-size: 24rpx; color: #666; line-height: 1.8; display: block; white-space: pre-wrap; word-break: break-all; background-color: #f5f5f5; padding: 16rpx; border-radius: 8rpx; margin-bottom: 24rpx; } .retry-btn { background: linear-gradient(135deg, #e63946 0%, #ff6b9d 100%); padding: 20rpx; border-radius: 12rpx; text-align: center; } .retry-text { font-size: 28rpx; color: #fff; font-weight: 500; } /* ========== 通用卡片 ========== */ .card { background-color: #fff; border-radius: 16rpx; padding: 32rpx; margin-bottom: 24rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); word-wrap: break-word; } .card-title { font-size: 32rpx; font-weight: 600; color: #333; display: block; margin-bottom: 24rpx; } .card-text { font-size: 28rpx; color: #666; line-height: 1.8; display: block; } /* ========== 付费解锁毛玻璃区域 ========== */ .paywall-card { position: relative; overflow: hidden; } .paywall-content { position: relative; } .paywall-blur { padding: 32rpx 24rpx 140rpx; border-radius: 24rpx; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(18rpx); } .paywall-mask { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 24rpx; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(245, 245, 245, 0.98)); pointer-events: none; } .paywall-fake-title { display: block; font-size: 30rpx; font-weight: 600; color: #444; margin-bottom: 16rpx; } .paywall-fake-line { display: block; font-size: 26rpx; color: #888; line-height: 1.8; } .paywall-btn { position: absolute; left: 5%; right: 5%; width: 90%; bottom: 56rpx; padding: 20rpx 0; border-radius: 999rpx; background: linear-gradient(135deg, #e63946 0%, #ff6b9d 100%); box-shadow: 0 8rpx 24rpx rgba(230, 57, 70, 0.35); display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 12rpx; } .paywall-btn-main { font-size: 30rpx; color: #fff; font-weight: 600; } .paywall-btn-price { font-size: 24rpx; color: #ffe5f0; } .paywall-tip { display: block; margin-top: 8rpx; font-size: 22rpx; color: #999; text-align: center; } .paywall-tip-panel { margin-top: 16rpx; padding: 0 8rpx; line-height: 1.5; } /* ========== 报告预览门禁(人脸分析报告):整区遮罩 + 预览截断 ========== */ .report-gate-wrap { position: relative; margin-bottom: 24rpx; } .report-gate-overlay { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; overflow: hidden; /* 关键:允许手指透传滚动(修复 "查看全文下方无法再下拉" 的问题) 只在真正的交互元素(按钮)上再打开点击事件 */ pointer-events: none; } .report-gate-overlay .report-gate-panel, .report-gate-overlay .paywall-btn { pointer-events: auto; } /* 占据遮罩下半区,组内标题/说明/按钮垂直居中,避免贴底留白过大 */ .report-gate-cta-wrap { width: 100%; box-sizing: border-box; /* 遮挡/雾面展示区占 report-gate 整体的 55%,与渐变分层一致 */ height: 55%; min-height: 400rpx; max-height: 640rpx; display: flex; flex-direction: column; justify-content: center; align-items: stretch; /* 整体上移,避免贴底 */ margin-bottom: 96rpx; padding: 16rpx 0 calc(20rpx + env(safe-area-inset-bottom)); } .report-gate-gradient { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; /* 性格类型卡 + 性格概述卡前 ~30% 保持清晰,其余渐强遮罩 */ background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.25) 38%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.85) 78%, rgba(255, 255, 255, 0.94) 100% ); } /* 支付成功后:手机号 / 资料引导条 */ .post-pay-guide { margin: 16rpx 24rpx 0; padding: 24rpx 28rpx; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 20rpx; border: 1rpx solid rgba(16, 185, 129, 0.35); } .post-pay-guide-title { display: block; font-size: 28rpx; font-weight: 600; color: #065f46; margin-bottom: 8rpx; } .post-pay-guide-desc { display: block; font-size: 24rpx; color: #047857; line-height: 1.45; margin-bottom: 20rpx; } .post-pay-guide-actions { display: flex; flex-wrap: wrap; gap: 16rpx; } .post-pay-guide-btn.phone { margin: 0; padding: 0 36rpx; height: 72rpx; line-height: 72rpx; font-size: 28rpx; font-weight: 600; color: #fff; background: linear-gradient(135deg, #10b981 0%, #34d399 100%); border-radius: 36rpx; border: none; } .post-pay-guide-btn.phone::after { border: none; } .post-pay-guide-btn.profile { padding: 0 36rpx; height: 72rpx; line-height: 72rpx; font-size: 28rpx; font-weight: 600; color: #065f46; background: #fff; border-radius: 36rpx; border: 2rpx solid #10b981; text-align: center; } .report-gate-panel { position: relative; z-index: 2; width: 100%; box-sizing: border-box; padding: 20rpx 20rpx 8rpx; flex-shrink: 0; background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0.96) 55%); } .report-gate-panel .paywall-fake-title { text-align: center; } .report-gate-panel .paywall-tip { text-align: center; } /* 遮罩内主按钮:不再用绝对定位贴底,避免区域过矮 */ .paywall-btn-inline { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; width: 90% !important; max-width: 640rpx; margin: 28rpx auto 0; box-sizing: border-box; display: flex !important; flex-direction: column !important; align-items: center !important; padding: 28rpx 24rpx !important; } .paywall-btn-inline .paywall-btn-price { display: block; width: 100%; text-align: center; margin-top: 10rpx; font-size: 22rpx; line-height: 1.45; font-weight: 400; } /* 主按钮单行:仅金额 +「元解锁」 */ .paywall-btn--compact { flex-direction: row !important; justify-content: center !important; padding: 32rpx 40rpx !important; } .paywall-btn--compact .paywall-btn-main { font-size: 34rpx; letter-spacing: 2rpx; } .report-gate-panel .paywall-btn-inline::after { border: none; } /* 未解锁:三大场景标题预览 */ .scene-teaser-bundle { text-align: left; padding-bottom: 28rpx !important; } .scene-bundle-hint { display: block; font-size: 22rpx; color: #94a3b8; margin-bottom: 20rpx; } .scene-teaser-item { padding: 20rpx 0; border-bottom: 1rpx solid #f1f5f9; } .scene-teaser-item--last { border-bottom: none; padding-bottom: 8rpx; } .scene-teaser-title { display: block; font-size: 28rpx; font-weight: 600; color: #334155; margin-bottom: 16rpx; } .scene-teaser-lines { display: flex; flex-direction: column; gap: 12rpx; } .scene-teaser-line { height: 14rpx; border-radius: 8rpx; background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 100%); width: 100%; } .scene-teaser-line--short { width: 62%; } .scene-detail-card { border-left: 6rpx solid #e63946; padding-left: 28rpx !important; } /* 未解锁:限制概述与盖洛普可见行数 */ .report-gate-teaser--locked .card-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; text-overflow: ellipsis; } .report-gate-teaser--locked .gallup-list { max-height: 140rpx; overflow: hidden; position: relative; } .report-gate-teaser--locked .gallup-list::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48rpx; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); } /* 未解锁:压缩首屏性格区可读内容 */ .personality-card--locked .type-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } .personality-card--locked .advantages-box { max-height: 140rpx; overflow: hidden; position: relative; } .personality-card--locked .advantages-box::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56rpx; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); } .personality-card--locked .face-sbti-card { max-height: 200rpx; overflow: hidden; position: relative; } .personality-card--locked .face-sbti-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48rpx; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #e8f5f2); border-radius: 0 0 16rpx 16rpx; } .personality-card--locked .next-btn { opacity: 0.45; pointer-events: none; } /* ========== 性格类型卡片 ========== */ .personality-card { text-align: center; } .personality-card-sub { display: block; font-size: 22rpx; color: #94a3b8; margin: -8rpx 0 24rpx; letter-spacing: 1rpx; } .type-chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12rpx; margin: 12rpx 0 8rpx; } .type-chip { font-size: 22rpx; color: #64748b; background: #f8fafc; border: 1rpx solid #e2e8f0; padding: 8rpx 20rpx; border-radius: 999rpx; } .type-chip--disc { color: #2563eb; background: #eff6ff; border-color: #bfdbfe; } .type-emoji { display: block; font-size: 36rpx; margin-bottom: 4rpx; } .type-emoji--disc { opacity: 0.35; font-size: 28rpx; } .personality-type { margin-bottom: 32rpx; } .type-code { font-size: 72rpx; font-weight: 700; color: #e63946; display: block; margin-bottom: 8rpx; } .type-name { font-size: 28rpx; color: #666; display: block; margin-bottom: 16rpx; } .type-desc { font-size: 26rpx; color: #888; line-height: 1.6; display: block; text-align: center; padding: 0 20rpx; } .type-details { display: flex; flex-wrap: wrap; gap: 24rpx; margin-bottom: 8rpx; } .type-details--wrap .type-box { flex: 1 1 38%; min-width: 260rpx; } .result-cta-questionnaire { box-sizing: border-box; width: 100%; max-width: 100%; margin: 20rpx 0 32rpx; padding: 24rpx 36rpx; text-align: center; background: linear-gradient(135deg, #e63946 0%, #e85d75 50%, #ff6b9d 100%); border: none; border-radius: 999rpx; box-shadow: 0 6rpx 22rpx rgba(230, 57, 70, 0.35); } .result-cta-questionnaire--pressed { opacity: 0.92; transform: scale(0.985); } .result-cta-questionnaire-text { font-size: 28rpx; font-weight: 600; color: #fff; letter-spacing: 1rpx; } .type-box { flex: 1; padding: 24rpx; border-radius: 12rpx; text-align: center; } .pdp-box { background: linear-gradient(135deg, #faf5fc 0%, #f3e5f5 100%); } .disc-box { background: linear-gradient(135deg, #f5f9fd 0%, #e3f2fd 100%); } .type-label { font-size: 24rpx; color: #666; display: block; margin-bottom: 8rpx; } .type-value { font-size: 30rpx; font-weight: 600; display: block; margin-bottom: 4rpx; } .pdp-box .type-value { color: #7b1fa2; } .disc-box .type-value { color: #1976d2; } /* SBTI 盒子:家族化重塑 */ .sbti-box { flex: 1 1 100% !important; background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important; margin-top: 10rpx; } .sbti-box .type-value { color: #d97706; } .type-desc-small { display: block; font-size: 24rpx; color: #92400e; line-height: 1.5; margin-top: 8rpx; padding: 0 10rpx; } /* 恢复:经典绿色优势区 */ .advantages-box { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); padding: 32rpx 24rpx; border-radius: 20rpx; margin: 24rpx 0 32rpx; } .advantages-label { font-size: 26rpx; font-weight: 600; color: #2e7d32; display: block; text-align: center; margin-bottom: 24rpx; letter-spacing: 2rpx; } .advantages-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 20rpx; } .advantage-pill { background: #ffffff; padding: 14rpx 36rpx; border-radius: 999rpx; box-shadow: 0 4rpx 12rpx rgba(46, 125, 50, 0.08); } .advantage-pill-text { font-size: 24rpx; font-weight: 600; color: #2e7d32; } .next-btn { background: linear-gradient(135deg, #e63946 0%, #ff6b9d 100%); padding: 24rpx; border-radius: 48rpx; box-shadow: 0 8rpx 16rpx rgba(230, 57, 70, 0.3); } .next-btn-text { font-size: 28rpx; font-weight: 600; color: #fff; display: block; text-align: center; } /* ========== Tab切换 ========== */ .tabs { display: flex; border-bottom: 2rpx solid #f0f0f0; margin-bottom: 24rpx; background-color: #fff; border-radius: 16rpx 16rpx 0 0; } .tab { flex: 1; padding: 24rpx; text-align: center; position: relative; } .tab.active::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60rpx; height: 4rpx; background-color: #e63946; border-radius: 2rpx; } .tab-text { font-size: 28rpx; color: #999; } .tab-text.active { color: #e63946; font-weight: 600; } /* ========== 面相分析 ========== */ .feature-list { display: flex; flex-direction: column; gap: 20rpx; } .feature-item { display: flex; font-size: 26rpx; line-height: 1.8; } .feature-label { font-weight: 600; color: #333; flex-shrink: 0; } .feature-desc { color: #666; flex: 1; } /* 职业建议 */ .career-list { display: flex; flex-direction: column; gap: 24rpx; } .career-item { display: flex; flex-direction: column; gap: 8rpx; } .career-header { display: flex; align-items: center; } .career-dot { width: 12rpx; height: 12rpx; background-color: #e63946; border-radius: 50%; margin-right: 16rpx; flex-shrink: 0; } .career-name { font-size: 28rpx; font-weight: 600; color: #333; } .career-reason { font-size: 24rpx; color: #666; line-height: 1.6; padding-left: 28rpx; } /* 人际关系 */ .interpersonal-content { display: flex; flex-direction: column; gap: 20rpx; } .interpersonal-item { display: flex; font-size: 26rpx; line-height: 1.8; } .interpersonal-label { font-weight: 600; color: #333; flex-shrink: 0; } .interpersonal-text { color: #666; flex: 1; } /* 潜能 */ .potential-list { display: flex; flex-direction: column; gap: 20rpx; } .potential-item { display: flex; flex-direction: column; gap: 8rpx; } .potential-name { font-size: 28rpx; font-weight: 600; color: #333; } .potential-desc { font-size: 24rpx; color: #666; line-height: 1.6; padding-left: 20rpx; } /* ========== 骨相分析 ========== */ .bone-content { display: flex; flex-direction: column; gap: 20rpx; } .bone-item { display: flex; font-size: 26rpx; line-height: 1.8; } .bone-label { font-weight: 600; color: #333; flex-shrink: 0; min-width: 120rpx; } .bone-text { color: #666; flex: 1; } /* 人生阶段 */ .life-stage-list { display: flex; flex-direction: column; gap: 24rpx; } .life-stage-item { background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%); padding: 20rpx; border-radius: 12rpx; border-left: 4rpx solid #ff9800; } .stage-label { font-size: 28rpx; font-weight: 600; color: #e65100; display: block; margin-bottom: 8rpx; } .stage-desc { font-size: 26rpx; color: #666; line-height: 1.8; display: block; } /* 骨相总评 */ .bone-summary-content { display: flex; flex-direction: column; gap: 24rpx; } .summary-text { font-size: 28rpx; color: #333; line-height: 1.8; display: block; } .suggestions-title { font-size: 28rpx; font-weight: 600; color: #333; margin-top: 8rpx; } .suggestions-list { display: flex; flex-direction: column; gap: 16rpx; margin-top: 12rpx; } .suggestion-item { background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%); padding: 16rpx 20rpx; border-radius: 8rpx; } .suggestion-text { font-size: 26rpx; color: #333; line-height: 1.6; display: block; } /* ========== 简化版(无面相骨相数据) ========== */ .simple-career-list { display: flex; flex-wrap: wrap; gap: 16rpx; } .simple-career-tag { padding: 12rpx 24rpx; background: #f3f4f6; border-radius: 24rpx; font-size: 26rpx; color: #374151; } /* ========== 操作按钮 ========== */ .action-section { margin-top: 16rpx; padding-bottom: 40rpx; } .btn { display: flex; align-items: center; justify-content: center; width: 100%!important; height: 100rpx; min-height: 100rpx; border-radius: 28rpx; margin-bottom: 20rpx; padding: 0; border: none; line-height: 100rpx; box-sizing: border-box; overflow: hidden; } .btn::after { border: none; } .btn-primary { background: linear-gradient(135deg, #e63946 0%, #ff6b9d 100%); box-shadow: 0 8rpx 24rpx rgba(230, 57, 70, 0.3); } .btn-outline { background: #fff; border: 2rpx solid #e63946; } .btn-text { font-size: 32rpx; font-weight: 600; color: #fff; } .btn-text-outline { font-size: 30rpx; color: #e63946; font-weight: 500; } /* ========== 无人脸错误状态 ========== */ .no-face-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40rpx 32rpx; box-sizing: border-box; } .no-face-card { background: #fff; border-radius: 24rpx; padding: 60rpx 48rpx; width: 100%; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); } .no-face-icon { width: 120rpx; height: 120rpx; background: #fff3f3; border-radius: 60rpx; display: flex; align-items: center; justify-content: center; margin-bottom: 32rpx; } .no-face-emoji { font-size: 56rpx; line-height: 1; } .no-face-title { font-size: 38rpx; font-weight: 700; color: #1a1a2e; margin-bottom: 16rpx; text-align: center; } .no-face-desc { font-size: 28rpx; color: #e63946; text-align: center; line-height: 1.6; margin-bottom: 40rpx; } .no-face-tips { width: 100%; background: #f8f9fa; border-radius: 16rpx; padding: 28rpx 32rpx; margin-bottom: 48rpx; box-sizing: border-box; } .no-face-tips-title { font-size: 28rpx; font-weight: 600; color: #333; display: block; margin-bottom: 16rpx; } .no-face-tip-item { font-size: 26rpx; color: #666; line-height: 1.8; display: block; } .no-face-btn { width: 100%; height: 96rpx; background: linear-gradient(135deg, #e63946 0%, #ff6b9d 100%); border-radius: 48rpx; display: flex; align-items: center; justify-content: center; box-shadow: 0 8rpx 24rpx rgba(230, 57, 70, 0.3); } .no-face-btn-text { font-size: 32rpx; font-weight: 600; color: #fff; } /* ========== 盖洛普优势卡片 ========== */ .gallup-list { display: flex; flex-direction: column; gap: 20rpx; margin-top: 12rpx; } .gallup-item { display: flex; align-items: center; gap: 24rpx; padding: 18rpx 24rpx; background: linear-gradient(135deg, rgba(230, 57, 70, 0.06) 0%, rgba(255, 107, 157, 0.04) 100%); border-radius: 16rpx; border-left: 6rpx solid #e63946; } .gallup-rank { width: 56rpx; height: 56rpx; border-radius: 50%; background: linear-gradient(135deg, #e63946 0%, #ff6b9d 100%); display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 700; color: #fff; flex-shrink: 0; text-align: center; line-height: 56rpx; } .gallup-text { font-size: 30rpx; font-weight: 600; color: #1a1a2e; } /* ========== 企业版:职业画像 / HR视角 / 老板视角 ========== */ .enterprise-section { margin-bottom: 24rpx; } .enterprise-section:last-child { margin-bottom: 0; } .enterprise-label { font-size: 26rpx; font-weight: 600; color: #333; display: block; margin-bottom: 12rpx; } .enterprise-sublabel { font-size: 24rpx; color: #888; display: block; margin-bottom: 8rpx; } .enterprise-tags { display: flex; flex-wrap: wrap; gap: 12rpx; } .enterprise-tag { padding: 10rpx 20rpx; background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); border-radius: 24rpx; font-size: 24rpx; color: #2e7d32; } .enterprise-tag.risk { background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); color: #e65100; } .lifecycle-list { display: flex; flex-direction: column; gap: 16rpx; } .lifecycle-item { padding: 16rpx 20rpx; background: #f8f9fa; border-radius: 12rpx; } .lifecycle-key { font-size: 24rpx; color: #999; display: block; margin-bottom: 6rpx; } .lifecycle-val { font-size: 26rpx; color: #333; line-height: 1.6; display: block; } .boss-card { border-left: 6rpx solid #1976d2; } .boss-headline { font-size: 30rpx; font-weight: 600; color: #1a1a2e; line-height: 1.6; display: block; margin-bottom: 20rpx; } .boss-metrics { display: flex; flex-wrap: wrap; gap: 16rpx; } .boss-metric { flex: 1; min-width: 140rpx; padding: 16rpx; background: #f5f5f5; border-radius: 12rpx; text-align: center; } .boss-metric-label { font-size: 22rpx; color: #999; display: block; margin-bottom: 6rpx; } .boss-metric-value { font-size: 28rpx; font-weight: 600; color: #333; display: block; } .boss-metric-value.high { color: #4caf50; } .boss-metric-value.medium { color: #ff9800; } .boss-metric-value.low { color: #f44336; } /* 面相报告页:成交链路(补做四测 + 深度解读 + 分享 90% 收益) */ .face-journey { margin: 32rpx 0 40rpx; } .face-journey__title { display: flex; align-items: baseline; gap: 14rpx; margin-bottom: 20rpx; padding: 0 8rpx; } .face-journey__title-main { font-size: 34rpx; font-weight: 800; color: #111827; letter-spacing: 0.01em; } .face-journey__title-sub { font-size: 22rpx; color: #6b7280; } .face-journey-step { display: flex; align-items: center; gap: 20rpx; padding: 28rpx 28rpx; border-radius: 22rpx; margin-bottom: 16rpx; box-shadow: 0 8rpx 28rpx rgba(15, 23, 42, 0.08); position: relative; overflow: hidden; } .face-journey-step--purple { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); color: #fff; } .face-journey-step--indigo { background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%); color: #fff; } .face-journey-step__no { width: 68rpx; height: 68rpx; border-radius: 18rpx; background: rgba(255, 255, 255, 0.22); color: #fff; font-size: 30rpx; font-weight: 800; display: flex; align-items: center; justify-content: center; letter-spacing: 2rpx; flex-shrink: 0; } .face-journey-step__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6rpx; } .face-journey-step__title { font-size: 30rpx; font-weight: 700; color: #fff; } .face-journey-step__desc { font-size: 22rpx; color: rgba(255, 255, 255, 0.85); line-height: 1.55; } .face-journey-step__arrow { font-size: 36rpx; color: rgba(255, 255, 255, 0.8); flex-shrink: 0; } .face-journey-revenue { display: flex; align-items: center; gap: 18rpx; padding: 28rpx 28rpx; background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border: 1rpx solid #fed7aa; border-radius: 22rpx; box-shadow: 0 10rpx 24rpx rgba(234, 88, 12, 0.1); } .face-journey-revenue__left { flex: 1; display: flex; flex-direction: column; gap: 6rpx; } .face-journey-revenue__badge { align-self: flex-start; font-size: 22rpx; font-weight: 700; background: #ea580c; color: #fff; padding: 4rpx 14rpx; border-radius: 999rpx; margin-bottom: 4rpx; } .face-journey-revenue__title { font-size: 28rpx; font-weight: 700; color: #9a3412; } .face-journey-revenue__desc { font-size: 22rpx; color: #9a3412; opacity: 0.75; line-height: 1.55; } .face-journey-revenue__cta { font-size: 24rpx; color: #c2410c; font-weight: 700; padding: 14rpx 18rpx; background: #fff; border-radius: 14rpx; flex-shrink: 0; border: 2rpx solid #fdba74; } /* ========== 底部固定操作栏(三按钮常驻) ========== */ .result-action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: stretch; gap: 12rpx; padding: 16rpx 20rpx calc(16rpx + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); border-top: 1rpx solid #eceff4; box-shadow: 0 -6rpx 24rpx rgba(15, 23, 42, 0.08); backdrop-filter: saturate(150%) blur(10rpx); } .result-action-bar__btn { flex: 1; min-height: 96rpx; margin: 0; padding: 10rpx 8rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4rpx; border-radius: 20rpx; background: #f3f4f6; color: #1f2937; font-size: 24rpx; line-height: 1.2; text-align: center; border: none; box-sizing: border-box; } .result-action-bar__btn::after { border: none; } .result-action-bar__ic { font-size: 30rpx; line-height: 1; } .result-action-bar__label { font-size: 22rpx; font-weight: 600; color: #1f2937; letter-spacing: 0.5rpx; } .result-action-bar__btn--test { background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); } .result-action-bar__btn--test .result-action-bar__label { color: #4338ca; } .result-action-bar__btn--deep { background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%); } .result-action-bar__btn--deep .result-action-bar__label { color: #a21caf; } .result-action-bar__btn--share { background: linear-gradient(135deg, #ff6b9d 0%, #e63946 100%); box-shadow: 0 6rpx 20rpx rgba(230, 57, 70, 0.35); flex-direction: row; gap: 10rpx; padding: 10rpx 14rpx; } .result-action-bar__btn--share .result-action-bar__ic { font-size: 34rpx; } .result-action-bar__share-body { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; } .result-action-bar__btn--share .result-action-bar__label { color: #fff; font-size: 22rpx; font-weight: 600; } .result-action-bar__label-hl { color: #fff; font-size: 32rpx; font-weight: 800; letter-spacing: 1rpx; text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.18); }