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/516/head
卢越 2024-08-22 09:47:17 +08:00
parent 323e6197b1
commit f61f0fa2e8
9 changed files with 47 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/utils/formatTime.ts
View File

@ -66,10 +66,10 @@ export const defaultShortcuts = [
export function formatDate(date: Date, format?: string): string { export function formatDate(date: Date, format?: string): string {
// 日期不存在，则返回空 // 日期不存在，则返回空
if (!date) { 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') : '';
} }
/** /**

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

@ -22,17 +22,16 @@
<div class="ml-10px w-100%"> <div class="ml-10px w-100%">
<div class="flex justify-between items-center w-100%"> <div class="flex justify-between items-center w-100%">
<span class="username">{{ item.userNickname }}</span> <span class="username">{{ item.userNickname }}</span>
<span class="color-[#989EA6]"> <span class="color-[var(--left-menu-text-color)]" style="font-size: 13px;">
{{ formatPast(item.lastMessageTime, 'YYYY-mm-dd') }} {{ formatPast(item.lastMessageTime, 'YYYY-MM-DD') }}
</span> </span>
</div> </div>
<!-- 最后聊天内容 --> <!-- 最后聊天内容 -->
<div <div
v-dompurify-html=" v-dompurify-html="getConversationDisplayText(item.lastMessageContentType, item.lastMessageContent)"
getConversationDisplayText(item.lastMessageContentType, item.lastMessageContent) class="last-message flex items-center color-[var(--left-menu-text-color)]"
" >
class="last-message flex items-center color-[#989EA6]" </div>
></div>
</div> </div>
</div> </div>
</div> </div>
@ -182,7 +181,7 @@ watch(showRightMenu, (val) => {
&-conversation { &-conversation {
height: 60px; height: 60px;
padding: 10px; padding: 10px;
background-color: #fff; //background-color: #fff;
transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */ transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
.username { .username {
@ -196,6 +195,7 @@ watch(showRightMenu, (val) => {
} }
.last-message { .last-message {
font-size: 13px;
width: 200px; width: 200px;
overflow: hidden; // 隐藏超出的文本 overflow: hidden; // 隐藏超出的文本
white-space: nowrap; // 禁止换行 white-space: nowrap; // 禁止换行
@ -205,16 +205,16 @@ watch(showRightMenu, (val) => {
.active { .active {
border-left: 5px #3271ff solid; border-left: 5px #3271ff solid;
background-color: #eff0f1; background-color: var(--left-menu-bg-active-color);
} }
.pinned { .pinned {
background-color: #eff0f1; background-color: var(--left-menu-bg-active-color);
} }
.right-menu-ul { .right-menu-ul {
position: absolute; position: absolute;
background-color: #fff; background-color: var(--app-content-bg-color);
padding: 10px; padding: 10px;
margin: 0; margin: 0;
list-style-type: none; /* 移除默认的项目符号 */ list-style-type: none; /* 移除默认的项目符号 */
@ -228,7 +228,7 @@ watch(showRightMenu, (val) => {
border-radius: 12px; border-radius: 12px;
transition: background-color 0.3s; /* 平滑过渡 */ transition: background-color 0.3s; /* 平滑过渡 */
&:hover { &:hover {
background-color: #e0e0e0; /* 悬停时的背景颜色 */ background-color: var(--left-menu-bg-active-color); /* 悬停时的背景颜色 */
} }
} }
} }

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

@ -369,9 +369,10 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
position: absolute; position: absolute;
bottom: 35px; bottom: 35px;
right: 35px; right: 35px;
background-color: #fff; background-color: var(--app-content-bg-color);
padding: 10px; padding: 10px;
border-radius: 30px; border-radius: 30px;
font-size: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */ 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; border-radius: 12rpx;
padding: 8rpx 16rpx; padding: 8rpx 16rpx;
margin-bottom: 16rpx; margin-bottom: 16rpx;
background-color: #e8e8e8; //background-color: #e8e8e8;
color: #999; color: #999;
font-size: 24rpx; font-size: 24rpx;
} }

2
src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue
View File

@ -7,7 +7,7 @@
<el-tab-pane label="订单列表" name="b" /> <el-tab-pane label="订单列表" name="b" />
</el-tabs> </el-tabs>
<div> <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" /> <ProductBrowsingHistory v-if="activeName === 'a'" ref="productBrowsingHistoryRef" />
<!-- 订单列表 --> <!-- 订单列表 -->

22
src/views/mall/promotion/kefu/components/message/OrderItem.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div v-if="isObject(getMessageContent)"> <div v-if="isObject(getMessageContent)">
<div :key="getMessageContent.id" class="order-list-card-box mt-14px"> <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="order-no">订单号：{{ getMessageContent.no }}</div>
<div :class="formatOrderColor(getMessageContent)" class="order-state font-16"> <div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
{{ formatOrderStatus(getMessageContent) }} {{ formatOrderStatus(getMessageContent) }}
@ -16,7 +16,7 @@
:title="item.spuName" :title="item.spuName"
/> />
</div> </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="flex items-center">
<div class="discounts-title pay-color" <div class="discounts-title pay-color"
>共 {{ getMessageContent?.productCount }} 件商品,总金额: >共 {{ getMessageContent?.productCount }} 件商品,总金额:
@ -97,18 +97,21 @@ function formatOrderStatus(order: any) {
.order-list-card-box { .order-list-card-box {
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
background-color: #e2e2e2; border: 1px #6a6a6a solid;
background-color: var(--app-content-bg-color);
.order-card-header { .order-card-header {
height: 28px; height: 28px;
.order-no { .order-no {
font-size: 16px; font-size: 10px;
font-weight: 500; font-weight: 500;
} }
} }
.pay-box { .pay-box {
padding-top: 10px;
.discounts-title { .discounts-title {
font-size: 16px; font-size: 16px;
line-height: normal; line-height: normal;
@ -123,24 +126,33 @@ function formatOrderStatus(order: any) {
} }
.pay-color { .pay-color {
color: #333; font-size: 13px;
color: var(--left-menu-text-color);
} }
} }
} }
.warning-color { .warning-color {
color: #faad14; color: #faad14;
font-size: 11px;
font-weight: bold;
} }
.danger-color { .danger-color {
color: #ff3000; color: #ff3000;
font-size: 11px;
font-weight: bold;
} }
.success-color { .success-color {
color: #52c41a; color: #52c41a;
font-size: 11px;
font-weight: bold;
} }
.info-color { .info-color {
color: #999999; color: #999999;
font-size: 11px;
font-weight: bold;
} }
</style> </style>

11
src/views/mall/promotion/kefu/components/message/ProductItem.vue
View File

@ -113,7 +113,8 @@ const skuString = computed(() => {
.ss-order-card-warp { .ss-order-card-warp {
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
background-color: #e2e2e2; border: 1px #6a6a6a solid;
background-color: var(--app-content-bg-color);
.img-box { .img-box {
width: 80px; width: 80px;
@ -139,13 +140,13 @@ const skuString = computed(() => {
} }
.title-text { .title-text {
font-size: 16px; font-size: 13px;
font-weight: 500; font-weight: 500;
line-height: 20px; line-height: 20px;
} }
.spec-text { .spec-text {
font-size: 16px; font-size: 10px;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
min-width: 0; min-width: 0;
@ -157,13 +158,13 @@ const skuString = computed(() => {
} }
.price-text { .price-text {
font-size: 16px; font-size: 11px;
font-weight: 500; font-weight: 500;
font-family: OPPOSANS; font-family: OPPOSANS;
} }
.total-text { .total-text {
font-size: 16px; font-size: 10px;
font-weight: 400; font-weight: 400;
line-height: 16px; line-height: 16px;
color: #999999; color: #999999;

4
src/views/mall/promotion/kefu/components/tools/emoji.ts
View File

@ -80,8 +80,8 @@ export const useEmoji = () => {
/** /**
* 将文本中的表情替换成图片 * 将文本中的表情替换成图片
* *
* @param data 文本
* @return 替换后的文本 * @return 替换后的文本
* @param content 消息内容
*/ */
const replaceEmoji = (content: string) => { const replaceEmoji = (content: string) => {
let newData = content let newData = content
@ -93,7 +93,7 @@ export const useEmoji = () => {
const emojiFile = getEmojiFileByName(item) const emojiFile = getEmojiFileByName(item)
newData = newData.replace( newData = newData.replace(
item, 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=""/>`
) )
}) })
} }

2
src/views/mall/trade/order/components/OrderTableColumn.vue
View File

@ -41,7 +41,7 @@
<template #header> <template #header>
<div <div
class="mr-[20px] h-[35px] flex items-center pl-[10px] pr-[10px]" 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">订单号：{{ scope.row.no }} </span>
<span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span> <span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span>

5
src/views/mall/trade/order/detail/index.vue
View File

@ -397,13 +397,14 @@ onMounted(async () => {
align-items: center; align-items: center;
min-height: 30px; min-height: 30px;
padding: 10px; padding: 10px;
background-color: #f7f8fa; border-radius: var(--el-card-border-radius);
background-color: var(--app-content-bg-color);
&::before { &::before {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 13px; /* 将伪元素水平居中 */ left: 13px; /* 将伪元素水平居中 */
border-color: transparent #f7f8fa transparent transparent; /* 尖角颜色，左侧朝向 */ border-color: transparent var(--app-content-bg-color) transparent transparent; /* 尖角颜色，左侧朝向 */
border-style: solid; border-style: solid;
border-width: 8px; /* 调整尖角大小 */ border-width: 8px; /* 调整尖角大小 */
content: ''; /* 必须设置 content 属性 */ content: ''; /* 必须设置 content 属性 */