shish 7 months ago
parent
commit
7941638802
2 changed files with 149 additions and 92 deletions
  1. 93 72
      hdApp/src/admin/member/level.vue
  2. 56 20
      hdApp/src/admin/recharge/discount.vue

+ 93 - 72
hdApp/src/admin/member/level.vue

@@ -60,7 +60,7 @@
 
 		<!-- 底部按钮 -->
 		<view class="app-footer">
-			<view class="footer-btn admin-button-com big default" @click="goBack()">返回上页</view>
+			<view class="footer-btn admin-button-com big default" style="border:1upx solid #CCCCCC;" @click="goBack()">返回上页</view>
 			<view class="footer-btn admin-button-com big blue" @click="saveData">提交修改</view>
 		</view>
 	</view>
@@ -195,29 +195,31 @@ export default {
 	background: linear-gradient(135deg, #f0f9f0 0%, #a8e6a8 100%);
 	min-height: 100vh;
 	padding: 0;
-	padding-bottom: 120rpx; /* 为底部按钮预留足够空间 */
+	padding-bottom: 180upx; /* 为底部固定按钮预留足够空间 */
 	display: flex;
 	flex-direction: column;
+	position: relative;
+	z-index: 1;
 }
 
 /* 页面头部 */
 .page-header {
 	background: #fff;
-	padding: 40rpx 30rpx 30rpx;
-	margin-bottom: 30rpx;
-	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
-	border-radius: 0 0 20rpx 20rpx;
+	padding: 40upx 30upx 30upx;
+	margin-bottom: 30upx;
+	box-shadow: 0 2upx 12upx rgba(0, 0, 0, 0.08);
+	border-radius: 0 0 20upx 20upx;
 	
 	.page-title {
-		font-size: 44rpx;
+		font-size: 44upx;
 		font-weight: 600;
 		color: #2c3e50;
 		text-align: center;
-		margin-bottom: 12rpx;
+		margin-bottom: 12upx;
 	}
 	
 	.page-subtitle {
-		font-size: 28rpx;
+		font-size: 28upx;
 		color: #7f8c8d;
 		text-align: center;
 		opacity: 0.8;
@@ -226,24 +228,24 @@ export default {
 
 /* 主要内容区域 */
 .main-content {
-	padding: 0 30rpx;
+	padding: 0 30upx;
 	flex: 1;
 }
 
 /* 表格容器 */
 .table-container {
 	background: #fff;
-	border-radius: 16rpx;
-	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
+	border-radius: 16upx;
+	box-shadow: 0 4upx 20upx rgba(0, 0, 0, 0.08);
 	overflow: hidden;
-	margin-bottom: 40rpx;
+	margin-bottom: 40upx;
 	
 	/* 覆盖表格组件默认样式 */
 	:deep(.t-table) {
 		border: none;
 		
 		.t-tr {
-			border-bottom: 1rpx solid #e8f5e8;
+			border-bottom: 1upx solid #e8f5e8;
 			
 			&:last-child {
 				border-bottom: none;
@@ -251,8 +253,8 @@ export default {
 		}
 		
 		.t-th, .t-td {
-			padding: 24rpx 12rpx;
-			border-right: 1rpx solid #e8f5e8;
+			padding: 24upx 12upx;
+			border-right: 1upx solid #e8f5e8;
 			
 			&:last-child {
 				border-right: none;
@@ -260,11 +262,11 @@ export default {
 		}
 		
 		.t-th:first-child, .t-td:first-child {
-			padding: 24rpx 8rpx; /* 图标列更紧凑 */
+			padding: 24upx 8upx; /* 图标列更紧凑 */
 		}
 		
 		.t-th:last-child, .t-td:last-child {
-			padding: 24rpx 16rpx; /* 消费金额列稍微宽松一些 */
+			padding: 24upx 16upx; /* 消费金额列稍微宽松一些 */
 		}
 		
 		.t-th {
@@ -275,7 +277,7 @@ export default {
 
 .table-header {
 	color: #2d5f3f;
-	font-size: 32rpx;
+	font-size: 32upx;
 	font-weight: 600;
 }
 
@@ -288,35 +290,35 @@ export default {
 
 .member-badge-icon {
 	flex-shrink: 0;
-	filter: drop-shadow(0 2rpx 6rpx rgba(0,0,0,0.3));
+	filter: drop-shadow(0 2upx 6upx rgba(0,0,0,0.3));
 }
 
 .level-name {
 	color: #fff;
 	font-weight: 600;
-	font-size: 32rpx;
-	padding: 8rpx 16rpx;
+	font-size: 32upx;
+	padding: 8upx 16upx;
 	background: linear-gradient(45deg, #4caf50 0%, #2e7d32 100%);
 	background: -webkit-linear-gradient(45deg, #4caf50 0%, #2e7d32 100%);
 	color: #fff;
-	border-radius: 20rpx;
+	border-radius: 20upx;
 	display: inline-block;
-	min-width: 120rpx;
+	min-width: 120upx;
 	text-align: center;
-	box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.3);
+	box-shadow: 0 2upx 8upx rgba(76, 175, 80, 0.3);
 }
 
 .input-wrapper {
-	padding: 8rpx;
+	padding: 8upx;
 }
 
 .amount-input {
-	width: 200rpx;
-	height: 70rpx;
-	border: 2rpx solid #c8e6c9;
-	border-radius: 12rpx;
-	padding: 0 20rpx;
-	font-size: 30rpx;
+	width: 200upx;
+	height: 70upx;
+	border: 2upx solid #c8e6c9;
+	border-radius: 12upx;
+	padding: 0 20upx;
+	font-size: 30upx;
 	color: #2d5f3f;
 	text-align: center;
 	background: #fff;
@@ -324,30 +326,30 @@ export default {
 	
 	&:focus {
 		border-color: #4caf50;
-		box-shadow: 0 0 0 6rpx rgba(76, 175, 80, 0.15);
+		box-shadow: 0 0 0 6upx rgba(76, 175, 80, 0.15);
 		outline: none;
 	}
 	
 	&::placeholder {
 		color: #81c784;
-		font-size: 26rpx;
+		font-size: 26upx;
 	}
 }
 
 /* 降级规则设置 */
 .rule-container {
 	background: #fff;
-	border-radius: 16rpx;
-	padding: 40rpx 30rpx;
-	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
-	margin-bottom: 60rpx; /* 增加底部间距,避免被按钮遮挡 */
+	border-radius: 16upx;
+	padding: 40upx 30upx;
+	box-shadow: 0 4upx 20upx rgba(0, 0, 0, 0.08);
+	margin-bottom: 60upx; /* 增加底部间距,避免被按钮遮挡 */
 }
 
 .rule-title {
-	font-size: 36rpx;
+	font-size: 36upx;
 	font-weight: 600;
 	color: #2d5f3f;
-	margin-bottom: 24rpx;
+	margin-bottom: 24upx;
 	text-align: center;
 }
 
@@ -356,23 +358,23 @@ export default {
 	align-items: center;
 	justify-content: center;
 	flex-wrap: wrap;
-	gap: 16rpx;
-	margin-bottom: 20rpx;
+	gap: 16upx;
+	margin-bottom: 20upx;
 }
 
 .rule-text {
-	font-size: 32rpx;
+	font-size: 32upx;
 	color: #2d5f3f;
 	font-weight: 500;
 }
 
 .day-input {
-	width: 120rpx;
-	height: 60rpx;
-	border: 2rpx solid #c8e6c9;
-	border-radius: 12rpx;
-	padding: 0 16rpx;
-	font-size: 30rpx;
+	width: 120upx;
+	height: 60upx;
+	border: 2upx solid #c8e6c9;
+	border-radius: 12upx;
+	padding: 0 16upx;
+	font-size: 30upx;
 	color: #2d5f3f;
 	text-align: center;
 	background: #fff;
@@ -380,18 +382,18 @@ export default {
 	
 	&:focus {
 		border-color: #4caf50;
-		box-shadow: 0 0 0 6rpx rgba(76, 175, 80, 0.15);
+		box-shadow: 0 0 0 6upx rgba(76, 175, 80, 0.15);
 		outline: none;
 	}
 	
 	&::placeholder {
 		color: #81c784;
-		font-size: 26rpx;
+		font-size: 26upx;
 	}
 }
 
 .rule-tip {
-	font-size: 24rpx;
+	font-size: 24upx;
 	color: #66bb6a;
 	text-align: center;
 }
@@ -402,55 +404,74 @@ export default {
 	bottom: 0;
 	left: 0;
 	right: 0;
+	width: 100%;
 	background: #fff;
-	padding: 35rpx 30rpx 40rpx;
-	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.12);
-	z-index: 999;
+	padding: 20upx 30upx;
+	padding-bottom: calc(20upx + constant(safe-area-inset-bottom));
+	padding-bottom: calc(20upx + env(safe-area-inset-bottom));
+	box-shadow: 0 -2upx 10upx rgba(0, 0, 0, 0.08);
+	z-index: 9999;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	gap: 30rpx;
-	min-height: 120rpx;
-	flex-wrap: wrap;
+	gap: 20upx;
+	height: auto;
+	box-sizing: border-box;
+	border-top: 1upx solid #f0f0f0;
 }
 
 .footer-btn {
-	flex: 0 1 calc(50% - 15rpx);
-	min-width: 150rpx;
+	flex: 1;
+	height: 80upx;
+	line-height: 80upx;
+	min-width: 120upx;
+	border-radius: 8upx;
+	font-size: 32upx;
+	font-weight: 500;
+	border: none;
+	margin: 0;
+	padding: 0;
+	text-align: center;
 }
 
 
 
 /* 响应式设计 */
-@media screen and (max-width: 750rpx) {
+@media screen and (max-width: 750upx) {
 	.page-header {
-		padding: 30rpx 20rpx 20rpx;
+		padding: 30upx 20upx 20upx;
 		
 		.page-title {
-			font-size: 38rpx;
+			font-size: 38upx;
 		}
 		
 		.page-subtitle {
-			font-size: 26rpx;
+			font-size: 26upx;
 		}
 	}
 	
 	.main-content {
-		padding: 0 20rpx;
+		padding: 0 20upx;
 	}
 	
 	.rule-content {
 		flex-direction: column;
-		gap: 12rpx;
+		gap: 12upx;
 	}
 	
 	.app-footer {
-		padding: 30rpx 20rpx 35rpx;
-		gap: 16rpx;
+		padding: 20upx 30upx;
+		padding-bottom: calc(20upx + constant(safe-area-inset-bottom));
+		padding-bottom: calc(20upx + env(safe-area-inset-bottom));
+		gap: 16upx;
 	}
 	
 	.footer-btn {
-		flex: 0 1 calc(50% - 8rpx);
+		flex: 1;
+		height: 76upx;
+		line-height: 76upx;
+		min-width: 100upx;
+		font-size: 30upx;
 	}
 }
 
@@ -468,7 +489,7 @@ export default {
 @keyframes slideInUp {
 	from {
 		opacity: 0;
-		transform: translateY(30rpx);
+		transform: translateY(30upx);
 	}
 	to {
 		opacity: 1;
@@ -487,10 +508,10 @@ export default {
 		box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
 	}
 	50% {
-		box-shadow: 0 0 0 8rpx rgba(76, 175, 80, 0.2);
+		box-shadow: 0 0 0 8upx rgba(76, 175, 80, 0.2);
 	}
 	100% {
-		box-shadow: 0 0 0 6rpx rgba(76, 175, 80, 0.15);
+		box-shadow: 0 0 0 6upx rgba(76, 175, 80, 0.15);
 	}
 }
 </style>

+ 56 - 20
hdApp/src/admin/recharge/discount.vue

@@ -71,17 +71,15 @@
 
 		</view>
 
-		<!-- 底部操作区 -->
-		<view class="app-footer">
-			<view class="footer-buttons">
-				<view class="admin-button-com big default" @click="goBack()">
-					返回上页
-				</view>
-				<view class="admin-button-com big blue" @click="saveData">
-					保存配置
-				</view>
-			</view>
+	<!-- 底部操作区 -->
+	<view class="app-footer">
+		<view class="footer-btn admin-button-com big default" style="border:1upx solid #CCCCCC;" @click="goBack()">
+			返回上页
 		</view>
+		<view class="footer-btn admin-button-com big blue" @click="saveData">
+			保存配置
+		</view>
+	</view>
 	</view>
 </template>
 <script>
@@ -161,7 +159,7 @@ export default {
 .app-content {
 	min-height: 100vh;
 	background: linear-gradient(135deg, #f8fffe 0%, #eef7f0 100%);
-	padding-bottom: 140upx;
+	padding-bottom: 180upx;
 }
 
 /* ==== 页面头部 ==== */
@@ -459,15 +457,38 @@ export default {
 
 /* ==== 底部操作区 ==== */
 .app-footer {
-	.footer-buttons {
-		display: flex;
-		align-items: center;
-		gap: 30upx;
-		
-		.admin-button-com {
-			flex: 1;
-		}
-	}
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	width: 100%;
+	background: #fff;
+	padding: 20upx 30upx;
+	padding-bottom: calc(20upx + constant(safe-area-inset-bottom));
+	padding-bottom: calc(20upx + env(safe-area-inset-bottom));
+	box-shadow: 0 -2upx 10upx rgba(0, 0, 0, 0.08);
+	z-index: 9999;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 20upx;
+	height: auto;
+	box-sizing: border-box;
+	border-top: 1upx solid #f0f0f0;
+}
+
+.footer-btn {
+	flex: 1;
+	height: 80upx;
+	line-height: 80upx;
+	min-width: 120upx;
+	border-radius: 8upx;
+	font-size: 32upx;
+	font-weight: 500;
+	border: none;
+	margin: 0;
+	padding: 0;
+	text-align: center;
 }
 
 /* ==== 响应式设计 ==== */
@@ -502,6 +523,21 @@ export default {
 			font-size: 32upx;
 		}
 	}
+	
+	.app-footer {
+		padding: 20upx 30upx;
+		padding-bottom: calc(20upx + constant(safe-area-inset-bottom));
+		padding-bottom: calc(20upx + env(safe-area-inset-bottom));
+		gap: 16upx;
+	}
+	
+	.footer-btn {
+		flex: 1;
+		height: 76upx;
+		line-height: 76upx;
+		min-width: 100upx;
+		font-size: 30upx;
+	}
 }
 
 /* ==== 动画效果 ==== */