From 32268dbe76417c824983ee6eeaadcaf7eb2b9e64 Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Wed, 9 Sep 2026 11:21:07 +0800
Subject: [PATCH] fix PackageConfigList.vue style

---
 src/pages/package/PackageConfigList.vue | 158 ++++++++++++------------
 1 file changed, 81 insertions(+), 77 deletions(-)

diff --git a/src/pages/package/PackageConfigList.vue b/src/pages/package/PackageConfigList.vue
index ef0f8dd..0a11b7a 100644
--- a/src/pages/package/PackageConfigList.vue
+++ b/src/pages/package/PackageConfigList.vue
@@ -28,50 +28,48 @@
 				class="list fix-last-cell-line empty-cell-title-margin"
 				theme="card"
 			>
-				<div
+				<t-cell
 					class="item"
 					v-for="(item, index) in configList"
 					:key="item.id"
 					v-entrance-transition="index * 30"
 				>
-					<t-cell class="cell">
-						<template #title>
-							<div class="title">
-								<strong v-text="item.name || '未命名套餐'" />
-								<t-tag :content="getPackageConfigStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
+					<template #title>
+						<div class="title">
+							<strong v-text="item.name || '未命名套餐'" />
+							<t-tag :content="getPackageConfigStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
+						</div>
+					</template>
+					<template #description>
+						<div class="description">
+							<div class="products">
+								<t-tag
+									v-for="productItem in item.itemList || []"
+									:key="productItem.id || `${productItem.skuId}-${productItem.skuUnitId}`"
+									:content="getProductRightText(productItem)"
+									theme="primary"
+									variant="light"
+								/>
+								<t-tag v-if="!item.itemList?.length" content="暂无产品权益" />
 							</div>
-						</template>
-						<template #description>
-							<div class="description">
-								<div class="products">
-									<t-tag
-										v-for="productItem in item.itemList || []"
-										:key="productItem.id || `${productItem.skuId}-${productItem.skuUnitId}`"
-										:content="getProductRightText(productItem)"
+							<div class="price-actions">
+								<div class="price">
+									<span class="red">￥</span>
+									<span class="value red" v-text="formatPackageAmount(item.standardAmount)" />
+								</div>
+								<div v-if="item.id" class="actions" @click.stop>
+									<t-button
+										class="detail"
 										theme="primary"
-										variant="light"
+										size="extra-small"
+										content="详情"
+										@click.stop="toDetail(item)"
 									/>
-									<t-tag v-if="!item.itemList?.length" content="暂无产品权益" />
 								</div>
-								<div class="price-actions">
-									<div class="price">
-										<span class="red">￥</span>
-										<span class="value red" v-text="formatPackageAmount(item.standardAmount)" />
-									</div>
-									<div v-if="item.id" class="actions" @click.stop>
-										<t-button
-											class="detail"
-											theme="primary"
-											size="extra-small"
-											content="详情"
-											@click.stop="toDetail(item)"
-										/>
-									</div>
-									</div>
 								</div>
-						</template>
-					</t-cell>
-				</div>
+							</div>
+					</template>
+				</t-cell>
 			</t-cell-group>
 			<div v-else class="center-tips" v-text="loading ? '正在加载套餐配置' : '暂无套餐配置'" />
 			<div class="center-tips" v-text="loadStateText" />
@@ -256,60 +254,66 @@ onUnmounted(() => {
 	}
 
 	.list {
+		gap: 1rem;
+		display: flex;
 		padding-top: 1rem;
+		flex-direction: column;
 
 		.item {
-			background: var(--td-bg-color-container);
-			border-radius: 1rem;
-			overflow: hidden;
+			padding: 10px;
+			min-width: 0;
 
-			.cell {
-				padding: 10px;
+			:deep(.t-cell__title) {
+				min-width: 0;
+			}
 
-				.title {
-					gap: .5rem;
-					flex: 1;
+			.title {
+				gap: .5rem;
+				flex: 1;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+
+			.description {
+				display: flex;
+				flex-direction: column;
+				min-width: 0;
+
+				.products {
+					gap: .35rem;
+					width: 100%;
 					display: flex;
-					align-items: center;
-					justify-content: space-between;
-				}
+					min-width: 0;
+					max-width: 100%;
+					flex-wrap: nowrap;
+					margin-top: .5rem;
+					overflow-x: auto;
+					overflow-y: hidden;
+					white-space: nowrap;
+					scrollbar-width: none;
+					-webkit-overflow-scrolling: touch;
 
-				.description {
-					display: flex;
-					flex-direction: column;
-
-					.products {
-						gap: .35rem;
-						display: flex;
-						max-width: 100%;
-						flex-wrap: nowrap;
-						overflow-x: auto;
-						overflow-y: hidden;
-						white-space: nowrap;
-						scrollbar-width: none;
-						-webkit-overflow-scrolling: touch;
-
-						:deep(.t-tag) {
-							flex: 0 0 auto;
-						}
-
-						&::-webkit-scrollbar {
-							display: none;
-						}
+					:deep(.t-tag) {
+						flex: 0 0 auto;
 					}
 
-					.price-actions {
-						gap: .5rem;
-						display: flex;
-						margin-top: .5rem;
-						align-items: center;
-						justify-content: end;
+					&::-webkit-scrollbar {
+						display: none;
+					}
+				}
 
-						.price {
+				.price-actions {
+					gap: .5rem;
+					display: flex;
+					margin-top: .5rem;
+					align-items: center;
+					justify-content: end;
 
-							.value {
-								font-size: 1.25rem;
-							}
+					.price {
+
+						.value {
+							font-size: 1.25rem;
 						}
 					}
 				}