zhangchao/cz-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 在线客服和详细中心整改

Browse Source
This commit is contained in:
Ironsp
2026-10-13 16:08:55 +08:00
parent 367380e44c
commit a067fd8357
10 changed files with 381 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/views/service/cpns/ChatMessageItem.vue
View File

@@ -29,14 +29,14 @@ withDefaults(defineProps<Props>(), { unread: false })
<span class="chat-message-item__time">{{ message.time }}</span>
</div>
<span v-if="message.role === 'user'" class="chat-message-item__avatar chat-message-item__avatar--user">王</span>
<span v-if="message.role === 'user'" class="chat-message-item__avatar chat-message-item__avatar--user">我</span>
</div>
</template>
<style lang="less" scoped>
.chat-message-item {
.flex(row, flex-start, flex-start);
gap: 16px;
gap: @spacing-base;
&__avatar {
flex-shrink: 0;
@@ -46,55 +46,54 @@ withDefaults(defineProps<Props>(), { unread: false })
border-radius: @radius-round;
background: @primary-strong;
color: @white;
font-size: 14px;
font-weight: 400;
font-size: @font-size-sm;
font-weight: 500;
&--user {
background: @service-user-avatar;
color: @white;
}
}
&__main {
.flex(column, flex-start, flex-start);
gap: 6px;
max-width: 420px;
gap: @spacing-xs;
max-width: min(480px, 70%);
}
&__bubble {
position: relative;
padding: 12px 16px;
border-radius: @radius-base;
padding: @spacing-base;
border-radius: @radius-base @radius-base @radius-base @radius-sm;
background: @white;
border: 1px solid @border-color;
color: @service-bubble-text;
font-size: 13px;
font-size: @font-size-sm;
line-height: 1.7;
white-space: pre-wrap;
word-break: break-word;
box-shadow: @shadow-base;
}
&__bubble:has(.chat-file-card) {
padding: 0;
border: none;
background: transparent;
box-shadow: none;
}
&__time {
font-size: 11px;
line-height: 16px;
color: @project-muted;
font-size: @font-size-xs;
line-height: 1.4;
color: @text-color-secondary;
}
&__unread {
position: absolute;
top: 100%;
top: calc(100% + @spacing-xs);
left: 0;
margin-top: 8px;
padding: 0;
background: transparent;
color: @project-muted;
font-size: 10px;
font-weight: 400;
line-height: 14px;
color: @text-color-secondary;
font-size: @font-size-xs;
line-height: 1.4;
}
&--user {
@@ -105,8 +104,11 @@ withDefaults(defineProps<Props>(), { unread: false })
}
.chat-message-item__bubble {
border: none;
border-radius: @radius-base @radius-base @radius-sm @radius-base;
background: @primary-strong;
color: @white;
box-shadow: none;
}
}
}