yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【功能完善】商城客服: 消息样式调整

pull/576/head
puhui999 2024-11-04 16:44:10 +08:00
parent 40d7f5786d
commit ce3380fa3f
3 changed files with 21 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/mall/promotion/kefu/components/KeFuConversationList.vue
View File

@ -1,5 +1,5 @@
<template>
<el-aside class="kefu-conversation-aside p-10px h-100%" width="260px">
<el-aside class="kefu p-5px h-100%" width="260px">
<div class="color-[#999] font-bold my-10px">会话记录({{ conversationList.length }})</div>
<div
v-for="item in conversationList"
@ -180,14 +180,13 @@ watch(showRightMenu, (val) => {
</script>
<style lang="scss" scoped>
.kefu-conversation-aside {
.kefu {
background-color: #fff;
&-conversation {
height: 60px;
padding: 10px;
//background-color: #fff;
transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
//transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
.username {
min-width: 0;
@ -208,14 +207,10 @@ watch(showRightMenu, (val) => {
}
}
.active {
//border-left: 5px #96afea solid;
background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
border-radius: 8px;
}
.active,
.pinned {
background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
border-radius: 8px;
}
.right-menu-ul {

49
src/views/mall/promotion/kefu/components/KeFuMessageList.vue
View File

@ -408,21 +408,12 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
justify-content: flex-start;
.kefu-message {
margin-left: 20px;
position: relative;
&::before {
content: '';
width: 10px;
height: 10px;
left: -19px;
top: calc(50% - 10px);
position: absolute;
border-left: 5px solid transparent;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 5px solid var(--app-content-bg-color);
}
background-color: rgb(245, 245, 245);
margin-left: 10px;
margin-top: 18px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
}
@ -430,37 +421,25 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
justify-content: flex-end;
.kefu-message {
margin-right: 20px;
position: relative;
&::after {
content: '';
width: 10px;
height: 10px;
right: -19px;
top: calc(50% - 10px);
position: absolute;
border-left: 5px solid var(--app-content-bg-color);
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 5px solid transparent;
}
background-color: rgb(206, 223, 255);
margin-right: 10px;
margin-top: 18px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
}
// 消息气泡
.kefu-message {
color: #a9a9a9;
border-radius: 5px;
box-shadow: 3px 3px 5px rgba(220, 220, 220, 0.1);
color: #414141;
font-weight: 500;
padding: 5px 10px;
width: auto;
max-width: 50%;
text-align: left;
display: inline-block !important;
position: relative;
word-break: break-all;
background-color: var(--app-content-bg-color);
transition: all 0.2s;
&:hover {

4
src/views/mall/promotion/kefu/components/member/MemberInfo.vue
View File

@ -142,7 +142,7 @@ const handleScroll = debounce(() => {
left: 0;
right: 0;
bottom: 0; /* 覆盖整个元素 */
border-bottom: 2px solid black; /* 边框样式 */
border-bottom: 2px solid rgba(128, 128, 128, 0.5); /* 边框样式 */
pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
}
@ -153,7 +153,7 @@ const handleScroll = debounce(() => {
left: 0;
right: 0;
bottom: 0; /* 覆盖整个元素 */
border-bottom: 2px solid black; /* 边框样式 */
border-bottom: 2px solid rgba(128, 128, 128, 0.5); /* 边框样式 */
pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
}
}