refactor(mobile-uni): 彻底移除底部悬浮胶囊Bar，恢复原生App纯净卡片流与流内快捷动作
This commit is contained in:
@@ -331,15 +331,18 @@
|
|||||||
{{ showPrepDetail ? '收起 ▲' : '展开红线与推荐话术 ▼' }}
|
{{ showPrepDetail ? '收起 ▲' : '展开红线与推荐话术 ▼' }}
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
<view v-else-if="!prepLoading" class="app-empty-state">
|
<!-- 流式嵌入快捷操作入口 -->
|
||||||
<view class="empty-icon-circle circle-blue">
|
<view class="sop-inline-actions">
|
||||||
<uni-icons type="paperplane-filled" size="22" color="#2d80ff" />
|
<button class="sop-act-btn outline" @click="askTopic(activeTopic)">
|
||||||
</view>
|
<uni-icons type="chatboxes" size="15" color="#1a1a1a" />
|
||||||
<text class="empty-title">预习准备</text>
|
<text class="sop-act-text">咨询师傅</text>
|
||||||
<text class="empty-desc">暂无可用预习卡，可直接开启实操对练！</text>
|
</button>
|
||||||
|
<button class="sop-act-btn primary-gradient-btn" @click="goPractice">
|
||||||
|
<uni-icons type="paperplane-filled" size="15" color="#ffffff" />
|
||||||
|
<text class="sop-act-text text-white">开启实操对练</text>
|
||||||
|
</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="dock-spacer" />
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- Tab 3: 考试与资格 (岗前任务 + 考试 + 上岗资格) -->
|
<!-- Tab 3: 考试与资格 (岗前任务 + 考试 + 上岗资格) -->
|
||||||
@@ -445,19 +448,6 @@
|
|||||||
<text class="empty-desc">等待 HR 或组织系统派发正式任务</text>
|
<text class="empty-desc">等待 HR 或组织系统派发正式任务</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="dock-spacer" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 3. 原生 App 悬浮 Dock (Floating CTA Bar) -->
|
|
||||||
<view class="floating-action-dock">
|
|
||||||
<button class="dock-btn secondary-dock-btn" @click="askTopic(activeTopic)">
|
|
||||||
<uni-icons type="chatboxes-filled" size="18" color="#e60012" />
|
|
||||||
<text class="dock-btn-text">问师傅</text>
|
|
||||||
</button>
|
|
||||||
<button class="dock-btn primary-dock-btn" @click="goPractice">
|
|
||||||
<uni-icons type="paperplane-filled" size="18" color="#ffffff" />
|
|
||||||
<text class="dock-btn-text text-white">⚡ 练一遍</text>
|
|
||||||
</button>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
@@ -926,7 +916,7 @@ onUnload(invalidateRequests);
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.learning-page {
|
.learning-page {
|
||||||
padding-bottom: 120px;
|
padding-bottom: 32px;
|
||||||
background: #f7f8fa;
|
background: #f7f8fa;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
@@ -1086,7 +1076,7 @@ onUnload(invalidateRequests);
|
|||||||
|
|
||||||
/* 3. Tab Content View */
|
/* 3. Tab Content View */
|
||||||
.tab-content-view {
|
.tab-content-view {
|
||||||
padding: 0 16px 140px;
|
padding: 0 16px 24px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 14px;
|
gap: 14px;
|
||||||
@@ -1384,60 +1374,41 @@ onUnload(invalidateRequests);
|
|||||||
.qualification-status.not-configured { background: #fff8e6; color: #d97706; }
|
.qualification-status.not-configured { background: #fff8e6; color: #d97706; }
|
||||||
.qualification-status.blocked, .qualification-status.expired { background: #fff4f4; color: #e60012; }
|
.qualification-status.blocked, .qualification-status.expired { background: #fff4f4; color: #e60012; }
|
||||||
|
|
||||||
/* 4. Floating Action Dock */
|
/* In-flow SOP Inline Actions */
|
||||||
.floating-action-dock {
|
.sop-inline-actions {
|
||||||
position: fixed;
|
|
||||||
bottom: 60px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: calc(100% - 32px);
|
|
||||||
max-width: 440px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 8px;
|
margin-top: 16px;
|
||||||
background: rgba(255, 255, 255, 0.94);
|
padding-top: 14px;
|
||||||
backdrop-filter: blur(16px);
|
border-top: 1px dashed #e2e8f0;
|
||||||
-webkit-backdrop-filter: blur(16px);
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
||||||
border-radius: 999px;
|
|
||||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
|
|
||||||
z-index: 99;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dock-btn {
|
.sop-act-btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
height: 44px;
|
height: 40px;
|
||||||
border-radius: 999px;
|
border-radius: 12px;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0;
|
font-size: 13px;
|
||||||
transition: transform 0.15s ease;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dock-btn:active {
|
.sop-act-btn.outline {
|
||||||
transform: scale(0.97);
|
|
||||||
}
|
|
||||||
|
|
||||||
.secondary-dock-btn {
|
|
||||||
background: #f1f5f9;
|
background: #f1f5f9;
|
||||||
|
color: #1a1a1a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary-dock-btn {
|
.sop-act-text {
|
||||||
background: linear-gradient(135deg, #ff4d4f 0%, #e60012 100%);
|
font-size: 13px;
|
||||||
box-shadow: 0 6px 16px rgba(230, 0, 18, 0.28);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dock-btn-text {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #1a1a1a;
|
color: #1a1a1a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dock-btn-text.text-white {
|
.sop-act-text.text-white {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user