hhyykk/ipms-sjy-ui
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy-ui.git synced 2025-02-08 14:44:58 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

【优化】客服订单卡片样式优化

Browse Source
This commit is contained in:
puhui999 2024-07-17 15:17:58 +08:00
parent 416df14b8c
commit 34542cae4b
2 changed files with 17 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue
View File

@ -13,7 +13,7 @@
<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-20px">
<div class="order-no">订单号：{{ getMessageContent.no }}</div> <div class="order-no">订单号：{{ getMessageContent.no }}</div>
<div :class="formatOrderColor(getMessageContent)" class="order-state font-26"> <div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
{{ formatOrderStatus(getMessageContent) }} {{ formatOrderStatus(getMessageContent) }}
</div> </div>
</div> </div>
@ -26,7 +26,7 @@
:title="item.spuName" :title="item.spuName"
/> />
</div> </div>
<div class="pay-box mt-30px flex justify-end pr-20px"> <div class="pay-box flex justify-end pr-20px">
<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 }} 件商品,总金额:
@ -108,23 +108,23 @@ function formatOrderStatus(order: any) {
background-color: #e2e2e2; background-color: #e2e2e2;
.order-card-header { .order-card-header {
height: 80px; height: 28px;
.order-no { .order-no {
font-size: 26px; font-size: 16px;
font-weight: 500; font-weight: 500;
} }
} }
.pay-box { .pay-box {
.discounts-title { .discounts-title {
font-size: 24px; font-size: 16px;
line-height: normal; line-height: normal;
color: #999999; color: #999999;
} }
.discounts-money { .discounts-money {
font-size: 24px; font-size: 16px;
line-height: normal; line-height: normal;
color: #999; color: #999;
font-family: OPPOSANS; font-family: OPPOSANS;
@ -134,34 +134,6 @@ function formatOrderStatus(order: any) {
color: #333; color: #333;
} }
} }
.order-card-footer {
height: 100px;
.more-item-box {
padding: 20px;
.more-item {
height: 60px;
.title {
font-size: 26px;
}
}
}
.more-btn {
color: #999999;
font-size: 24px;
}
.content {
width: 154px;
color: #333333;
font-size: 26px;
font-weight: 500;
}
}
} }
.warning-color { .warning-color {

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

@ -110,33 +110,26 @@ const skuString = computed(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.score-img {
width: 36px;
height: 36px;
margin: 0 4px;
}
.ss-order-card-warp { .ss-order-card-warp {
max-width: 60%;
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
background-color: #e2e2e2; background-color: #e2e2e2;
.img-box { .img-box {
width: 164px; width: 80px;
height: 164px; height: 80px;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
.order-img { .order-img {
width: 164px; width: 80px;
height: 164px; height: 80px;
} }
} }
.box-right { .box-right {
flex: 1; flex: 1;
// width: 500px;
// height: 164px;
position: relative; position: relative;
.tool-box { .tool-box {
@ -147,13 +140,13 @@ const skuString = computed(() => {
} }
.title-text { .title-text {
font-size: 28px; font-size: 16px;
font-weight: 500; font-weight: 500;
line-height: 40px; line-height: 20px;
} }
.spec-text { .spec-text {
font-size: 24px; font-size: 16px;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
min-width: 0; min-width: 0;
@ -165,15 +158,15 @@ const skuString = computed(() => {
} }
.price-text { .price-text {
font-size: 24px; font-size: 16px;
font-weight: 500; font-weight: 500;
font-family: OPPOSANS; font-family: OPPOSANS;
} }
.total-text { .total-text {
font-size: 24px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 16px;
color: #999999; color: #999999;
margin-left: 8px; margin-left: 8px;
} }