hhyykk/ipms-sjy-ui
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy-ui.git synced 2025-02-01 19:24: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 class="order-card-header flex items-center justify-between p-x-20px">
<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) }}
</div>
</div>
@ -26,7 +26,7 @@
:title="item.spuName"
/>
</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="discounts-title pay-color"
>共 {{ getMessageContent?.productCount }} 件商品,总金额:
@ -108,23 +108,23 @@ function formatOrderStatus(order: any) {
background-color: #e2e2e2;
.order-card-header {
height: 80px;
height: 28px;
.order-no {
font-size: 26px;
font-size: 16px;
font-weight: 500;
}
}
.pay-box {
.discounts-title {
font-size: 24px;
font-size: 16px;
line-height: normal;
color: #999999;
}
.discounts-money {
font-size: 24px;
font-size: 16px;
line-height: normal;
color: #999;
font-family: OPPOSANS;
@ -134,34 +134,6 @@ function formatOrderStatus(order: any) {
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 {

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

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