优化

hdApp/src/admin/member/level.vue

@@ -10,7 +10,7 @@
 		<view class="main-content">
 			<!-- 会员等级表格 -->
 			<view class="table-container">
-				<t-table :headerBackgroundColor="'#f8f9ff'">
+				<t-table :headerBackgroundColor="'#f0f9f0'">
 					<view>
 						<t-tr header>
 							<t-th>
@@ -64,14 +64,8 @@
 
 		<!-- 底部按钮 -->
 		<view class="app-footer">
-			<view class="button-group">
-				<view class="btn btn-secondary" @click="goBack()">
-					<text class="btn-text">返回上页</text>
-				</view>
-				<view class="btn btn-primary" @click="saveData">
-					<text class="btn-text">提交修改</text>
-				</view>
-			</view>
+			<view class="admin-button-com big default" @click="goBack()">返回上页</view>
+			<view style="margin-left:50rpx;" class="admin-button-com big blue" @click="saveData">提交修改</view>
 		</view>
 	</view>
 </template>
@@ -142,30 +136,22 @@ export default {
 			if (!this.validateData()) {
 				return;
 			}
-
 			const confirmContent = '确认提交？提交后将不能再修改';
 			this.$util.confirmModal({ content: confirmContent }, () => {
 				const requestData = {
 					data: this.map,
 					reduceDay: this.reduceDay
 				};
-
 				modifyLevel(requestData).then(res => {
 					if (res.code === 1) {
 						this.$msg(res.msg);
 						setTimeout(() => {
 							uni.navigateBack();
 						}, 900);
-					} else {
-						this.$msg(res.msg || '保存失败，请重试');
 					}
-				}).catch(err => {
-					console.error('保存会员等级设置失败:', err);
-					this.$msg('保存失败，请重试');
-				});
-			});
+				})
+			})
 		},
-
 		/**
 		 * 验证表单数据
 		 * @returns {boolean} 验证结果
@@ -204,10 +190,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 .app-content {
-	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+	background: linear-gradient(135deg, #f0f9f0 0%, #a8e6a8 100%);
 	min-height: 100vh;
 	padding: 0;
-	padding-bottom: 160rpx; /* 为底部按钮预留足够空间 */
+	padding-bottom: 120rpx; /* 为底部按钮预留足够空间 */
 	display: flex;
 	flex-direction: column;
 }
@@ -255,7 +241,7 @@ export default {
 		border: none;
 		
 		.t-tr {
-			border-bottom: 1rpx solid #f0f2f5;
+			border-bottom: 1rpx solid #e8f5e8;
 			
 			&:last-child {
 				border-bottom: none;
@@ -264,7 +250,7 @@ export default {
 		
 		.t-th, .t-td {
 			padding: 24rpx 20rpx;
-			border-right: 1rpx solid #f0f2f5;
+			border-right: 1rpx solid #e8f5e8;
 			
 			&:last-child {
 				border-right: none;
@@ -272,29 +258,30 @@ export default {
 		}
 		
 		.t-th {
-			background: #f8f9ff !important;
+			background: #f0f9f0 !important;
 		}
 	}
 }
 
 .table-header {
-	color: #2c3e50;
+	color: #2d5f3f;
 	font-size: 32rpx;
 	font-weight: 600;
 }
 
 .level-name {
-	color: #2c3e50;
+	color: #fff;
 	font-weight: 600;
 	font-size: 32rpx;
 	padding: 8rpx 16rpx;
-	background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
-	background: -webkit-linear-gradient(45deg, #667eea 0%, #764ba2 100%);
+	background: linear-gradient(45deg, #4caf50 0%, #2e7d32 100%);
+	background: -webkit-linear-gradient(45deg, #4caf50 0%, #2e7d32 100%);
 	color: #fff;
 	border-radius: 20rpx;
 	display: inline-block;
 	min-width: 120rpx;
 	text-align: center;
+	box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.3);
 }
 
 .input-wrapper {
@@ -304,23 +291,23 @@ export default {
 .amount-input {
 	width: 200rpx;
 	height: 70rpx;
-	border: 2rpx solid #e1e8ed;
+	border: 2rpx solid #c8e6c9;
 	border-radius: 12rpx;
 	padding: 0 20rpx;
 	font-size: 30rpx;
-	color: #2c3e50;
+	color: #2d5f3f;
 	text-align: center;
 	background: #fff;
 	transition: all 0.3s ease;
 	
 	&:focus {
-		border-color: #667eea;
-		box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
+		border-color: #4caf50;
+		box-shadow: 0 0 0 6rpx rgba(76, 175, 80, 0.15);
 		outline: none;
 	}
 	
 	&::placeholder {
-		color: #bdc3c7;
+		color: #81c784;
 		font-size: 26rpx;
 	}
 }
@@ -331,13 +318,13 @@ export default {
 	border-radius: 16rpx;
 	padding: 40rpx 30rpx;
 	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
-	margin-bottom: 120rpx; /* 增加底部间距，避免被按钮遮挡 */
+	margin-bottom: 60rpx; /* 增加底部间距，避免被按钮遮挡 */
 }
 
 .rule-title {
 	font-size: 36rpx;
 	font-weight: 600;
-	color: #2c3e50;
+	color: #2d5f3f;
 	margin-bottom: 24rpx;
 	text-align: center;
 }
@@ -353,39 +340,38 @@ export default {
 
 .rule-text {
 	font-size: 32rpx;
-	color: #2c3e50;
+	color: #2d5f3f;
 	font-weight: 500;
 }
 
 .day-input {
 	width: 120rpx;
 	height: 60rpx;
-	border: 2rpx solid #e1e8ed;
+	border: 2rpx solid #c8e6c9;
 	border-radius: 12rpx;
 	padding: 0 16rpx;
 	font-size: 30rpx;
-	color: #2c3e50;
+	color: #2d5f3f;
 	text-align: center;
 	background: #fff;
 	transition: all 0.3s ease;
 	
 	&:focus {
-		border-color: #667eea;
-		box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
+		border-color: #4caf50;
+		box-shadow: 0 0 0 6rpx rgba(76, 175, 80, 0.15);
 		outline: none;
 	}
 	
 	&::placeholder {
-		color: #bdc3c7;
+		color: #81c784;
 		font-size: 26rpx;
 	}
 }
 
 .rule-tip {
 	font-size: 24rpx;
-	color: #95a5a6;
+	color: #66bb6a;
 	text-align: center;
-	font-style: italic;
 }
 
 /* 底部按钮区域 */
@@ -395,77 +381,16 @@ export default {
 	left: 0;
 	right: 0;
 	background: #fff;
-	padding: 25rpx 30rpx 35rpx;
-	border-radius: 20rpx 20rpx 0 0;
+	padding: 35rpx 30rpx 40rpx;
 	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.12);
 	z-index: 999;
-}
-
-.button-group {
-	display: flex;
-	gap: 24rpx;
-	justify-content: center;
-}
-
-.btn {
-	flex: 1;
-	min-width: 200rpx;
-	max-width: 320rpx;
-	height: 88rpx;
-	border-radius: 44rpx;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	transition: all 0.3s ease;
-	position: relative;
-	overflow: hidden;
-	padding: 0 30rpx; /* 增加内边距防止文字溢出 */
-	
-	&::before {
-		content: '';
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background: rgba(255, 255, 255, 0.2);
-		opacity: 0;
-		transition: opacity 0.3s ease;
-	}
-	
-	&:active::before {
-		opacity: 1;
-	}
+	min-height: 120rpx;
 }
 
-.btn-secondary {
-	background: linear-gradient(45deg, #95a5a6, #7f8c8d);
-	box-shadow: 0 4rpx 15rpx rgba(149, 165, 166, 0.4);
-	
-	&:active {
-		transform: translateY(2rpx);
-		box-shadow: 0 2rpx 8rpx rgba(149, 165, 166, 0.4);
-	}
-}
 
-.btn-primary {
-	background: linear-gradient(45deg, #667eea, #764ba2);
-	box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.4);
-	
-	&:active {
-		transform: translateY(2rpx);
-		box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.4);
-	}
-}
-
-.btn-text {
-	color: #fff;
-	font-size: 32rpx;
-	font-weight: 600;
-	white-space: nowrap; /* 防止文字换行 */
-	text-overflow: ellipsis; /* 文字溢出时显示省略号 */
-	overflow: hidden;
-}
 
 /* 响应式设计 */
 @media screen and (max-width: 750rpx) {
@@ -490,18 +415,11 @@ export default {
 		gap: 12rpx;
 	}
 	
-	.button-group {
+	.app-footer {
+		padding: 30rpx 20rpx 35rpx;
 		flex-direction: column;
 		gap: 16rpx;
-		
-		.btn {
-			max-width: none;
-			min-width: auto;
-		}
-	}
-	
-	.app-footer {
-		padding: 20rpx 20rpx 30rpx;
+		min-height: 140rpx;
 	}
 }
 
@@ -514,9 +432,7 @@ export default {
 	animation: slideInUp 0.8s ease-out;
 }
 
-.app-footer {
-	animation: slideInUp 1s ease-out;
-}
+
 
 @keyframes slideInUp {
 	from {
@@ -537,13 +453,13 @@ export default {
 
 @keyframes focusGlow {
 	0% {
-		box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
+		box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
 	}
 	50% {
-		box-shadow: 0 0 0 8rpx rgba(102, 126, 234, 0.2);
+		box-shadow: 0 0 0 8rpx rgba(76, 175, 80, 0.2);
 	}
 	100% {
-		box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
+		box-shadow: 0 0 0 6rpx rgba(76, 175, 80, 0.15);
 	}
 }
 </style>