diff --git a/src/pages/salesOrder/components/SalesOrderListCell.vue b/src/pages/salesOrder/components/SalesOrderListCell.vue
index 9232573..28380af 100644
--- a/src/pages/salesOrder/components/SalesOrderListCell.vue
+++ b/src/pages/salesOrder/components/SalesOrderListCell.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="sales-order-cell bg-white">
+	<div class="sales-order-cell" :class="{ cancelled: isCancelled }">
 		<div class="header">
 			<div class="left">
 				<t-image
@@ -172,10 +172,11 @@ const photoURL = computed(() => getCustomerPhotoURL(props.order.customer, 64));
 const orderNoText = computed(() => `订单号：${props.order.orderNo || props.order.id || "未知"}`);
 const totalProductQuantity = computed(() => sumProductQuantity("quantity"));
 const productSummaryText = computed(() => `共 ${itemList.value.length} 项 · 订单数量 ${totalProductQuantity.value}`);
-const isCancelledPendingRefund = computed(() => props.order.status === "CANCELLED" && props.order.refundStatus === "PENDING");
+const isCancelled = computed(() => props.order.status === "CANCELLED");
+const isCancelledPendingRefund = computed(() => isCancelled.value && props.order.refundStatus === "PENDING");
 const showRefundActions = computed(() => props.canRefund && isCancelledPendingRefund.value);
 const showMoreActionMenu = computed(() => props.canCancel || showRefundActions.value);
-const showReceiveAction = computed(() => props.canReceive && props.order.status !== "CANCELLED" && props.order.paymentStatus !== "PAID");
+const showReceiveAction = computed(() => props.canReceive && !isCancelled.value && props.order.paymentStatus !== "PAID");
 const canCancelOrder = computed(() => props.order.status === "ACTIVE");
 const canFulfillByPayment = computed(() => props.order.paymentStatus === "PAID" || props.canStoreManager);
 const showFulfillAction = computed(() => props.canFulfill && canFulfillByPayment.value && props.order.status === "ACTIVE");
@@ -241,8 +242,23 @@ function getProductText(item: NonNullable<SalesOrder["itemList"]>[number]): stri
 	gap: .5rem;
 	padding: 10px;
 	display: flex;
+	background: var(--td-bg-color-container);
 	flex-direction: column;
 
+	&.cancelled {
+		background: var(--td-gray-color-2);
+
+		.left,
+		.product,
+		.time-payment {
+			filter: grayscale(1);
+		}
+
+		.customer {
+			color: var(--td-text-color-secondary);
+		}
+	}
+
 	.header {
 		gap: .5rem;
 		display: flex;