refactor(components): 重构通话记录卡片布局和样式
- 移除调试用的console.log语句 - 重新组织通话记录卡片的结构，将用户信息、标签和分数整合到更清晰的布局中 - 新增通话时长格式化方法和分数样式分类方法 - 优化移动端布局和交互效果 - 改进标签和按钮的视觉样式，增加悬停效果
This commit is contained in:
@@ -39,8 +39,8 @@
|
||||
<!-- Tab 切换 -->
|
||||
<div class="tab-container">
|
||||
<div class="tab-buttons">
|
||||
<button
|
||||
class="tab-btn"
|
||||
<button
|
||||
class="tab-btn"
|
||||
:class="{ active: activeTab === 'chat' }"
|
||||
@click="activeTab = 'chat'"
|
||||
>
|
||||
@@ -49,8 +49,8 @@
|
||||
</svg>
|
||||
聊天记录
|
||||
</button>
|
||||
<button
|
||||
class="tab-btn"
|
||||
<button
|
||||
class="tab-btn"
|
||||
:class="{ active: activeTab === 'call' }"
|
||||
@click="activeTab = 'call'"
|
||||
>
|
||||
@@ -60,7 +60,7 @@
|
||||
通话录音
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Tab 内容 -->
|
||||
<div class="tab-content">
|
||||
<!-- 聊天记录内容 -->
|
||||
@@ -79,7 +79,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 通话录音内容 -->
|
||||
<div v-if="activeTab === 'call'" class="call-content">
|
||||
<div class="content-header">
|
||||
@@ -89,13 +89,23 @@
|
||||
<div class="call-list">
|
||||
<div v-for="(call, index) in callRecords" :key="index" class="call-item">
|
||||
<div class="call-header">
|
||||
<span class="call-type">用户: {{ call.user_name }}</span>
|
||||
<span class="call-duration">客户: {{ call.customer_name }}</span>
|
||||
<span class="call-tag" :class="{
|
||||
'tag-20min': call.record_tag === '20分钟通话',
|
||||
'tag-other': call.record_tag === '其他'
|
||||
}" v-if="call.record_tag">{{ call.record_tag }}</span>
|
||||
<div class="header-main" style="display: flex; flex-direction: row;">
|
||||
<div class="user-info">
|
||||
<span class="call-type">用户: {{ call.user_name }}</span>
|
||||
</div>
|
||||
<div class="header-tags">
|
||||
<span class="call-tag" :class="{
|
||||
'tag-20min': call.record_tag === '20分钟通话',
|
||||
'tag-invalid': call.record_tag === '无效通话',
|
||||
'tag-other': call.record_tag !== '20分钟通话' && call.record_tag !== '无效通话'
|
||||
}" v-if="call.record_tag">{{ call.record_tag }}</span>
|
||||
<!-- 分数移到类型标签后面 -->
|
||||
<span class="stat-value" :class="getScoreClass(call.score)">{{ call.score }}分</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="call-time">{{ formatDateTime(call.record_create_time) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="call-actions">
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn download-btn" @click="downloadRecording(call)">
|
||||
@@ -106,9 +116,8 @@
|
||||
<i class="icon-view"></i>
|
||||
查看原文
|
||||
</button>
|
||||
</div>
|
||||
<div class="call-time-info">
|
||||
<span class="call-duration">{{ formatDateTime(call.record_create_time) }}</span>
|
||||
<!-- 时长移到操作按钮后面 -->
|
||||
<span class="call-duration">{{ formatCallDuration(call.call_duration) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -120,8 +129,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -149,13 +156,11 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(['analyze-sop', 'show-modal'])
|
||||
const emit = defineEmits(['analyze-sop', 'show-modal', 'show-download-modal'])
|
||||
|
||||
// 当前激活的tab
|
||||
const activeTab = ref('chat')
|
||||
|
||||
|
||||
|
||||
// 聊天消息列表
|
||||
const chatMessages = computed(() => {
|
||||
return props.chatInfo?.messages || []
|
||||
@@ -172,20 +177,20 @@ const formFields = computed(() => {
|
||||
{ label: '地区', value: '暂无数据' }
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
let fields = []
|
||||
|
||||
|
||||
// 检查是否为第一种格式（包含name, mobile等字段）
|
||||
if (formData.name || formData.mobile || formData.child_name) {
|
||||
const customerInfo = [formData.name, formData.mobile, formData.child_relation, formData.occupation].filter(item => item && item !== '暂无').join(' | ')
|
||||
const childInfo = [formData.child_name, formData.child_gender, formData.child_education].filter(item => item && item !== '暂无').join(' | ')
|
||||
|
||||
|
||||
fields = [
|
||||
{ label: '客户信息', value: customerInfo || '暂无' },
|
||||
{ label: '孩子信息', value: childInfo || '暂无' },
|
||||
{ label: '地区', value: formData.territory || '暂无' }
|
||||
]
|
||||
|
||||
|
||||
// 如果有additional_info，添加所有问题
|
||||
if (formData.additional_info && Array.isArray(formData.additional_info)) {
|
||||
formData.additional_info.forEach((item) => {
|
||||
@@ -199,7 +204,7 @@ const formFields = computed(() => {
|
||||
// 第二种格式（expandXXX字段）
|
||||
const customerInfo = [formData.expandTwentyOne, formData.expandOne].filter(item => item && item !== '暂无').join(' | ')
|
||||
const childInfo = [formData.expandTwentyNine, formData.expandTwentyFive, formData.expandTwo].filter(item => item && item !== '暂无').join(' | ')
|
||||
|
||||
|
||||
fields = [
|
||||
{ label: '客户信息', value: customerInfo || '暂无' },
|
||||
{ label: '孩子信息', value: childInfo || '暂无' },
|
||||
@@ -211,10 +216,10 @@ const formFields = computed(() => {
|
||||
{ label: '孩子数量', value: formData.expandTwenty || '暂无' },
|
||||
{ label: '预期时间', value: formData.expandThirty || '暂无' }
|
||||
]
|
||||
}
|
||||
}
|
||||
// 合并表单数据和聊天数据
|
||||
const allFields = [...fields]
|
||||
|
||||
|
||||
return allFields
|
||||
})
|
||||
|
||||
@@ -232,18 +237,17 @@ const callData = computed(() => ({
|
||||
|
||||
// 通话记录列表
|
||||
const callRecords = computed(() => {
|
||||
|
||||
// 从 props.callInfo 中获取真实的通话记录数据
|
||||
if (props.callInfo && Array.isArray(props.callInfo)) {
|
||||
console.log('通话记录:', props.callInfo)
|
||||
return props.callInfo
|
||||
}
|
||||
|
||||
|
||||
// 如果 callInfo 是单个对象（API返回的数据格式）
|
||||
if (props.callInfo && typeof props.callInfo === 'object' && props.callInfo.user_name) {
|
||||
return [props.callInfo] // 将单个对象包装成数组
|
||||
}
|
||||
|
||||
|
||||
// 如果 callInfo 是对象且包含数据数组
|
||||
if (props.callInfo && props.callInfo && Array.isArray(props.callInfo)) {
|
||||
return props.callInfo
|
||||
@@ -252,6 +256,28 @@ const callRecords = computed(() => {
|
||||
return []
|
||||
})
|
||||
|
||||
// 新增：格式化通话时长的方法
|
||||
const formatCallDuration = (durationInMinutes) => {
|
||||
if (typeof durationInMinutes !== 'number' || durationInMinutes < 0) {
|
||||
return '暂无';
|
||||
}
|
||||
const totalSeconds = Math.round(durationInMinutes * 60);
|
||||
const minutes = Math.floor(totalSeconds / 60);
|
||||
const seconds = totalSeconds % 60;
|
||||
return `${minutes}分${seconds}秒`;
|
||||
};
|
||||
|
||||
// 新增：根据分数获取CSS类的方法
|
||||
const getScoreClass = (score) => {
|
||||
if (score >= 80) {
|
||||
return 'score-high';
|
||||
} else if (score >= 60) {
|
||||
return 'score-medium';
|
||||
} else {
|
||||
return 'score-low';
|
||||
}
|
||||
};
|
||||
|
||||
// 录音下载方法
|
||||
const downloadRecording = async (call) => {
|
||||
console.log('下载录音:', call)
|
||||
@@ -353,14 +379,14 @@ const downloadRecording = async (call) => {
|
||||
const viewTranscript = async (call) => {
|
||||
const title = '通话原文内容'
|
||||
const content = call.record_context || '该通话记录暂无原文内容'
|
||||
|
||||
|
||||
emit('show-modal', { title, content })
|
||||
}
|
||||
|
||||
// 时间格式化方法
|
||||
const formatDateTime = (dateTimeString) => {
|
||||
if (!dateTimeString) return '暂无时间'
|
||||
|
||||
|
||||
try {
|
||||
const date = new Date(dateTimeString)
|
||||
const year = date.getFullYear()
|
||||
@@ -369,7 +395,7 @@ const formatDateTime = (dateTimeString) => {
|
||||
const hours = String(date.getHours()).padStart(2, '0')
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||||
|
||||
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
||||
} catch (error) {
|
||||
console.error('时间格式化错误:', error)
|
||||
@@ -387,7 +413,7 @@ const formatDateTime = (dateTimeString) => {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
@@ -402,13 +428,13 @@ const formatDateTime = (dateTimeString) => {
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||||
border-color: #d1d5db;
|
||||
}
|
||||
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -418,11 +444,11 @@ const formatDateTime = (dateTimeString) => {
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
||||
}
|
||||
|
||||
|
||||
&.form-card::before {
|
||||
background: linear-gradient(90deg, #10b981, #059669);
|
||||
}
|
||||
|
||||
|
||||
&.communication-card::before {
|
||||
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
|
||||
}
|
||||
@@ -444,12 +470,12 @@ const formatDateTime = (dateTimeString) => {
|
||||
justify-content: center;
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
|
||||
|
||||
.form-card & {
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
|
||||
.communication-card & {
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
@@ -472,17 +498,17 @@ const formatDateTime = (dateTimeString) => {
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
||||
.field-label {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
.field-value {
|
||||
font-size: 14px;
|
||||
color: #1f2937;
|
||||
@@ -497,7 +523,7 @@ const formatDateTime = (dateTimeString) => {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
margin-bottom: 16px;
|
||||
|
||||
|
||||
.tab-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@@ -513,28 +539,28 @@ const formatDateTime = (dateTimeString) => {
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
|
||||
&.active {
|
||||
color: #3b82f6;
|
||||
border-bottom-color: #3b82f6;
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tab-content {
|
||||
min-height: 300px;
|
||||
max-height: 450px;
|
||||
overflow-y: auto;
|
||||
|
||||
|
||||
.content-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -542,13 +568,13 @@ const formatDateTime = (dateTimeString) => {
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
|
||||
|
||||
.content-count {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
|
||||
.content-time {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
@@ -564,25 +590,25 @@ const formatDateTime = (dateTimeString) => {
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: #f9fafb;
|
||||
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
|
||||
.message-sender {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
|
||||
.message-time {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.message-text {
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
@@ -595,126 +621,192 @@ const formatDateTime = (dateTimeString) => {
|
||||
.call-list {
|
||||
.call-item {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background: #f9fafb;
|
||||
border-left: 4px solid #3b82f6;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.call-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.call-type {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background: #dbeafe;
|
||||
color: #3b82f6;
|
||||
align-items: flex-start;
|
||||
.header-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.call-type {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 5px 10px;
|
||||
border-radius: 20px;
|
||||
background: #dbeafe;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.call-customer {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.header-tags {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.call-tag {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
|
||||
&.tag-20min {
|
||||
background: #dcfce7;
|
||||
color: #16a34a;
|
||||
border: 1px solid #bbf7d0;
|
||||
}
|
||||
|
||||
&.tag-invalid {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
&.tag-other {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
border: 1px solid #fed7aa;
|
||||
}
|
||||
}
|
||||
|
||||
// 分数样式
|
||||
.stat-value {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
|
||||
&.score-high {
|
||||
color: #16a34a; // 绿色
|
||||
background-color: #dcfce7;
|
||||
}
|
||||
&.score-medium {
|
||||
color: #d97706; // 橙色
|
||||
background-color: #fef3c7;
|
||||
}
|
||||
&.score-low {
|
||||
color: #dc2626; // 红色
|
||||
background-color: #fee2e2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.call-duration {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
|
||||
.call-time {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.call-tag {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 3px 8px;
|
||||
border-radius: 12px;
|
||||
|
||||
&.tag-20min {
|
||||
background: #dcfce7;
|
||||
color: #16a34a;
|
||||
border: 1px solid #bbf7d0;
|
||||
}
|
||||
|
||||
&.tag-other {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
border: 1px solid #fed7aa;
|
||||
}
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
padding: 4px 8px;
|
||||
background: #f9fafb;
|
||||
border-radius: 4px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.call-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 10px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.download-btn {
|
||||
background: #dbeafe;
|
||||
color: #3b82f6;
|
||||
|
||||
&:hover {
|
||||
background: #bfdbfe;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&.download-btn {
|
||||
background: #dbeafe;
|
||||
color: #3b82f6;
|
||||
|
||||
&:hover {
|
||||
background: #bfdbfe;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
&.view-btn {
|
||||
background: #d1fae5;
|
||||
color: #059669;
|
||||
|
||||
&:hover {
|
||||
background: #a7f3d0;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 6px rgba(5, 150, 105, 0.2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
|
||||
&.icon-download::before {
|
||||
content: '⬇';
|
||||
}
|
||||
|
||||
&.icon-view::before {
|
||||
content: '👁';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.view-btn {
|
||||
background: #d1fae5;
|
||||
color: #059669;
|
||||
|
||||
&:hover {
|
||||
background: #a7f3d0;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
&.icon-download::before {
|
||||
content: '⬇';
|
||||
}
|
||||
|
||||
&.icon-view::before {
|
||||
content: '👁';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.call-time-info {
|
||||
// 通话时长样式
|
||||
.call-duration {
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
background: #f9fafb;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
}
|
||||
@@ -722,96 +814,25 @@ const formatDateTime = (dateTimeString) => {
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
margin: 0 0 16px 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.card-stats {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 14px;
|
||||
color: #111827;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-action {
|
||||
border-top: 1px solid #f3f4f6;
|
||||
padding-top: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
padding: 8px 0;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.raw-data-cards {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
|
||||
.data-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
|
||||
.card-header {
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
|
||||
.card-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
|
||||
.card-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
@@ -821,30 +842,29 @@ const formatDateTime = (dateTimeString) => {
|
||||
.cards-container {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
|
||||
.data-card {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
|
||||
.card-header {
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
|
||||
.card-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: 13px;
|
||||
.call-actions {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// 弹框样式
|
||||
|
||||
</style>
|
||||
@@ -624,8 +624,6 @@ async function getCustomerCall() {
|
||||
const res = await getCustomerCallInfo(params)
|
||||
if(res.code === 200) {
|
||||
callRecords.value = res.data
|
||||
console.log('Call Records Data from API:', res.data)
|
||||
console.log('callRecords.value after assignment:', callRecords.value)
|
||||
}
|
||||
} catch (error) {
|
||||
// 静默处理错误
|
||||
|
||||
Reference in New Issue
Block a user