fix PackageConfigEdit.vue style

src/pages/package/PackageConfigEdit.vue

@@ -13,27 +13,50 @@
 			<t-form-item label="标准价（元）" required-mark>
 				<t-input v-model.trim="standardAmountText" type="number" align="right" borderless placeholder="例如 1288.00" />
 			</t-form-item>
-			<t-form-item label="状态" arrow @click="openStatusPicker">
+			<t-form-item label="状态" arrow @click="openStatusPicker" content-align="right">
 				<span class="picker-text" v-text="getPackageConfigStatusText(form.status)" />
 			</t-form-item>
-			<t-form-item label="开始时间" arrow @click="openBeginPicker">
+			<t-form-item label="开始时间" arrow @click="openBeginPicker" content-align="right">
 				<span class="picker-text" v-text="beginAtText || '不限'" />
 			</t-form-item>
-			<t-form-item label="结束时间" arrow @click="openEndPicker">
+			<t-form-item label="结束时间" arrow @click="openEndPicker" content-align="right">
 				<span class="picker-text" v-text="endAtText || '不限'" />
 			</t-form-item>
 		</t-form>
-		<section class="items" v-entrance-transition="70">
+		<card-container
-			<div class="section-title"><strong>产品权益</strong><span>至少一项，数量最多三位小数</span></div>
+			title="产品权益"
-			<div v-for="(item, index) in form.itemList" :key="item.clientKey" class="item">
+			description="至少一项，配额最多三位小数"
-				<div class="item-head"><span v-text="`权益 ${index + 1}`" /><t-button theme="danger" variant="text" size="small" @click="removeItem(index)">删除</t-button></div>
+			v-entrance-transition="70"
-				<t-input v-model="item.productName" borderless placeholder="产品名称" />
+		>
-				<t-input v-model.trim="item.unit" borderless placeholder="单位，例如 盒、次" />
+			<div class="items">
-				<t-input v-model.trim="item.defaultQuantity" type="number" borderless placeholder="默认数量" />
+				<t-form
-				<t-input v-model="item.remark" borderless placeholder="备注（可选）" />
+					class="item"
+					v-for="(item, index) in form.itemList"
+					:key="item.clientKey"
+					label-width="6rem"
+				>
+					<div class="header">
+						<t-input v-model="item.productName" borderless placeholder="产品名称" />
+						<t-button theme="danger" variant="text" size="small" @click="removeItem(index)">删除</t-button>
+					</div>
+					<t-form-item label="单位" required-mark>
+						<t-input v-model.trim="item.unit" borderless placeholder="例如 盒、次" />
+					</t-form-item>
+					<t-form-item label="默认配额" required-mark>
+						<t-input v-model.trim="item.defaultQuantity" type="number" borderless />
+					</t-form-item>
+					<t-form-item label="备注">
+						<t-input v-model="item.remark" borderless />
+					</t-form-item>
+				</t-form>
+				<t-button
+					class="cell-button"
+					theme="primary"
+					@click="addItem"
+					content="添加产品权益"
+				/>
 			</div>
-			<t-button class="add-item" theme="primary" variant="dashed" block @click="addItem">添加产品权益</t-button>
+		</card-container>
-		</section>
 		<t-popup v-model="storePickerVisible" placement="bottom">
 			<t-picker v-model="storePickerDraft" :columns="storePickerColumns" title="选择门店" @cancel="storePickerVisible = false" @confirm="confirmStore" />
 		</t-popup>
@@ -309,46 +332,30 @@ onUnmounted(() => navBarStore.clearRight());
 
 <style scoped lang="less">
 .package-config-edit {
+	gap: 1rem;
+	display: flex;
 	padding: calc(var(--app-nav-height) + 1rem) 0 calc(1rem + env(safe-area-inset-bottom, 0));
-
+	flex-direction: column;
-	.form {
-		border-radius: .75rem;
-	}
-
-	.picker-text {
-		width: 100%;
-		text-align: right;
-	}
 
 	.items {
-		padding: 1rem;
+		padding: 1rem 0;
-	}
 
-	.section-title,
+		.item {
-	.item-head {
+			gap: .5rem;
-		display: flex;
+			padding: .5rem 1rem;
-		align-items: center;
+			margin-bottom: .75rem;
-		justify-content: space-between;
+			border: 1px dashed var(--td-component-border);
-	}
+			border-radius: 1rem;
 
-	.section-title {
+			.header {
-		color: var(--td-text-color-secondary);
+				display: flex;
-		margin-bottom: .5rem;
+				justify-content: space-between;
-		font-size: .8125rem;
+			}
-	}
 
-	.item {
+			:deep(.t-form__item) {
-		gap: .5rem;
+				padding: .25rem 0;
-		padding: .75rem;
+			}
-		margin-bottom: .75rem;
+		}
-		display: grid;
-		background: var(--td-bg-color-container);
-		box-shadow: var(--td-shadow-1);
-		border-radius: .75rem;
-	}
-
-	.item-head {
-		color: var(--td-text-color-secondary);
 	}
 
 	.add-item {