feat(order-service): 优化客户订单状态与验收展示
This commit is contained in:
yml2213
@@ -526,19 +526,216 @@
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
.collect-link-status-steps {
|
||||
padding: 4px 2px 8px;
|
||||
.collect-link-order-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 18px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.collect-link-status-steps .ant-steps-item-title {
|
||||
font-size: 12px !important;
|
||||
.collect-link-order-meta strong {
|
||||
color: #0f172a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.collect-link-status-steps .ant-steps-item-description {
|
||||
max-width: 140px;
|
||||
font-size: 11px !important;
|
||||
line-height: 1.45;
|
||||
white-space: normal;
|
||||
.collect-link-description {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.collect-link-submitted {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e7edf5;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.collect-link-submitted-head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 5px 14px;
|
||||
}
|
||||
|
||||
.collect-link-submitted-head > span {
|
||||
display: grid;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.collect-link-submitted-head .ant-typography:last-child {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.collect-link-submitted-head > .ant-typography {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.collect-link-submitted-fields {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.collect-link-submitted-fields > div {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
padding: 8px 10px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #edf1f6;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.collect-link-submitted-fields span,
|
||||
.collect-link-submitted-screenshots > span {
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.collect-link-submitted-fields strong {
|
||||
color: #1e293b;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.collect-link-submitted-screenshots {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.collect-link-submitted-screenshots > div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.collect-link-submitted-screenshots .ant-image {
|
||||
overflow: hidden;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.collect-link-submitted-screenshots .ant-image-img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.collect-link-current-status {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
padding: 13px;
|
||||
color: #475569;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e8edf4;
|
||||
border-left: 4px solid #94a3b8;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.collect-link-current-status-index {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
background: #64748b;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.collect-link-current-status-copy {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.collect-link-current-status-copy > div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 3px 12px;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.collect-link-current-status-copy > div .ant-typography:last-child {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.collect-link-current-status-copy p {
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.collect-link-current-status.is-open,
|
||||
.collect-link-current-status.is-pending_material {
|
||||
color: #8a4b00;
|
||||
background: #fffaf0;
|
||||
border-color: #ffe7ba;
|
||||
border-left-color: #faad14;
|
||||
}
|
||||
|
||||
.collect-link-current-status.is-open .collect-link-current-status-index,
|
||||
.collect-link-current-status.is-pending_material .collect-link-current-status-index {
|
||||
background: #faad14;
|
||||
}
|
||||
|
||||
.collect-link-current-status.is-in_progress,
|
||||
.collect-link-current-status.is-unassigned {
|
||||
color: #0958d9;
|
||||
background: #f0f7ff;
|
||||
border-color: #d6e8ff;
|
||||
border-left-color: #1677ff;
|
||||
}
|
||||
|
||||
.collect-link-current-status.is-in_progress .collect-link-current-status-index,
|
||||
.collect-link-current-status.is-unassigned .collect-link-current-status-index {
|
||||
background: #1677ff;
|
||||
}
|
||||
|
||||
.collect-link-current-status.is-pending_acceptance {
|
||||
color: #531dab;
|
||||
background: #f9f0ff;
|
||||
border-color: #efdbff;
|
||||
border-left-color: #722ed1;
|
||||
}
|
||||
|
||||
.collect-link-current-status.is-pending_acceptance .collect-link-current-status-index {
|
||||
background: #722ed1;
|
||||
}
|
||||
|
||||
.collect-link-current-status.is-accepted {
|
||||
color: #237804;
|
||||
background: #f6ffed;
|
||||
border-color: #d9f7be;
|
||||
border-left-color: #52c41a;
|
||||
}
|
||||
|
||||
.collect-link-current-status.is-accepted .collect-link-current-status-index {
|
||||
background: #52c41a;
|
||||
}
|
||||
|
||||
.collect-link-current-status.is-problem {
|
||||
color: #a8071a;
|
||||
background: #fff1f0;
|
||||
border-color: #ffccc7;
|
||||
border-left-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.collect-link-current-status.is-problem .collect-link-current-status-index {
|
||||
background: #ff4d4f;
|
||||
}
|
||||
|
||||
.collect-link-status-message {
|
||||
@@ -626,6 +823,32 @@
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.collect-link-acceptance-video {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.collect-link-acceptance-video video {
|
||||
width: min(100%, 520px);
|
||||
max-height: 360px;
|
||||
background: #0f172a;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.collect-link-acceptance-video > div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 14px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.collect-link-acceptance-video a {
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.collect-link-title {
|
||||
margin: 0 0 4px !important;
|
||||
}
|
||||
@@ -898,6 +1121,15 @@
|
||||
grid-template-columns: 88px minmax(0, 1fr);
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.collect-link-order-meta,
|
||||
.collect-link-submitted-fields {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.collect-link-order-meta {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 兑换中心 (Redeem Page) ===== */
|
||||
|
||||
Reference in New Issue
Block a user