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