feat(mobile): 重做员工端首页、问答和训练页视觉
统一员工端 tabBar、共享卡片和三大核心页面的视觉基础，同时保持现有移动端业务流程不变。补充 H5 输入兼容、页面结构和训练回滚行为的回归测试。
This commit is contained in:
@@ -1,27 +1,32 @@
|
||||
<template>
|
||||
<view class="page sop-page">
|
||||
<text class="page-title">问师傅</text>
|
||||
<text class="page-subtitle">直接问工作中的 SOP、话术和流程。答案来自知识库检索,引用在后面。</text>
|
||||
<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="toolbar-tip">先把问题问清楚，再按需生成总结卡，不伪造分类能力。</text>
|
||||
</view>
|
||||
|
||||
<view class="panel query-panel">
|
||||
<view class="panel query-panel employee-card">
|
||||
<textarea
|
||||
v-model="query"
|
||||
class="textarea"
|
||||
class="textarea sop-query-textarea"
|
||||
maxlength="200"
|
||||
:placeholder="quickQuestionPlaceholder"
|
||||
/>
|
||||
<text class="query-caption">常见问题可以直接点下面快捷问法，结果会保留引用依据。</text>
|
||||
<view class="chip-row">
|
||||
<button v-for="item in quickQuestions" :key="item" class="chip" :disabled="loading" @click="useQuickQuestion(item)">
|
||||
{{ item }}
|
||||
</button>
|
||||
</view>
|
||||
<button class="primary-button" :disabled="loading" @click="search">
|
||||
{{ loading ? '检索中' : '查询' }}
|
||||
<button class="primary-button query-submit" :disabled="loading" @click="search">
|
||||
{{ loading ? '检索中' : '问老师傅' }}
|
||||
</button>
|
||||
<text v-if="message" class="status-message">{{ message }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="!loggedIn" class="panel login-panel">
|
||||
<view v-if="!loggedIn" class="panel login-panel employee-card">
|
||||
<view>
|
||||
<text class="panel-title">需要登录</text>
|
||||
<text class="muted block">登录后才能查询 SOP、生成总结卡并反馈答案。</text>
|
||||
@@ -29,7 +34,7 @@
|
||||
<button class="primary-button login-button" @click="goLogin">去登录</button>
|
||||
</view>
|
||||
|
||||
<view v-if="result" class="panel answer-panel">
|
||||
<view v-if="result" class="panel answer-panel employee-card">
|
||||
<text class="panel-title">直给答案</text>
|
||||
<text class="answer-text">{{ result.answer || '未生成直接答案,请查看下方引用。' }}</text>
|
||||
|
||||
@@ -54,16 +59,16 @@
|
||||
</button>
|
||||
<button
|
||||
class="secondary-button"
|
||||
:class="{ active: feedbackVerdict === 'down' }"
|
||||
:class="{ active: feedbackVerdict === 'down', negative: feedbackVerdict === 'down' }"
|
||||
:disabled="feedbackSubmitting || Boolean(feedbackVerdict)"
|
||||
@click="feedback('down')"
|
||||
>
|
||||
不准
|
||||
需要复核
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="result?.snippets?.length" class="panel">
|
||||
<view v-if="result?.snippets?.length" class="panel sources-panel">
|
||||
<text class="panel-title">引用依据</text>
|
||||
<view v-for="(snippet, index) in result.snippets" :key="`${snippet.docTitle}-${index}`" class="snippet">
|
||||
<text class="snippet-title">{{ snippet.docTitle }}</text>
|
||||
@@ -72,35 +77,81 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="result" class="panel summary-panel">
|
||||
<view v-if="result" class="panel summary-panel employee-card">
|
||||
<text class="panel-title">总结卡</text>
|
||||
<text class="muted">需要时再生成,避免每次查询都调用模型。</text>
|
||||
<text class="muted summary-copy">需要时再生成，适合把一段 SOP 整理成步骤卡、话术卡和提醒卡。</text>
|
||||
<button class="ghost-button" :disabled="summaryLoading" @click="buildSummaryCard">
|
||||
{{ summaryLoading ? '生成中' : '生成总结卡' }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view v-if="summaryCard" class="panel">
|
||||
<text class="panel-title">{{ summaryCard.title }}</text>
|
||||
<view class="summary-block">
|
||||
<text class="summary-heading">步骤</text>
|
||||
<text v-for="(step, index) in summaryCard.steps" :key="`${step.label}-${index}`" class="summary-line">
|
||||
{{ index + 1 }}. {{ step.label }}: {{ step.desc }}
|
||||
</text>
|
||||
</view>
|
||||
<view v-if="summaryCard.scripts.length" class="summary-block">
|
||||
<text class="summary-heading">可说话术</text>
|
||||
<text v-for="item in summaryCard.scripts" :key="item" class="summary-line">{{ item }}</text>
|
||||
</view>
|
||||
<view v-if="summaryCard.objections.length" class="summary-block">
|
||||
<text class="summary-heading">异议回应</text>
|
||||
<text v-for="item in summaryCard.objections" :key="item.concern" class="summary-line">
|
||||
{{ item.concern }}: {{ item.response }}
|
||||
</text>
|
||||
</view>
|
||||
<view v-if="summaryCard.reminders.length" class="summary-block">
|
||||
<text class="summary-heading">提醒</text>
|
||||
<text v-for="item in summaryCard.reminders" :key="item" class="summary-line">{{ item }}</text>
|
||||
<view v-if="summaryCard" class="modal-mask" @click="closeSummary">
|
||||
<view class="modal-card" @click.stop>
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">{{ summaryCard.title }}</text>
|
||||
<button class="modal-close" @click="closeSummary">×</button>
|
||||
</view>
|
||||
<scroll-view scroll-y class="modal-body">
|
||||
<view v-if="summaryCard.steps?.length" class="info-section">
|
||||
<view class="section-title-row">
|
||||
<text class="badge-num">1</text>
|
||||
<text class="info-section-title">核心步骤</text>
|
||||
</view>
|
||||
<view class="timeline">
|
||||
<view v-for="(step, index) in summaryCard.steps" :key="index" class="timeline-item">
|
||||
<view class="timeline-node">{{ index + 1 }}</view>
|
||||
<view class="timeline-content">
|
||||
<text class="timeline-label">{{ step.label }}</text>
|
||||
<text class="timeline-desc">{{ step.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="summaryCard.scripts?.length" class="info-section speech-section">
|
||||
<view class="section-title-row">
|
||||
<text class="badge-num">2</text>
|
||||
<text class="info-section-title">推荐话术</text>
|
||||
</view>
|
||||
<view class="speech-bubbles">
|
||||
<view v-for="(script, index) in summaryCard.scripts" :key="index" class="speech-bubble">
|
||||
<text class="quote-mark">“</text>
|
||||
<text class="speech-text">{{ script }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="summaryCard.objections?.length" class="info-section objection-section">
|
||||
<view class="section-title-row">
|
||||
<text class="badge-num">3</text>
|
||||
<text class="info-section-title">常见异议与回应</text>
|
||||
</view>
|
||||
<view class="objection-list">
|
||||
<view v-for="(obj, index) in summaryCard.objections" :key="index" class="objection-card">
|
||||
<view class="objection-q">
|
||||
<text class="q-badge">问</text>
|
||||
<text class="q-text">{{ obj.concern }}</text>
|
||||
</view>
|
||||
<view class="objection-a">
|
||||
<text class="a-badge">答</text>
|
||||
<text class="a-text">{{ obj.response }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="summaryCard.reminders?.length" class="info-section reminder-section">
|
||||
<view class="section-title-row">
|
||||
<text class="badge-num">4</text>
|
||||
<text class="info-section-title">师傅提醒</text>
|
||||
</view>
|
||||
<view class="reminder-list">
|
||||
<view v-for="(rem, index) in summaryCard.reminders" :key="index" class="reminder-item">
|
||||
<text class="reminder-text">{{ rem }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="modal-footer">
|
||||
<button class="primary-button footer-btn" @click="closeSummary">我知道了</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -259,6 +310,10 @@ const buildSummaryCard = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const closeSummary = () => {
|
||||
summaryCard.value = null;
|
||||
};
|
||||
|
||||
const goLogin = () => {
|
||||
rememberLoginRedirect('/pages/user/sop/index');
|
||||
uni.navigateTo({ url: '/pages/auth/login/index' });
|
||||
@@ -297,7 +352,53 @@ onShow(() => {
|
||||
|
||||
<style scoped>
|
||||
.sop-page {
|
||||
padding-bottom: 48px;
|
||||
padding: 0 18px 96px;
|
||||
background: linear-gradient(180deg, var(--employee-bg-soft) 0%, var(--employee-bg) 100%);
|
||||
}
|
||||
|
||||
.sop-head {
|
||||
position: relative;
|
||||
margin: 0 -18px;
|
||||
padding: 30px 28px 24px;
|
||||
background: linear-gradient(180deg, #eef4ff 0%, #f5f8fd 100%);
|
||||
}
|
||||
|
||||
.sop-head::after {
|
||||
position: absolute;
|
||||
right: 28px;
|
||||
bottom: 24px;
|
||||
width: 56px;
|
||||
height: 3px;
|
||||
background: #e70014;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.sop-eyebrow {
|
||||
display: inline-flex;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.sop-head .page-title {
|
||||
color: #1f2b3d;
|
||||
font-size: 31px;
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
.sop-head .page-subtitle {
|
||||
max-width: 292px;
|
||||
margin-top: 10px;
|
||||
color: #607086;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.toolbar-tip {
|
||||
display: block;
|
||||
max-width: 286px;
|
||||
margin-top: 14px;
|
||||
color: #315b8f;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.query-panel,
|
||||
@@ -308,30 +409,103 @@ onShow(() => {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.query-panel {
|
||||
margin-top: 22px;
|
||||
padding: 20px;
|
||||
border-top: 0;
|
||||
box-shadow: var(--employee-card-shadow);
|
||||
}
|
||||
|
||||
.sop-query-textarea {
|
||||
min-height: 112px;
|
||||
border-color: #d6deea;
|
||||
background: #f9fbff;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.query-caption {
|
||||
color: #6f7b8f;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.query-panel .textarea {
|
||||
min-height: 104px;
|
||||
height: 104px;
|
||||
border-color: #d9dade;
|
||||
border-radius: 7px;
|
||||
background: #fbfbfb;
|
||||
color: #25282d;
|
||||
}
|
||||
|
||||
.query-panel .chip-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.query-panel .chip {
|
||||
min-height: 38px;
|
||||
padding: 0 10px;
|
||||
border-color: #dbe5f4;
|
||||
border-radius: 999px;
|
||||
background: #f7faff;
|
||||
color: #47607f;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.query-submit {
|
||||
width: 100%;
|
||||
margin-top: 2px;
|
||||
min-height: 50px;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(135deg, #2f6bff, #5a8cff);
|
||||
box-shadow: 0 14px 28px rgba(47, 107, 255, 0.22);
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
gap: 14px;
|
||||
margin-top: 22px;
|
||||
border-left: 4px solid #e70014;
|
||||
box-shadow: var(--employee-card-shadow);
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
min-width: 84px;
|
||||
width: 96px;
|
||||
min-width: 96px;
|
||||
flex: 0 0 96px;
|
||||
padding: 0 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.answer-text {
|
||||
color: #0f172a;
|
||||
color: #243246;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.answer-panel {
|
||||
border-color: #d9e7de;
|
||||
border-left: 4px solid #168243;
|
||||
box-shadow: var(--employee-card-shadow);
|
||||
}
|
||||
|
||||
.answer-panel .panel-title {
|
||||
color: #168243;
|
||||
}
|
||||
|
||||
.keypoints {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -340,9 +514,10 @@ onShow(() => {
|
||||
|
||||
.keypoint {
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
background: #f8fafc;
|
||||
color: #334155;
|
||||
border-left: 3px solid #168243;
|
||||
border-radius: 5px;
|
||||
background: #f2f8f4;
|
||||
color: #45484e;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -352,9 +527,10 @@ onShow(() => {
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
background: #fff7ed;
|
||||
color: #9a3412;
|
||||
border-left: 3px solid #d98200;
|
||||
border-radius: 5px;
|
||||
background: #fff8e9;
|
||||
color: #855000;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
@@ -366,9 +542,29 @@ onShow(() => {
|
||||
}
|
||||
|
||||
.feedback-actions .active {
|
||||
border-color: #16a34a;
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
border-color: #168243;
|
||||
background: #edf7f0;
|
||||
color: #168243;
|
||||
}
|
||||
|
||||
.feedback-actions .negative {
|
||||
border-color: #e70014;
|
||||
background: #fff1f2;
|
||||
color: #bd0010;
|
||||
}
|
||||
|
||||
.sources-panel {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.sources-panel .panel-title {
|
||||
display: block;
|
||||
margin-top: 26px;
|
||||
color: #25282d;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.snippet {
|
||||
@@ -376,24 +572,26 @@ onShow(() => {
|
||||
margin-top: 12px;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
padding: 14px;
|
||||
border: 1px solid #e3e4e7;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 5px 14px rgba(37, 40, 45, 0.04);
|
||||
}
|
||||
|
||||
.snippet-title {
|
||||
color: #0f172a;
|
||||
color: #34373c;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.snippet-content {
|
||||
color: #475569;
|
||||
color: #60636a;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.snippet-id {
|
||||
color: #94a3b8;
|
||||
color: #96999f;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -404,14 +602,290 @@ onShow(() => {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.summary-heading {
|
||||
color: #1d4ed8;
|
||||
.summary-panel {
|
||||
border-color: #eadfbd;
|
||||
background: #fffdf7;
|
||||
box-shadow: var(--employee-card-shadow);
|
||||
}
|
||||
|
||||
.summary-panel .muted {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.summary-copy {
|
||||
max-width: 278px;
|
||||
}
|
||||
|
||||
.summary-panel .ghost-button {
|
||||
min-height: 48px;
|
||||
border: 1px solid #d7e1f5;
|
||||
border-radius: 18px;
|
||||
background: #f6f9ff;
|
||||
color: #315b8f;
|
||||
}
|
||||
|
||||
/* Modal mask overlay */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
max-height: 80vh;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border-top: 5px solid #168243;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
width: auto;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
max-height: 55vh;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
width: 100%;
|
||||
background: #168243;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Infographic Sections */
|
||||
.info-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.badge-num {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #168243;
|
||||
color: #ffffff;
|
||||
border-radius: 50%;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info-section-title {
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
/* Steps Timeline */
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 6px;
|
||||
bottom: 6px;
|
||||
width: 2px;
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-bottom: 16px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.timeline-item:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline-node {
|
||||
position: absolute;
|
||||
left: -14px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #168243;
|
||||
color: #ffffff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 8px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.summary-line {
|
||||
.timeline-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.timeline-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: #334155;
|
||||
font-size: 15px;
|
||||
line-height: 1.55;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.timeline-desc {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
/* Speech bubbles/scripts */
|
||||
.speech-bubble {
|
||||
position: relative;
|
||||
background: #f2f8f4;
|
||||
border-left: 3px solid #168243;
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.quote-mark {
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: -2px;
|
||||
font-size: 24px;
|
||||
color: rgba(22, 130, 67, 0.15);
|
||||
font-family: Georgia, serif;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.speech-text {
|
||||
font-size: 13.5px;
|
||||
color: #1e293b;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Objections Q&A */
|
||||
.objection-card {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.objection-q,
|
||||
.objection-a {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.objection-q {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.q-badge,
|
||||
.a-badge {
|
||||
flex: 0 0 18px;
|
||||
height: 18px;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.q-badge {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.a-badge {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.q-text {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: #334155;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.a-text {
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
/* Reminders alert box */
|
||||
.reminder-item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
background: #fffbeb;
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 8px;
|
||||
align-items: flex-start;
|
||||
border-left: 3px solid #d97706;
|
||||
}
|
||||
|
||||
.reminder-text {
|
||||
font-size: 13px;
|
||||
color: #78350f;
|
||||
line-height: 1.45;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user