fix(mobile): align practice prep with figma
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<view class="page practice-page employee-page-shell">
|
||||
<view class="practice-head">
|
||||
<text class="page-title">练</text>
|
||||
<text class="page-subtitle">数字师傅 · 场景训练</text>
|
||||
<text class="page-title">训练前预习</text>
|
||||
<text class="page-subtitle">先掌握要点，再开始场景练习</text>
|
||||
</view>
|
||||
|
||||
<view v-if="message" class="status-message">{{ message }}</view>
|
||||
@@ -17,17 +17,30 @@
|
||||
|
||||
<view v-if="loggedIn" class="panel scenario-card employee-card">
|
||||
<view class="scenario-headline">
|
||||
<text class="scenario-title">场景模拟</text>
|
||||
<text class="scenario-desc">先看预习卡，再开始练习</text>
|
||||
<text class="scenario-title">{{ activeScenarioName }}</text>
|
||||
<text class="scenario-desc">生活顾问 · 业主服务场景</text>
|
||||
</view>
|
||||
<view class="scenario-visual" aria-hidden="true">
|
||||
<view class="visual-sheet" />
|
||||
<view class="visual-bubble"><text>•••</text></view>
|
||||
<view class="scenario-persona">
|
||||
<view class="persona-avatar">业</view>
|
||||
<view class="persona-copy">
|
||||
<text class="persona-title">待处理业主</text>
|
||||
<text class="persona-desc">先听清诉求，再回应</text>
|
||||
</view>
|
||||
<text class="persona-state">待进入</text>
|
||||
</view>
|
||||
<view v-if="prepCard" class="prep-card">
|
||||
<view class="prep-mini"><text class="prep-label">要点</text><text>关键要点先掌握</text></view>
|
||||
<view class="prep-mini"><text class="prep-label">红线</text><text>风险红线要注意</text></view>
|
||||
<view class="prep-mini"><text class="prep-label">可说话术</text><text>有效话术可参考</text></view>
|
||||
<view v-if="prepCard" class="prep-sections">
|
||||
<view class="prep-section prep-section-points">
|
||||
<text class="prep-section-title">要点</text>
|
||||
<text v-for="item in prepCard.keyPoints.slice(0, 3)" :key="`point-${item}`" class="prep-line"><text class="prep-mark">✓</text>{{ item }}</text>
|
||||
</view>
|
||||
<view class="prep-section prep-section-redline">
|
||||
<text class="prep-section-title">红线</text>
|
||||
<text v-for="item in prepCard.redLines.slice(0, 3)" :key="`red-${item}`" class="prep-line"><text class="prep-mark">!</text>{{ item }}</text>
|
||||
</view>
|
||||
<view class="prep-section prep-section-script">
|
||||
<text class="prep-section-title">可说话术</text>
|
||||
<text v-for="item in prepCard.scripts.slice(0, 3)" :key="`script-${item}`" class="prep-line"><text class="prep-mark">✓</text>{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text v-else-if="prepLoading" class="muted">预习卡加载中</text>
|
||||
<button
|
||||
@@ -36,7 +49,7 @@
|
||||
:disabled="busy"
|
||||
@click="start()"
|
||||
>
|
||||
{{ status === 'finished' ? '再练一次' : '开始练习' }}
|
||||
{{ status === 'finished' ? '再练一次' : '我已准备好，开始练习' }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
@@ -1616,4 +1629,143 @@ onShow(() => {
|
||||
color: var(--employee-muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.practice-head .page-title {
|
||||
color: #1f2024;
|
||||
font-size: 29px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.practice-head .page-subtitle {
|
||||
color: #8a8d93;
|
||||
}
|
||||
|
||||
.scenario-card {
|
||||
padding: 20px 16px 16px;
|
||||
border-radius: 24px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 10px 26px rgba(24, 28, 36, 0.06);
|
||||
}
|
||||
|
||||
.scenario-headline {
|
||||
max-width: none;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.scenario-title {
|
||||
color: #25282d;
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
.scenario-desc {
|
||||
color: #8a8d93;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.scenario-persona {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 2px;
|
||||
padding: 14px;
|
||||
border: 1px solid #ffd9dc;
|
||||
border-radius: 16px;
|
||||
background: #fff8f8;
|
||||
}
|
||||
|
||||
.persona-avatar {
|
||||
display: flex;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
flex: 0 0 48px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #ffe1e4;
|
||||
color: #e70014;
|
||||
font-size: 19px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.persona-copy {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.persona-title {
|
||||
color: #25282d;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.persona-desc {
|
||||
color: #8a8d93;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.persona-state {
|
||||
padding: 6px 9px;
|
||||
border-radius: 12px;
|
||||
background: #fff0f1;
|
||||
color: #e70014;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.prep-sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.prep-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
border: 1px solid #f0f1f3;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.prep-section-title {
|
||||
color: #25282d;
|
||||
font-size: 19px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.prep-section-redline {
|
||||
border-color: #ffe0e2;
|
||||
background: #fffafa;
|
||||
}
|
||||
|
||||
.prep-section-redline .prep-section-title,
|
||||
.prep-section-redline .prep-mark {
|
||||
color: #e70014;
|
||||
}
|
||||
|
||||
.prep-line {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
color: #858990;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.prep-mark {
|
||||
display: inline-block;
|
||||
width: 17px;
|
||||
color: #8c929a;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.scenario-card .primary-button {
|
||||
margin-top: 4px;
|
||||
background: linear-gradient(135deg, #ed1f28, #ff4b4d);
|
||||
box-shadow: 0 8px 16px rgba(231, 0, 20, 0.18);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user