diff --git a/mpuniapp/pages/portal/index.uvue b/mpuniapp/pages/portal/index.uvue index 12e7583..6040ffd 100644 --- a/mpuniapp/pages/portal/index.uvue +++ b/mpuniapp/pages/portal/index.uvue @@ -213,11 +213,11 @@ {{ textOf('card.ai_chat') }} - + - @@ -1277,52 +1277,41 @@ onUnload(() => { color: var(--oc-ai, #7C5CFF); } -/* 5. 单屏唯一定位主 CTA (现代极简悬浮胶囊,透气留白,告别死板通栏横条) */ +/* 5. 靠右侧核心主 CTA (图标形式,正圆微光晕 FAB,彻底释放屏幕中下部空间) */ .portal-cta-bar { position: fixed; - left: 0; - right: 0; + inset-inline-end: 16px; bottom: calc(16px + var(--window-bottom, 0px) + env(safe-area-inset-bottom, 0px)); - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - pointer-events: none; z-index: 100; + display: flex; + align-items: center; + justify-content: center; } .primary-cta-btn { - pointer-events: auto; - height: 44px; - min-height: 44px; - width: auto; - min-width: 150px; - max-width: 220px; - padding: 0 24px; + width: 48px; + height: 48px; + min-width: 48px; + min-height: 48px; + padding: 0; background: var(--oc-primary-gradient, linear-gradient(135deg, #00A3FF 0%, #0B63E5 100%)); border-radius: var(--oc-radius-pill, 9999px); - box-shadow: 0 8px 24px rgba(0, 136, 255, 0.26), 0 2px 6px rgba(11, 99, 229, 0.12); + box-shadow: 0 8px 24px rgba(0, 136, 255, 0.35), 0 2px 6px rgba(11, 99, 229, 0.16); border: 1px solid rgba(255, 255, 255, 0.25); display: flex; - flex-direction: row; align-items: center; justify-content: center; cursor: pointer; - transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1); + transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1); } .primary-cta-btn:active { opacity: 0.85; + transform: scale(0.95); } -.primary-cta-btn-text { +.primary-cta-btn-icon { color: #FFFFFF; - font-size: 14px; - font-weight: 600; - letter-spacing: 0.4px; -} -.primary-cta-btn-arrow { - color: rgba(255, 255, 255, 0.85); - font-size: 13px; - font-weight: 600; - margin-inline-start: 4px; + font-size: 20px; + font-weight: 700; + line-height: 1; } /* 6. 商务预约排期卡片与抽屉样式 (Bento Grid Appointment & Bottom Sheet) */ diff --git a/mpuniapp/tests/portal-owner-mode.test.ts b/mpuniapp/tests/portal-owner-mode.test.ts index e7f773d..7531ea5 100644 --- a/mpuniapp/tests/portal-owner-mode.test.ts +++ b/mpuniapp/tests/portal-owner-mode.test.ts @@ -168,24 +168,25 @@ test('5. 多语言文案解析与主客态映射审查', () => { ); }); -test('6. 主 CTA 悬浮胶囊形态与呼吸感视觉规范审查', () => { +test('6. 主 CTA 靠右侧图标形式与悬浮触控规范审查', () => { const content = fs.readFileSync(portalUvuePath, 'utf-8'); assert.ok( + content.includes('inset-inline-end: 16px') || content.includes('right: 16px'), + '主 CTA 必须靠右侧布局 (inset-inline-end: 16px)' + ); + assert.ok( + content.includes('border-radius: 50%') || content.includes('border-radius: var(--oc-radius-pill, 9999px);') || content.includes('border-radius: 9999px;'), - 'primary-cta-btn 必须使用胶囊 Pill 圆角 (9999px) 替代沉重矩形' + '主 CTA 必须使用圆形或大圆角图标形态' ); assert.ok( - content.includes('max-width: 220px') || content.includes('min-width: 150px'), - 'primary-cta-btn 严禁撑满全屏,必须使用精致收窄胶囊尺寸' + content.includes('height: 48px') || content.includes('min-height: 44px'), + '主 CTA 触控尺寸必须满足规范 (>= 44px)' ); assert.ok( - content.includes('.portal-cta-bar') && content.includes('pointer-events: none;'), - 'portal-cta-bar 容器必须开启 pointer-events: none 以实现居中悬浮呼吸感' - ); - assert.ok( - content.includes('.primary-cta-btn') && content.includes('pointer-events: auto;'), - 'primary-cta-btn 自身必须显式开启 pointer-events: auto' + content.includes('env(safe-area-inset-bottom') && content.includes('var(--window-bottom'), + '主 CTA 必须适配视口安全区与 TabBar 避让' ); });