style(portal): 彻底去除右侧主CTA图标按钮边缘阴影与系统默认边框,保证纯净平滑正圆
这个提交包含在:
@@ -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 边缘严禁携带弥散阴影,保证纯净平滑边缘'
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
在新工单中引用
屏蔽一个用户