修改样式

hdApp/src/admin/recharge/discount.vue

@@ -24,52 +24,49 @@
 				</view>
 			</view>
 
-			<!-- 充值档位列表 -->
-			<view class="tier-list">
-				<view class="tier-item" v-for="(item, inIndex) in map" :key="inIndex">
-					<view class="tier-badge">
-						<text class="tier-number">{{ inIndex + 1 }}</text>
+					<!-- 充值档位表格 -->
+		<view class="tier-table">
+			<!-- 表头 -->
+			<view class="table-header">
+				<view class="header-cell serial">序号</view>
+				<view class="header-cell recharge">充值金额(¥)</view>
+				<view class="header-cell give">赠送金额(¥)</view>
+				<view class="header-cell discount">折扣率</view>
+			</view>
+			
+			<!-- 表格内容 -->
+			<view class="table-body">
+				<view class="table-row" v-for="(item, inIndex) in map" :key="inIndex">
+					<view class="table-cell serial">
+						<text class="serial-number">{{ inIndex + 1 }}</text>
 					</view>
-					<view class="tier-content">
-						<view class="tier-row">
-							<view class="input-section">
-								<view class="input-header">
-									<text class="input-label">充值金额</text>
-									<text class="currency-symbol">¥</text>
-								</view>
-								<input
-									v-model="item.recharge"
-									type="digit"
-									class="amount-input recharge-input"
-									@focus="() => clearRecharge(inIndex)"
-									placeholder="0"
-								/>
-							</view>
-							
-							<view class="input-section">
-								<view class="input-header">
-									<text class="input-label">赠送金额</text>
-									<text class="currency-symbol">¥</text>
-								</view>
-								<input
-									v-model="item.give"
-									type="digit"
-									class="amount-input give-input"
-									@focus="() => clearGive(inIndex)"
-									placeholder="0"
-								/>
-							</view>
-						</view>
-						
-						<!-- 折扣显示 -->
-						<view class="discount-display" v-if="item.recharge && item.give">
-							<text class="discount-text">
-								相当于 {{ getDiscountRate(item.recharge, item.give) }} 折优惠
-							</text>
-						</view>
+					<view class="table-cell recharge">
+						<input
+							v-model="item.recharge"
+							type="digit"
+							class="table-input recharge-input"
+							@focus="() => clearRecharge(inIndex)"
+							placeholder="0"
+						/>
+					</view>
+					<view class="table-cell give">
+						<input
+							v-model="item.give"
+							type="digit"
+							class="table-input give-input"
+							@focus="() => clearGive(inIndex)"
+							placeholder="0"
+						/>
+					</view>
+					<view class="table-cell discount">
+						<text class="discount-text" v-if="item.recharge && item.give">
+							{{ getDiscountRate(item.recharge, item.give) }} 折
+						</text>
+						<text class="discount-placeholder" v-else>--</text>
 					</view>
 				</view>
 			</view>
+		</view>
 
 
 		</view>
@@ -308,125 +305,155 @@ export default {
 	}
 }
 
-/* ==== 档位列表 ==== */
-.tier-list {
-	.tier-item {
-		background: #fff;
-		border-radius: 16upx;
-		margin-bottom: 24upx;
-		overflow: hidden;
-		box-shadow: 0 4upx 16upx rgba(0, 0, 0, 0.06);
-		border: 1upx solid #e8f5e8;
-		position: relative;
+/* ==== 表格样式 ==== */
+.tier-table {
+	background: #fff;
+	border-radius: 12upx;
+	overflow: hidden;
+	border: 1upx solid #e5e5e5;
+	box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.06);
+	
+	.table-header {
+		display: flex;
+		background: #f8f9fa;
+		border-bottom: 1upx solid #e5e5e5;
 		
-		.tier-badge {
-			position: absolute;
-			top: 0;
-			right: 0;
-			background: linear-gradient(45deg, #049E2C, #09C567);
-			width: 60upx;
-			height: 60upx;
-			border-radius: 0 16upx 0 60upx;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			z-index: 10;
+		.header-cell {
+			padding: 24upx 16upx;
+			text-align: center;
+			font-size: 28upx;
+			font-weight: 600;
+			color: #333;
+			border-right: 1upx solid #e5e5e5;
 			
-			.tier-number {
-				color: #fff;
-				font-size: 24upx;
-				font-weight: 700;
+			&:last-child {
+				border-right: none;
+			}
+			
+			&.serial {
+				flex: 0 0 120upx;
+			}
+			
+			&.recharge {
+				flex: 1;
+			}
+			
+			&.give {
+				flex: 1;
+			}
+			
+			&.discount {
+				flex: 0 0 160upx;
 			}
 		}
-		
-		.tier-content {
-			padding: 30upx;
-			padding-top: 40upx;
+	}
+	
+	.table-body {
+		.table-row {
+			display: flex;
+			border-bottom: 1upx solid #f0f0f0;
+			transition: background-color 0.2s ease;
+			
+			&:hover {
+				background-color: #fafafa;
+			}
+			
+			&:last-child {
+				border-bottom: none;
+			}
 			
-			.tier-row {
+			.table-cell {
+				padding: 20upx 16upx;
+				text-align: center;
+				border-right: 1upx solid #f0f0f0;
 				display: flex;
-				align-items: flex-end;
-				justify-content: space-between;
-				gap: 30upx;
-				margin-bottom: 20upx;
+				align-items: center;
+				justify-content: center;
+				
+				&:last-child {
+					border-right: none;
+				}
+				
+				&.serial {
+					flex: 0 0 120upx;
+					
+					.serial-number {
+						width: 40upx;
+						height: 40upx;
+						background: #049E2C;
+						color: #fff;
+						border-radius: 50%;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						font-size: 24upx;
+						font-weight: 600;
+					}
+				}
+				
+				&.recharge {
+					flex: 1;
+				}
+				
+				&.give {
+					flex: 1;
+				}
+				
+				&.discount {
+					flex: 0 0 160upx;
+					
+					.discount-text {
+						font-size: 26upx;
+						color: #ff6b35;
+						font-weight: 600;
+					}
+					
+					.discount-placeholder {
+						font-size: 24upx;
+						color: #ccc;
+					}
+				}
 			}
 		}
 	}
 }
 
-/* ==== 输入区域 ==== */
-.input-section {
-	flex: 1;
+/* ==== 表格输入框样式 ==== */
+.table-input {
+	width: 100%;
+	height: 60upx;
+	border: 1upx solid #ddd;
+	border-radius: 6upx;
+	padding: 0 12upx;
+	font-size: 28upx;
+	font-weight: 500;
+	text-align: center;
+	color: #333;
+	background: #fff;
+	transition: all 0.2s ease;
 	
-	.input-header {
-		display: flex;
-		align-items: baseline;
-		margin-bottom: 12upx;
-		
-		.input-label {
-			font-size: 26upx;
-			color: #666;
-			font-weight: 500;
-			margin-right: 8upx;
-		}
-		
-		.currency-symbol {
-			font-size: 28upx;
-			color: #049E2C;
-			font-weight: 700;
-		}
+	&:focus {
+		border-color: #049E2C;
+		outline: none;
+		background: #f9fff9;
 	}
 	
-	.amount-input {
-		width: 100%;
-		height: 88upx;
-		border: 2upx solid #e1f4e3;
-		border-radius: 12upx;
-		padding: 0 20upx;
-		font-size: 36upx;
-		font-weight: 600;
-		text-align: center;
-		color: #1a1a1a;
-		background: #fff;
-		transition: all 0.3s ease;
-		
-		&:focus {
-			border-color: #09C567;
-			box-shadow: 0 0 0 6upx rgba(9, 197, 103, 0.1);
-			outline: none;
-		}
-		
-		&.recharge-input:focus {
-			color: #049E2C;
-		}
-		
-		&.give-input:focus {
-			color: #ff6b35;
-		}
-		
-		&::placeholder {
-			color: #bbb;
-			font-weight: 400;
-		}
+	&.recharge-input:focus {
+		border-color: #049E2C;
+	}
+	
+	&.give-input:focus {
+		border-color: #ff6b35;
+	}
+	
+	&::placeholder {
+		color: #ccc;
+		font-weight: 400;
 	}
 }
 
 
 
-/* ==== 折扣显示 ==== */
-.discount-display {
-	background: linear-gradient(45deg, #ffe5e5, #fff0e5);
-	border-radius: 12upx;
-	padding: 16upx 20upx;
-	text-align: center;
-	border: 1upx solid #ffd0d0;
-	
-	.discount-text {
-		font-size: 26upx;
-		color: #d84315;
-		font-weight: 600;
-	}
-}
 
 
 
@@ -445,33 +472,54 @@ export default {
 
 /* ==== 响应式设计 ==== */
 @media screen and (max-width: 450px) {
-	.tier-row {
-		flex-direction: column !important;
-		align-items: stretch !important;
-		gap: 20upx;
+	.tier-table {
+		.table-header,
+		.table-row {
+			font-size: 24upx;
+		}
+		
+		.header-cell,
+		.table-cell {
+			padding: 16upx 8upx;
+			
+			&.serial {
+				flex: 0 0 80upx;
+				
+				.serial-number {
+					width: 32upx;
+					height: 32upx;
+					font-size: 20upx;
+				}
+			}
+			
+			&.discount {
+				flex: 0 0 120upx;
+			}
+		}
 		
-		.input-section {
-			width: 100%;
+		.table-input {
+			height: 50upx;
+			font-size: 24upx;
 		}
 	}
 }
 
 /* ==== 动画效果 ==== */
-.tier-item {
-	animation: slideInUp 0.6s ease-out;
+.table-row {
+	animation: slideInUp 0.4s ease-out;
 	animation-fill-mode: both;
 	
 	&:nth-child(1) { animation-delay: 0.1s; }
-	&:nth-child(2) { animation-delay: 0.2s; }
-	&:nth-child(3) { animation-delay: 0.3s; }
-	&:nth-child(4) { animation-delay: 0.4s; }
-	&:nth-child(5) { animation-delay: 0.5s; }
+	&:nth-child(2) { animation-delay: 0.15s; }
+	&:nth-child(3) { animation-delay: 0.2s; }
+	&:nth-child(4) { animation-delay: 0.25s; }
+	&:nth-child(5) { animation-delay: 0.3s; }
 }
 
 @keyframes slideInUp {
 	from {
 		opacity: 0;
-		transform: translateY(30upx);
+		transform: translateY(20upx);
 	}
 	to {
 		opacity: 1;
@@ -479,8 +527,8 @@ export default {
 	}
 }
 
-.amount-input:focus {
-	animation: inputFocus 0.3s ease-out;
+.table-input:focus {
+	animation: inputFocus 0.2s ease-out;
 }
 
 @keyframes inputFocus {