fix item style

src/pages/fulfillment/OrderFulfillmentDetail.vue

@@ -14,24 +14,22 @@
 				<t-cell title="处理人" :note="fulfillment.verifier?.name || fulfillment.verifierUserId || '未处理'" />
 				<t-cell v-if="fulfillment.reason" title="原因" :note="fulfillment.reason" />
 				<t-cell v-if="fulfillment.remark" title="备注" :note="fulfillment.remark" />
+				<div class="photo-wrap bg-white">
+					<media-selector
+						:model-value="fulfillmentPhotoURLList"
+						:photo-items="fulfillmentPhotoItems"
+						:show-add="false"
+						:show-remove="false"
+						:show-viewer-actions="false"
+						title="履约照片"
+					/>
+				</div>
 			</t-cell-group>
-			<div class="photos" v-entrance-transition="35">
-				<media-selector
-					:model-value="fulfillmentPhotoURLList"
-					:photo-items="fulfillmentPhotoItems"
-					:show-add="false"
-					:show-remove="false"
-					:show-viewer-actions="false"
-					title="履约照片"
-				/>
-			</div>
 			<t-cell-group class="items" title="履约明细" theme="card" v-entrance-transition="70">
 				<t-cell
 					class="item"
 					v-for="item in fulfillment.itemList || []"
 					:key="item.id"
-					:title="item.productNameSnapshot || '未命名产品'"
-					:note="getFulfillmentQuantityText(item)"
 				>
 					<template #leftIcon>
 						<t-image
@@ -47,17 +45,21 @@
 							v-text="(item.productNameSnapshot || '产').slice(0, 1)"
 						/>
 					</template>
-					<template #description>
+					<template #title>
-						<div class="item-description">
+						<div class="title">
+							<span class="clip-text" v-text="item.productNameSnapshot || '未命名产品'" />
 							<t-tag v-if="isGiftedFulfillmentItem(item)" size="small" theme="success" content="赠送" />
 							<product-sku-tags
+								class="tags"
 								:product-name="item.productNameSnapshot"
 								:snapshot="item.skuSpecSnapshot"
 								:fallback="item.specSummarySnapshot || item.skuNameSnapshot || '默认 SKU'"
-								:unit="item.unitSnapshot"
 							/>
 						</div>
 					</template>
+					<template #note>
+						<span class="keep-text" v-text="getFulfillmentQuantityText(item)" />
+					</template>
 				</t-cell>
 				<t-cell v-if="!fulfillment.itemList?.length" title="暂无履约明细" />
 			</t-cell-group>
@@ -342,6 +344,59 @@ onUnmounted(() => navBarStore.clearRight());
 	display: flex;
 	flex-direction: column;
 
+	.photo-wrap {
+		padding: .75rem 1rem;
+	}
+
+	.items {
+
+		.item {
+			padding: 10px;
+
+			:deep(.t-cell__title) {
+				display: flex;
+				align-items: center;
+			}
+
+			.avatar {
+				width: 2rem;
+				height: 2rem;
+				border-radius: .5rem !important;
+			}
+
+			.title {
+				gap: .375rem;
+				display: flex;
+				min-width: 0;
+				flex-wrap: nowrap;
+				align-items: center;
+
+				.tags {
+					flex-wrap: nowrap;
+				}
+			}
+		}
+	}
+
+	.stock-preview {
+		margin: 0 1rem;
+		padding: 1rem .5rem .75rem;
+		background: var(--td-bg-color-container, #fff);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1.25rem;
+
+		.title {
+			padding: 0 .5rem .5rem;
+			font-size: .875rem;
+			font-weight: 600;
+		}
+
+		:deep(.t-loading) {
+			justify-content: center;
+			padding: 1rem 0;
+		}
+	}
+
 	.actions {
 		--td-button-border-radius: 1rem;
 
@@ -364,52 +419,6 @@ onUnmounted(() => navBarStore.clearRight());
 
 		.t-button { flex: 1 1 auto; }
 	}
-
-	.photos {
-		margin: 0 1rem;
-		padding: 1rem;
-		background: var(--td-bg-color-container, #fff);
-		box-shadow: var(--td-shadow-1);
-		border-radius: 1.25rem;
-	}
-
-	.stock-preview {
-		margin: 0 1rem;
-		padding: 1rem .5rem .75rem;
-		background: var(--td-bg-color-container, #fff);
-		box-shadow: var(--td-shadow-1);
-		border-radius: 1.25rem;
-
-		.title {
-			padding: 0 .5rem .5rem;
-			font-size: .875rem;
-			font-weight: 600;
-		}
-
-		:deep(.t-loading) {
-			justify-content: center;
-			padding: 1rem 0;
-		}
-	}
-
-	.items {
-
-		.item {
-			padding: 10px;
-
-			.item-description {
-				gap: .375rem;
-				display: flex;
-				flex-wrap: wrap;
-				align-items: center;
-			}
-
-			.avatar {
-				width: 3rem;
-				height: 3rem;
-			}
-		}
-	}
 }
 
 </style>