feat(mobile): finish employee app page polish
This commit is contained in:
@@ -2,12 +2,23 @@
|
||||
<view class="page sop-page employee-page-shell">
|
||||
<view class="sop-head">
|
||||
<text class="employee-kicker sop-eyebrow">SOP · 话术 · 工作流程</text>
|
||||
<text class="page-title">问师傅</text>
|
||||
<text class="page-subtitle">直接问工作中的 SOP、话术和流程。答案附带可追溯的知识库依据。</text>
|
||||
<text class="page-title">问</text>
|
||||
<text class="page-subtitle">数字师傅 · SOP问答</text>
|
||||
<text class="sop-context">管家（生活顾问） · 住宅项目</text>
|
||||
<text class="toolbar-tip">先把问题问清楚，再按需生成总结卡，不伪造分类能力。</text>
|
||||
</view>
|
||||
|
||||
<view class="panel query-panel employee-card">
|
||||
<view class="query-hero">
|
||||
<view class="query-copy">
|
||||
<text class="query-title">问师傅</text>
|
||||
<text class="query-subtitle">直接问工作中的 SOP、话术和流程</text>
|
||||
</view>
|
||||
<view class="query-visual" aria-hidden="true">
|
||||
<view class="query-bubble primary"><text>•••</text></view>
|
||||
<view class="query-bubble secondary"><text>•••</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<textarea
|
||||
v-model="query"
|
||||
class="textarea sop-query-textarea"
|
||||
@@ -26,6 +37,21 @@
|
||||
<text v-if="message" class="status-message">{{ message }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="loggedIn && !result" class="knowledge-tip-card employee-card">
|
||||
<view class="knowledge-tip-icon">⌕</view>
|
||||
<view class="knowledge-tip-copy">
|
||||
<text class="knowledge-tip-title">知识库引用可追溯</text>
|
||||
<text class="knowledge-tip-desc">答案来自标准 SOP、附件来源，查得清楚、用得放心</text>
|
||||
</view>
|
||||
<text class="knowledge-tip-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<view v-if="loggedIn && !result && !loading" class="answer-empty employee-card">
|
||||
<text class="answer-empty-icon">•••</text>
|
||||
<text class="answer-empty-title">暂无相关回答</text>
|
||||
<text class="answer-empty-desc">换个问题试试吧</text>
|
||||
</view>
|
||||
|
||||
<view v-if="!loggedIn" class="panel login-panel employee-card">
|
||||
<view>
|
||||
<text class="panel-title">需要登录</text>
|
||||
@@ -888,4 +914,313 @@ onShow(() => {
|
||||
color: #78350f;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
/* 视觉稿对齐：与练页统一的红白卡片体系 */
|
||||
.sop-page {
|
||||
padding: 0 18px 96px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.sop-head {
|
||||
margin: 0 -18px;
|
||||
padding: 34px 18px 24px;
|
||||
background: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sop-head::after,
|
||||
.sop-eyebrow,
|
||||
.toolbar-tip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sop-head .page-title {
|
||||
color: #111111;
|
||||
font-size: 38px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.sop-head .page-subtitle {
|
||||
max-width: none;
|
||||
margin-top: 10px;
|
||||
color: #858991;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sop-context {
|
||||
display: inline-flex;
|
||||
margin-top: 14px;
|
||||
padding: 7px 14px;
|
||||
border: 1px solid #f8d7d8;
|
||||
border-radius: 999px;
|
||||
background: #fff7f7;
|
||||
color: #d51b2b;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.query-panel {
|
||||
margin-top: 18px;
|
||||
padding: 22px 18px 18px;
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 8px 24px rgba(24, 28, 36, 0.06);
|
||||
}
|
||||
|
||||
.query-panel .textarea,
|
||||
.sop-query-textarea {
|
||||
min-height: 126px;
|
||||
height: 126px;
|
||||
border-color: #dedfe2;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.query-panel .chip {
|
||||
min-height: 40px;
|
||||
border-color: #e52323;
|
||||
border-radius: 999px;
|
||||
background: #ffffff;
|
||||
color: #e52323;
|
||||
}
|
||||
|
||||
.query-submit {
|
||||
min-height: 54px;
|
||||
margin-top: 8px;
|
||||
border-radius: 18px;
|
||||
background: #e52323;
|
||||
box-shadow: 0 8px 16px rgba(229, 35, 35, 0.18);
|
||||
}
|
||||
|
||||
.knowledge-tip-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
padding: 16px;
|
||||
border: 0;
|
||||
border-radius: 18px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 8px 24px rgba(24, 28, 36, 0.05);
|
||||
}
|
||||
|
||||
.knowledge-tip-icon {
|
||||
display: flex;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 14px;
|
||||
background: #fff0f1;
|
||||
color: #e52323;
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.knowledge-tip-copy {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.knowledge-tip-title {
|
||||
color: #25282d;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.knowledge-tip-desc {
|
||||
color: #858991;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.knowledge-tip-arrow {
|
||||
color: #8c9098;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.answer-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 14px;
|
||||
padding: 28px 18px;
|
||||
flex-direction: column;
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 8px 24px rgba(24, 28, 36, 0.04);
|
||||
}
|
||||
|
||||
.answer-empty-icon {
|
||||
color: #f2b4b6;
|
||||
font-size: 22px;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
.answer-empty-title {
|
||||
margin-top: 12px;
|
||||
color: #666a72;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.answer-empty-desc {
|
||||
margin-top: 6px;
|
||||
color: #9a9da3;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.answer-panel {
|
||||
border-color: #f0dfe0;
|
||||
border-left-color: #e52323;
|
||||
}
|
||||
|
||||
.answer-panel .panel-title,
|
||||
.result-score {
|
||||
color: #e52323;
|
||||
}
|
||||
|
||||
.keypoint,
|
||||
.speech-bubble {
|
||||
border-left-color: #e52323;
|
||||
background: #fff5f5;
|
||||
}
|
||||
|
||||
.cautions,
|
||||
.reminder-item {
|
||||
border-left-color: #e52323;
|
||||
background: #fff5f5;
|
||||
color: #b71925;
|
||||
}
|
||||
|
||||
.feedback-actions .active {
|
||||
border-color: #e52323;
|
||||
background: #fff0f1;
|
||||
color: #e52323;
|
||||
}
|
||||
|
||||
.feedback-actions .negative {
|
||||
border-color: #e52323;
|
||||
background: #fff0f1;
|
||||
color: #b71925;
|
||||
}
|
||||
|
||||
.summary-panel {
|
||||
border-color: #f0dfe0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.summary-panel .ghost-button {
|
||||
border-color: #e52323;
|
||||
background: #ffffff;
|
||||
color: #e52323;
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
border-top-color: #e52323;
|
||||
}
|
||||
|
||||
.badge-num,
|
||||
.timeline-node {
|
||||
background: #e52323;
|
||||
}
|
||||
|
||||
.a-badge {
|
||||
background: #fff0f1;
|
||||
color: #e52323;
|
||||
}
|
||||
|
||||
.reminder-text {
|
||||
color: #b71925;
|
||||
}
|
||||
|
||||
/* 原型对齐：问师傅主卡的标题与对话插画 */
|
||||
.query-hero {
|
||||
position: relative;
|
||||
min-height: 84px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.query-copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
max-width: 66%;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.query-title {
|
||||
color: #111111;
|
||||
font-size: 30px;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.query-subtitle {
|
||||
color: #858991;
|
||||
font-size: 15px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.query-visual {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -4px;
|
||||
width: 42%;
|
||||
height: 96px;
|
||||
border-radius: 50%;
|
||||
background: #fff3f3;
|
||||
}
|
||||
|
||||
.query-bubble {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.query-bubble.primary {
|
||||
top: 7px;
|
||||
right: 26px;
|
||||
width: 92px;
|
||||
height: 56px;
|
||||
border-radius: 28px 28px 28px 10px;
|
||||
background: #f58d91;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.query-bubble.primary::after {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 18px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #f58d91;
|
||||
content: '';
|
||||
transform: rotate(28deg);
|
||||
}
|
||||
|
||||
.query-bubble.secondary {
|
||||
right: 2px;
|
||||
bottom: 5px;
|
||||
width: 70px;
|
||||
height: 42px;
|
||||
border-radius: 22px 22px 8px 22px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 5px 14px rgba(229, 35, 35, 0.08);
|
||||
color: #f3b7b9;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.query-panel .query-caption {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user