style(portal): 彻底去除右侧主CTA图标按钮边缘阴影与系统默认边框,保证纯净平滑正圆

这个提交包含在:
wikiboss
2026-09-21 15:22:50 +08:00
父节点 803561ff38
当前提交 cb75e16214
共有 2 个文件被更改,包括 101 次插入 和 55 次删除

查看文件

@@ -221,72 +221,105 @@
</button>
</view>
<!-- 6. 商务预约排期抽屉 (Bottom Sheet) -->
<!-- 6. 商务预约与需求提报抽屉 (Bottom Sheet) -->
<view v-if="isAppointmentSheetOpen" class="appointment-sheet-mask" @click="closeAppointmentSheet">
<view class="appointment-sheet" :class="pageRtlClass" @click.stop>
<view class="sheet-handle"></view>
<view class="sheet-header">
<view class="sheet-title-row">
<text class="sheet-title">{{ textOf('portal.appointment') }}</text>
<text class="sheet-close" @click="closeAppointmentSheet">×</text>
<!-- 成功状态卡片 -->
<view v-if="appointmentSubmitted" class="sheet-success-box">
<view class="sheet-success-ring">
<view class="sheet-success-check"></view>
</view>
<text class="sheet-subtitle">{{ state.card!.name }} · {{ state.card!.company }}</text>
<text class="sheet-success-title">{{ textOf('portal.appointment_success_tip') }}</text>
<text class="sheet-success-sub">{{ state.card!.name }} ({{ state.card!.company }})</text>
<button class="primary-cta-btn appointment-submit-btn" @click="closeAppointmentSheet">
<text class="primary-cta-btn-text">{{ textOf('common.confirm') }}</text>
</button>
</view>
<view class="sheet-meeting-details">
<view class="sheet-detail-row">
<text class="sheet-detail-label">DURATION</text>
<text class="sheet-detail-val">30 Min</text>
</view>
<view class="sheet-detail-row">
<text class="sheet-detail-label">TIMEZONE</text>
<text class="sheet-detail-val">{{ state.card!.timezone || 'UTC+8' }}</text>
</view>
</view>
<!-- 日历同步通道列表 -->
<view class="calendar-channels-list">
<!-- Google Calendar -->
<view class="calendar-channel-item" @click="handleCalendarSync('google')">
<view class="channel-info">
<view class="channel-icon-badge google-badge">
<text class="channel-icon-text">G</text>
</view>
<view class="channel-texts">
<text class="channel-name">{{ textOf('portal.google_cal') }}</text>
<text class="channel-sub">Google Calendar Web</text>
</view>
<!-- 预约与需求提报表单 -->
<view v-else class="appointment-form-wrap">
<view class="sheet-header">
<view class="sheet-title-row">
<text class="sheet-title">{{ textOf('portal.appointment_form_title') }}</text>
<text class="sheet-close" @click="closeAppointmentSheet">×</text>
</view>
<text class="channel-action-arrow">↗</text>
<text class="sheet-subtitle">{{ textOf('portal.appointment_form_desc') }}</text>
</view>
<!-- Outlook / Office 365 -->
<view class="calendar-channel-item" @click="handleCalendarSync('outlook')">
<view class="channel-info">
<view class="channel-icon-badge outlook-badge">
<text class="channel-icon-text">O</text>
</view>
<view class="channel-texts">
<text class="channel-name">{{ textOf('portal.outlook_cal') }}</text>
<text class="channel-sub">Outlook / Office 365</text>
<!-- 期望会谈形式快捷胶囊 -->
<view class="sheet-field">
<text class="sheet-field-label">{{ textOf('portal.appointment_time') }}</text>
<view class="sheet-time-chips">
<view
v-for="opt in appointmentTimeOptions"
:key="opt.key"
class="sheet-time-chip"
:class="{ 'sheet-time-chip-active': appointmentForm.preferredTime === opt.label }"
@click="selectPreferredTime(opt.label)"
>
<text
class="sheet-time-chip-text"
:class="{ 'sheet-time-chip-text-active': appointmentForm.preferredTime === opt.label }"
>{{ opt.label }}</text>
</view>
</view>
<text class="channel-action-arrow">↗</text>
</view>
<!-- RFC 5545 ICS 日历文件 -->
<view class="calendar-channel-item" @click="handleCalendarSync('ics')">
<view class="channel-info">
<view class="channel-icon-badge ics-badge">
<text class="channel-icon-text">ICS</text>
</view>
<view class="channel-texts">
<text class="channel-name">{{ textOf('portal.ics_download') }}</text>
<text class="channel-sub">Apple / Mac / Windows / RFC 5545</text>
</view>
</view>
<text class="channel-action-arrow">↓</text>
<!-- 姓名输入 (必填) -->
<view class="sheet-field">
<text class="sheet-field-label">{{ textOf('portal.appointment_name') }} *</text>
<input
class="sheet-field-input"
v-model="appointmentForm.name"
:placeholder="textOf('portal.appointment_name')"
:disabled="appointmentFormSubmitting"
/>
</view>
<!-- 联系方式输入 (必填) -->
<view class="sheet-field">
<text class="sheet-field-label">{{ textOf('portal.appointment_contact') }} *</text>
<input
class="sheet-field-input"
v-model="appointmentForm.contact"
:placeholder="textOf('portal.appointment_contact')"
:disabled="appointmentFormSubmitting"
/>
</view>
<!-- 公司名称 (选填) -->
<view class="sheet-field">
<text class="sheet-field-label">{{ textOf('portal.appointment_company') }}</text>
<input
class="sheet-field-input"
v-model="appointmentForm.company"
:placeholder="textOf('portal.appointment_company')"
:disabled="appointmentFormSubmitting"
/>
</view>
<!-- 需求与议题说明 (选填) -->
<view class="sheet-field">
<text class="sheet-field-label">{{ textOf('portal.appointment_notes') }}</text>
<textarea
class="sheet-field-textarea"
v-model="appointmentForm.notes"
:placeholder="textOf('portal.appointment_notes_placeholder')"
:disabled="appointmentFormSubmitting"
/>
</view>
<!-- 提交按钮 -->
<button
class="primary-cta-btn appointment-submit-btn"
:class="{ 'appointment-submit-btn-disabled': appointmentFormSubmitting }"
:disabled="appointmentFormSubmitting"
@click="submitAppointmentForm"
>
<text class="primary-cta-btn-text">{{ appointmentFormSubmitting ? textOf('portal.appointment_submitting') : textOf('portal.appointment_submit') }}</text>
</button>
</view>
</view>
</view>
@@ -1277,7 +1310,7 @@ onUnload(() => {
color: var(--oc-ai, #7C5CFF);
}
/* 5. 靠右侧核心主 CTA (图标形式,正圆微光晕 FAB,彻底释放屏幕中下部空间) */
/* 5. 靠右侧核心主 CTA (图标形式,纯净无阴影正圆 FAB) */
.portal-cta-bar {
position: fixed;
inset-inline-end: 16px;
@@ -1286,6 +1319,9 @@ onUnload(() => {
display: flex;
align-items: center;
justify-content: center;
background: transparent;
box-shadow: none;
border: none;
}
.primary-cta-btn {
width: 48px;
@@ -1295,14 +1331,20 @@ onUnload(() => {
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.35), 0 2px 6px rgba(11, 99, 229, 0.16);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: none;
border: none;
border-width: 0;
outline: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
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::after {
border: none;
display: none;
}
.primary-cta-btn:active {
opacity: 0.85;
transform: scale(0.95);

查看文件

@@ -188,5 +188,9 @@ test('6. 主 CTA 靠右侧图标形式与悬浮触控规范审查', () => {
content.includes('env(safe-area-inset-bottom') && content.includes('var(--window-bottom'),
'主 CTA 必须适配视口安全区与 TabBar 避让'
);
assert.ok(
content.includes('box-shadow: none;'),
'主 CTA 边缘严禁携带弥散阴影,保证纯净平滑边缘'
);
});