【页面优化】优化商城相关页面的黑暗模式适配问题，临时优化客服的页面
卢越
parent
323e6197b1
commit
f61f0fa2e8
|
|
@ -66,10 +66,10 @@ export const defaultShortcuts = [
|
|||
export function formatDate(date: Date, format?: string): string {
|
||||
// 日期不存在，则返回空
|
||||
if (!date) {
|
||||
return ''
|
||||
return '';
|
||||
}
|
||||
// 日期存在，则进行格式化
|
||||
return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : ''
|
||||
return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : '';
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -22,17 +22,16 @@
|
|||
<div class="ml-10px w-100%">
|
||||
<div class="flex justify-between items-center w-100%">
|
||||
<span class="username">{{ item.userNickname }}</span>
|
||||
<span class="color-[#989EA6]">
|
||||
{{ formatPast(item.lastMessageTime, 'YYYY-mm-dd') }}
|
||||
<span class="color-[var(--left-menu-text-color)]" style="font-size: 13px;">
|
||||
{{ formatPast(item.lastMessageTime, 'YYYY-MM-DD') }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- 最后聊天内容 -->
|
||||
<div
|
||||
v-dompurify-html="
|
||||
getConversationDisplayText(item.lastMessageContentType, item.lastMessageContent)
|
||||
"
|
||||
class="last-message flex items-center color-[#989EA6]"
|
||||
></div>
|
||||
v-dompurify-html="getConversationDisplayText(item.lastMessageContentType, item.lastMessageContent)"
|
||||
class="last-message flex items-center color-[var(--left-menu-text-color)]"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -182,7 +181,7 @@ watch(showRightMenu, (val) => {
|
|||
&-conversation {
|
||||
height: 60px;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
//background-color: #fff;
|
||||
transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
|
||||
|
||||
.username {
|
||||
|
|
@ -196,6 +195,7 @@ watch(showRightMenu, (val) => {
|
|||
}
|
||||
|
||||
.last-message {
|
||||
font-size: 13px;
|
||||
width: 200px;
|
||||
overflow: hidden; // 隐藏超出的文本
|
||||
white-space: nowrap; // 禁止换行
|
||||
|
|
@ -205,16 +205,16 @@ watch(showRightMenu, (val) => {
|
|||
|
||||
.active {
|
||||
border-left: 5px #3271ff solid;
|
||||
background-color: #eff0f1;
|
||||
background-color: var(--left-menu-bg-active-color);
|
||||
}
|
||||
|
||||
.pinned {
|
||||
background-color: #eff0f1;
|
||||
background-color: var(--left-menu-bg-active-color);
|
||||
}
|
||||
|
||||
.right-menu-ul {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
background-color: var(--app-content-bg-color);
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
list-style-type: none; /* 移除默认的项目符号 */
|
||||
|
|
@ -228,7 +228,7 @@ watch(showRightMenu, (val) => {
|
|||
border-radius: 12px;
|
||||
transition: background-color 0.3s; /* 平滑过渡 */
|
||||
&:hover {
|
||||
background-color: #e0e0e0; /* 悬停时的背景颜色 */
|
||||
background-color: var(--left-menu-bg-active-color); /* 悬停时的背景颜色 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -369,9 +369,10 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
|
|||
position: absolute;
|
||||
bottom: 35px;
|
||||
right: 35px;
|
||||
background-color: #fff;
|
||||
background-color: var(--app-content-bg-color);
|
||||
padding: 10px;
|
||||
border-radius: 30px;
|
||||
font-size: 12px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
|
||||
}
|
||||
|
||||
|
|
@ -445,7 +446,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
|
|||
border-radius: 12rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
background-color: #e8e8e8;
|
||||
//background-color: #e8e8e8;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<el-tab-pane label="订单列表" name="b" />
|
||||
</el-tabs>
|
||||
<div>
|
||||
<el-scrollbar ref="scrollbarRef" always height="calc(100vh - 400px)" @scroll="handleScroll">
|
||||
<el-scrollbar ref="scrollbarRef" always height="calc(115vh - 400px)" @scroll="handleScroll">
|
||||
<!-- 最近浏览 -->
|
||||
<ProductBrowsingHistory v-if="activeName === 'a'" ref="productBrowsingHistoryRef" />
|
||||
<!-- 订单列表 -->
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div v-if="isObject(getMessageContent)">
|
||||
<div :key="getMessageContent.id" class="order-list-card-box mt-14px">
|
||||
<div class="order-card-header flex items-center justify-between p-x-20px">
|
||||
<div class="order-card-header flex items-center justify-between p-x-5px">
|
||||
<div class="order-no">订单号：{{ getMessageContent.no }}</div>
|
||||
<div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
|
||||
{{ formatOrderStatus(getMessageContent) }}
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
:title="item.spuName"
|
||||
/>
|
||||
</div>
|
||||
<div class="pay-box flex justify-end pr-20px">
|
||||
<div class="pay-box flex justify-end pr-5px">
|
||||
<div class="flex items-center">
|
||||
<div class="discounts-title pay-color"
|
||||
>共 {{ getMessageContent?.productCount }} 件商品,总金额:
|
||||
|
|
@ -97,18 +97,21 @@ function formatOrderStatus(order: any) {
|
|||
.order-list-card-box {
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
background-color: #e2e2e2;
|
||||
border: 1px #6a6a6a solid;
|
||||
background-color: var(--app-content-bg-color);
|
||||
|
||||
.order-card-header {
|
||||
height: 28px;
|
||||
|
||||
.order-no {
|
||||
font-size: 16px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-box {
|
||||
padding-top: 10px;
|
||||
|
||||
.discounts-title {
|
||||
font-size: 16px;
|
||||
line-height: normal;
|
||||
|
|
@ -123,24 +126,33 @@ function formatOrderStatus(order: any) {
|
|||
}
|
||||
|
||||
.pay-color {
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
color: var(--left-menu-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warning-color {
|
||||
color: #faad14;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.danger-color {
|
||||
color: #ff3000;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.success-color {
|
||||
color: #52c41a;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info-color {
|
||||
color: #999999;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -113,7 +113,8 @@ const skuString = computed(() => {
|
|||
.ss-order-card-warp {
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
background-color: #e2e2e2;
|
||||
border: 1px #6a6a6a solid;
|
||||
background-color: var(--app-content-bg-color);
|
||||
|
||||
.img-box {
|
||||
width: 80px;
|
||||
|
|
@ -139,13 +140,13 @@ const skuString = computed(() => {
|
|||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.spec-text {
|
||||
font-size: 16px;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
min-width: 0;
|
||||
|
|
@ -157,13 +158,13 @@ const skuString = computed(() => {
|
|||
}
|
||||
|
||||
.price-text {
|
||||
font-size: 16px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.total-text {
|
||||
font-size: 16px;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
color: #999999;
|
||||
|
|
|
|||
|
|
@ -80,8 +80,8 @@ export const useEmoji = () => {
|
|||
/**
|
||||
* 将文本中的表情替换成图片
|
||||
*
|
||||
* @param data 文本
|
||||
* @return 替换后的文本
|
||||
* @param content 消息内容
|
||||
*/
|
||||
const replaceEmoji = (content: string) => {
|
||||
let newData = content
|
||||
|
|
@ -93,7 +93,7 @@ export const useEmoji = () => {
|
|||
const emojiFile = getEmojiFileByName(item)
|
||||
newData = newData.replace(
|
||||
item,
|
||||
`<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${emojiFile}"/>`
|
||||
`<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${emojiFile}" alt=""/>`
|
||||
)
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
<template #header>
|
||||
<div
|
||||
class="mr-[20px] h-[35px] flex items-center pl-[10px] pr-[10px]"
|
||||
style="background-color: #f7f7f7"
|
||||
style="background-color: var(--app-content-bg-color)"
|
||||
>
|
||||
<span class="mr-20px">订单号：{{ scope.row.no }} </span>
|
||||
<span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span>
|
||||
|
|
|
|||
|
|
@ -397,13 +397,14 @@ onMounted(async () => {
|
|||
align-items: center;
|
||||
min-height: 30px;
|
||||
padding: 10px;
|
||||
background-color: #f7f8fa;
|
||||
border-radius: var(--el-card-border-radius);
|
||||
background-color: var(--app-content-bg-color);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 13px; /* 将伪元素水平居中 */
|
||||
border-color: transparent #f7f8fa transparent transparent; /* 尖角颜色，左侧朝向 */
|
||||
border-color: transparent var(--app-content-bg-color) transparent transparent; /* 尖角颜色，左侧朝向 */
|
||||
border-style: solid;
|
||||
border-width: 8px; /* 调整尖角大小 */
|
||||
content: ''; /* 必须设置 content 属性 */
|
||||
|
|
|
|||
Loading…
Reference in New Issue