Skip to content

Commit f61f0fa

Browse files
1366331622313663316223
committed
【页面优化】优化商城相关页面的黑暗模式适配问题，临时优化客服的页面
1 parent 323e619 commit f61f0fa

File tree

9 files changed

+47
-32
lines changed

9 files changed

+47
-32
lines changed

‎src/utils/formatTime.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,10 @@ export const defaultShortcuts = [
6666
export function formatDate(date: Date, format?: string): string {
6767
// 日期不存在，则返回空
6868
if (!date) {
69-
return ''
69+
return '';
7070
}
7171
// 日期存在，则进行格式化
72-
return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : ''
72+
return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : '';
7373
}
7474

7575
/**

‎src/views/mall/promotion/kefu/components/KeFuConversationList.vue

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,16 @@
2222
<div class="ml-10px w-100%">
2323
<div class="flex justify-between items-center w-100%">
2424
<span class="username">{{ item.userNickname }}</span>
25-
<span class="color-[#989EA6]">
26-
{{ formatPast(item.lastMessageTime, 'YYYY-mm-dd') }}
25+
<span class="color-[var(--left-menu-text-color)]" style="font-size: 13px;">
26+
{{ formatPast(item.lastMessageTime, 'YYYY-MM-DD') }}
2727
</span>
2828
</div>
2929
<!-- 最后聊天内容 -->
3030
<div
31-
v-dompurify-html="
32-
getConversationDisplayText(item.lastMessageContentType, item.lastMessageContent)
33-
"
34-
class="last-message flex items-center color-[#989EA6]"
35-
></div>
31+
v-dompurify-html="getConversationDisplayText(item.lastMessageContentType, item.lastMessageContent)"
32+
class="last-message flex items-center color-[var(--left-menu-text-color)]"
33+
>
34+
</div>
3635
</div>
3736
</div>
3837
</div>
@@ -182,7 +181,7 @@ watch(showRightMenu, (val) => {
182181
&-conversation {
183182
height: 60px;
184183
padding: 10px;
185-
background-color: #fff;
184+
//background-color: #fff;
186185
transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
187186
188187
.username {
@@ -196,6 +195,7 @@ watch(showRightMenu, (val) => {
196195
}
197196
198197
.last-message {
198+
font-size: 13px;
199199
width: 200px;
200200
overflow: hidden; // 隐藏超出的文本
201201
white-space: nowrap; // 禁止换行
@@ -205,16 +205,16 @@ watch(showRightMenu, (val) => {
205205
206206
.active {
207207
border-left: 5px #3271ff solid;
208-
background-color: #eff0f1;
208+
background-color: var(--left-menu-bg-active-color);
209209
}
210210
211211
.pinned {
212-
background-color: #eff0f1;
212+
background-color: var(--left-menu-bg-active-color);
213213
}
214214
215215
.right-menu-ul {
216216
position: absolute;
217-
background-color: #fff;
217+
background-color: var(--app-content-bg-color);
218218
padding: 10px;
219219
margin: 0;
220220
list-style-type: none; /* 移除默认的项目符号 */
@@ -228,7 +228,7 @@ watch(showRightMenu, (val) => {
228228
border-radius: 12px;
229229
transition: background-color 0.3s; /* 平滑过渡 */
230230
&:hover {
231-
background-color: #e0e0e0; /* 悬停时的背景颜色 */
231+
background-color: var(--left-menu-bg-active-color); /* 悬停时的背景颜色 */
232232
}
233233
}
234234
}

‎src/views/mall/promotion/kefu/components/KeFuMessageList.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -369,9 +369,10 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
369369
position: absolute;
370370
bottom: 35px;
371371
right: 35px;
372-
background-color: #fff;
372+
background-color: var(--app-content-bg-color);
373373
padding: 10px;
374374
border-radius: 30px;
375+
font-size: 12px;
375376
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
376377
}
377378
@@ -445,7 +446,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
445446
border-radius: 12rpx;
446447
padding: 8rpx 16rpx;
447448
margin-bottom: 16rpx;
448-
background-color: #e8e8e8;
449+
//background-color: #e8e8e8;
449450
color: #999;
450451
font-size: 24rpx;
451452
}

‎src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<el-tab-pane label="订单列表" name="b" />
88
</el-tabs>
99
<div>
10-
<el-scrollbar ref="scrollbarRef" always height="calc(100vh - 400px)" @scroll="handleScroll">
10+
<el-scrollbar ref="scrollbarRef" always height="calc(115vh - 400px)" @scroll="handleScroll">
1111
<!-- 最近浏览 -->
1212
<ProductBrowsingHistory v-if="activeName === 'a'" ref="productBrowsingHistoryRef" />
1313
<!-- 订单列表 -->

‎src/views/mall/promotion/kefu/components/message/OrderItem.vue

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div v-if="isObject(getMessageContent)">
33
<div :key="getMessageContent.id" class="order-list-card-box mt-14px">
4-
<div class="order-card-header flex items-center justify-between p-x-20px">
4+
<div class="order-card-header flex items-center justify-between p-x-5px">
55
<div class="order-no">订单号：{{ getMessageContent.no }}</div>
66
<div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
77
{{ formatOrderStatus(getMessageContent) }}
@@ -16,7 +16,7 @@
1616
:title="item.spuName"
1717
/>
1818
</div>
19-
<div class="pay-box flex justify-end pr-20px">
19+
<div class="pay-box flex justify-end pr-5px">
2020
<div class="flex items-center">
2121
<div class="discounts-title pay-color"
2222
>共 {{ getMessageContent?.productCount }} 件商品,总金额:
@@ -97,18 +97,21 @@ function formatOrderStatus(order: any) {
9797
.order-list-card-box {
9898
border-radius: 10px;
9999
padding: 10px;
100-
background-color: #e2e2e2;
100+
border: 1px #6a6a6a solid;
101+
background-color: var(--app-content-bg-color);
101102
102103
.order-card-header {
103104
height: 28px;
104105
105106
.order-no {
106-
font-size: 16px;
107+
font-size: 10px;
107108
font-weight: 500;
108109
}
109110
}
110111
111112
.pay-box {
113+
padding-top: 10px;
114+
112115
.discounts-title {
113116
font-size: 16px;
114117
line-height: normal;
@@ -123,24 +126,33 @@ function formatOrderStatus(order: any) {
123126
}
124127
125128
.pay-color {
126-
color: #333;
129+
font-size: 13px;
130+
color: var(--left-menu-text-color);
127131
}
128132
}
129133
}
130134
131135
.warning-color {
132136
color: #faad14;
137+
font-size: 11px;
138+
font-weight: bold;
133139
}
134140
135141
.danger-color {
136142
color: #ff3000;
143+
font-size: 11px;
144+
font-weight: bold;
137145
}
138146
139147
.success-color {
140148
color: #52c41a;
149+
font-size: 11px;
150+
font-weight: bold;
141151
}
142152
143153
.info-color {
144154
color: #999999;
155+
font-size: 11px;
156+
font-weight: bold;
145157
}
146158
</style>

‎src/views/mall/promotion/kefu/components/message/ProductItem.vue

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,8 @@ const skuString = computed(() => {
113113
.ss-order-card-warp {
114114
padding: 20px;
115115
border-radius: 10px;
116-
background-color: #e2e2e2;
116+
border: 1px #6a6a6a solid;
117+
background-color: var(--app-content-bg-color);
117118
118119
.img-box {
119120
width: 80px;
@@ -139,13 +140,13 @@ const skuString = computed(() => {
139140
}
140141
141142
.title-text {
142-
font-size: 16px;
143+
font-size: 13px;
143144
font-weight: 500;
144145
line-height: 20px;
145146
}
146147
147148
.spec-text {
148-
font-size: 16px;
149+
font-size: 10px;
149150
font-weight: 400;
150151
color: #999999;
151152
min-width: 0;
@@ -157,13 +158,13 @@ const skuString = computed(() => {
157158
}
158159
159160
.price-text {
160-
font-size: 16px;
161+
font-size: 11px;
161162
font-weight: 500;
162163
font-family: OPPOSANS;
163164
}
164165
165166
.total-text {
166-
font-size: 16px;
167+
font-size: 10px;
167168
font-weight: 400;
168169
line-height: 16px;
169170
color: #999999;

‎src/views/mall/promotion/kefu/components/tools/emoji.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,8 @@ export const useEmoji = () => {
8080
/**
8181
* 将文本中的表情替换成图片
8282
*
83-
* @param data 文本
8483
* @return 替换后的文本
84+
* @param content 消息内容
8585
*/
8686
const replaceEmoji = (content: string) => {
8787
let newData = content
@@ -93,7 +93,7 @@ export const useEmoji = () => {
9393
const emojiFile = getEmojiFileByName(item)
9494
newData = newData.replace(
9595
item,
96-
`<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${emojiFile}"/>`
96+
`<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${emojiFile}" alt=""/>`
9797
)
9898
})
9999
}

‎src/views/mall/trade/order/components/OrderTableColumn.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
<template #header>
4242
<div
4343
class="mr-[20px] h-[35px] flex items-center pl-[10px] pr-[10px]"
44-
style="background-color: #f7f7f7"
44+
style="background-color: var(--app-content-bg-color)"
4545
>
4646
<span class="mr-20px">订单号：{{ scope.row.no }} </span>
4747
<span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span>

‎src/views/mall/trade/order/detail/index.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -397,13 +397,14 @@ onMounted(async () => {
397397
align-items: center;
398398
min-height: 30px;
399399
padding: 10px;
400-
background-color: #f7f8fa;
400+
border-radius: var(--el-card-border-radius);
401+
background-color: var(--app-content-bg-color);
401402
402403
&::before {
403404
position: absolute;
404405
top: 10px;
405406
left: 13px; /* 将伪元素水平居中 */
406-
border-color: transparent #f7f8fa transparent transparent; /* 尖角颜色，左侧朝向 */
407+
border-color: transparent var(--app-content-bg-color) transparent transparent; /* 尖角颜色，左侧朝向 */
407408
border-style: solid;
408409
border-width: 8px; /* 调整尖角大小 */
409410
content: ''; /* 必须设置 content 属性 */

0 commit comments

Comments
 (0)