fix: 基本样式完成

pages/index/index.vue

@@ -129,6 +129,8 @@
 			if (token) {
 				this.$store.commit('UPDATE_LOGIN', token);
 				
+				this.money = getUrlParam('price') || 0;
+				
 				// 扫码店铺支付
 				if (getUrlParam('merchant_id') && !getUrlParam('from_type')) {
 					this.getData(getUrlParam('merchant_id'));
@@ -298,7 +300,14 @@
 					mask: true
 				});
 
-				if (!this.merchant_id) return;
+				if (!this.merchant_id) {
+					uni.hideLoading()
+					uni.showToast({
+						title: '缺少支付信息',
+						icon: 'none'
+					});
+					return
+				};
 
 				try {
 					// 准备支付参数
@@ -449,134 +458,182 @@
 
 <style lang="scss" scoped>
 	.content {
-		margin: 0 auto;
+		min-height: 100vh;
-		margin-top: 20rpx;
+		background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
-		height: 100vh;
+		padding: 40rpx 30rpx;
-		overflow: hidden;
+		box-sizing: border-box;
+		
 		.main {
-			margin: 20rpx;
+			background-color: #ffffff;
-			background-color: #fff;
+			border-radius: 24rpx;
-			border-radius: 30rpx;
+			padding: 0;
-			padding: 30rpx;
+			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+			overflow: hidden;
 
 			.title {
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				text-align: center;
+				padding: 50rpx 30rpx 40rpx;
-				font-size: 36rpx;
+				border-bottom: 1rpx solid #f0f0f0;
-				font-weight: 600;
-				margin-top: 30rpx;
 
 				.shop-images {
-					width: 50rpx;
+					width: 60rpx;
-					height: 50rpx;
+					height: 60rpx;
-					margin-right: 20rpx;
+					margin-right: 16rpx;
+					border-radius: 8rpx;
 				}
 
 				.name {
+					font-size: 34rpx;
+					font-weight: 500;
+					color: #333333;
+					display: -webkit-box;
 					-webkit-box-orient: vertical;
 					-webkit-line-clamp: 2;
+					line-clamp: 2;
 					overflow: hidden;
 					text-overflow: ellipsis;
+					max-width: 500rpx;
 				}
 			}
 
 			.money {
-				text-align: left;
+				padding: 50rpx 40rpx;
-				padding: 30rpx 40rpx;
+				border-bottom: 1rpx solid #f0f0f0;
-				font-size: 42rpx;
-				font-weight: 600;
-				margin-top: 40rpx;
-				background-color: #f8f8f8;
-				border-radius: 20rpx;
 
 				.input {
 					display: flex;
 					align-items: center;
 					justify-content: space-between;
-					font-size: 38rpx;
 
 					.txt {
-						width: 300rpx;
+						font-size: 28rpx;
+						color: #999999;
+						font-weight: 400;
 						white-space: nowrap;
-						overflow: hidden;
+						margin-right: 20rpx;
-						text-overflow: ellipsis;
-						font-weight: 600;
-						margin-right: 30rpx;
 					}
 
 					.num {
+						flex: 1;
 						font-weight: 600;
 						text-align: right;
-						font-size: 38rpx;
+						font-size: 56rpx;
+						color: #333333;
+						letter-spacing: 2rpx;
 					}
 
-					// /deep/ .u-input--radius {
-					// 	background-color: transparent !important;
-					// 	border: none !important;
-					// }
 					.wrap {
+						flex: 1;
 						position: relative;
+						display: flex;
+						justify-content: flex-end;
+						align-items: center;
 
 						.line {
 							position: absolute;
-							top: 10rpx;
+							right: 0;
-							right: 14rpx;
 							animation: blink 1s infinite;
-							color: #556dea;
+							color: #07c160;
-						}
+							font-size: 56rpx;
-					}
+							font-weight: 600;
+							line-height: 1;
 						}
 					}
 				}
 			}
 
-
+			.container {
-	/* 光标闪烁动画 */
-	@keyframes blink {
-
-		0%,
-		100% {
-			opacity: 1;
-		}
-
-		50% {
-			opacity: 0;
-		}
-	}
-
 				.list-item {
 					display: flex;
 					justify-content: space-between;
 					align-items: center;
-		padding: 30rpx 20rpx;
+					padding: 36rpx 40rpx;
-		border-bottom: 1rpx solid #eee;
+					border-bottom: 1rpx solid #f0f0f0;
+					transition: background-color 0.2s;
+					
+					&:active {
+						background-color: #fff;
+					}
 
 					.titles {
 						font-size: 32rpx;
-		}
+						color: #333333;
+						font-weight: 400;
 					}
 
 					.right-section {
 						display: flex;
 						align-items: center;
-		gap: 20rpx;
+						gap: 16rpx;
+
+						text {
+							font-size: 32rpx;
+							color: #333333;
+							font-weight: 500;
+						}
+
+						image {
+							width: 40rpx;
+							height: 40rpx;
+							margin-top: 0;
+						}
+					}
 				}
 
 				.payment-section {
 					display: flex;
 					justify-content: space-between;
-		padding: 40rpx 20rpx;
+					align-items: center;
-		font-weight: bold;
+					padding: 50rpx 40rpx;
-		font-size: 38rpx;
 
-		.titles {}
+					.titles {
+						font-size: 32rpx;
+						color: #666666;
+						font-weight: 400;
 					}
 
 					.payment-amount {
-		color: #ff2d55;
+						color: #07c160;
-		font-size: 38rpx;
+						font-size: 48rpx;
+						font-weight: 600;
+						letter-spacing: 1rpx;
+					}
+				}
+			}
+		}
+
+		.pay-btn {
+			background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
+			width: 100%;
+			max-width: 690rpx;
+			margin: 60rpx auto 0;
+			text-align: center;
+			padding: 28rpx 0;
+			color: #ffffff;
+			border-radius: 12rpx;
+			font-size: 36rpx;
+			font-weight: 500;
+			box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
+			transition: all 0.3s;
+			letter-spacing: 2rpx;
+			
+			&:active {
+				transform: scale(0.98);
+				box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.25);
+			}
+		}
+	}
+
+	/* 光标闪烁动画 */
+	@keyframes blink {
+		0%, 100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0;
+		}
 	}
 
 	.shadow {
@@ -585,22 +642,9 @@
 		left: 0;
 		right: 0;
 		bottom: 0;
-		background-color: #000;
+		background-color: rgba(0, 0, 0, 0.5);
-		opacity: .5;
 		width: 100%;
 		height: 100vh;
 		z-index: 999999;
 	}
-	.pay-btn {
-		background-color: #07c160;
-		width: 200rpx;
-		margin: 0 auto;
-		text-align: center;
-		padding: 20rpx 10rpx;
-		color: #fff;
-		border-radius: 20rpx;
-		font-size: 38rpx;
-		font-weight: 600;
-		margin-top: 80rpx;
-	}
 </style>