4/18 样式修改，缴费部分页面按照ui重做

property-uniapp-project/pages/payment-list/paymentIndex.vue

@@ -43,6 +43,7 @@
 						</view>
 					</view>
 				</view>
+				<view style="width: 100%;height: 30rpx;"></view>
 			</view>
 		</scroll-view>
 
@@ -220,43 +221,43 @@
 	.page {
 		flex: 1;
 		overflow-y: auto;
-		padding: 0px 20px;
+		padding: 0px 40rpx;
 		box-sizing: border-box;
 		/* background-color: #fff; */
 	}
 
 	.topbox {
-		height: 80px;
+		height: 150rpx;
 		width: 100%;
 		position: relative;
 	}
 
 	.titleImg {
-		width: 131px;
-		height: 37px;
+		width: 262rpx;
+		height: 74rpx;
 		position: absolute;
-		left: 20px;
-		bottom: 10px;
+		left: 40rpx;
+		bottom: 20rpx;
 	}
 
 	.payImg {
-		width: 250px;
-		height: 230px;
+		width: 349.97rpx;
+		height: 313.57rpx;
 		position: absolute;
-		right: -60px;
-		bottom: -100px;
+		right: -80rpx;
+		bottom: -140rpx;
 	}
 
 	.container {
-		/* padding: 15px; */
+		/* padding:30rpx; */
 	}
 
 	/* ===================== 欠费列表 ===================== */
 	.bill-list {
 		margin-bottom: 40rpx;
 		background-color: #fff;
-		padding: 15px;
-		border-radius: 5px;
+		padding: 30rpx;
+		border-radius: 10rpx;
 	}
 
 	.bill-item {
@@ -264,24 +265,27 @@
 		align-items: center;
 		background-color: #F6F9FE;
 		border-radius: 12rpx;
-		padding: 10px 10px 10px 0px;
+		padding: 20rpx 20rpx 20rpx 0px;
 		margin-bottom: 20rpx;
 	}
-	
+
+	.bill-item:last-child {
+		margin-bottom: 0rpx;
+	}
 
 	.bill-info {
-		width: calc(90% - 50px);
+		width: calc(90% - 100rpx);
 		flex: 1;
 	}
 
 	.billIcon {
-		width: 30px;
-		height: 30px;
-		margin: 10px;
+		width: 64rpx;
+		height: 64rpx;
+		margin: 20rpx;
 	}
 
 	.bill-title {
-		font-size: 16px;
+		font-size: 32rpx;
 		font-weight: 600;
 		color: #333;
 		margin-bottom: 10rpx;
@@ -290,7 +294,7 @@
 
 	.bill-desc {
 
-		font-size: 14px;
+		font-size: 28rpx;
 		font-weight: 600;
 		color: #999;
 		white-space: nowrap;
@@ -300,13 +304,13 @@
 
 	/* 已欠费标签 */
 	.bill-status {
-		padding: 1px 8px;
-		border-radius: 15px;
-		font-size: 12px;
+		padding: 2rpx 16rpx;
+		border-radius: 30rpx;
+		font-size: 24rpx;
 		font-weight: 500;
 		color: #fff;
 		background-color: #E34D59;
-		margin-left: 5px;
+		margin-left: 10rpx;
 	}
 
 	/* 右侧箭头 */
@@ -321,8 +325,8 @@
 	/* ===================== 新增缴费区域 ===================== */
 	.add-section {
 		background-color: #fff;
-		padding: 15px;
-		border-radius: 5px;
+		padding: 30rpx;
+		border-radius: 10rpx;
 	}
 
 	.section-header {
@@ -333,13 +337,13 @@
 	}
 
 	.section-title {
-		font-size: 16px;
+		font-size: 32rpx;
 		font-weight: 600;
 		color: #333;
 	}
 
 	.record-link {
-		font-size: 14px;
+		font-size: 28rpx;
 		color: #1677ff;
 	}
 
@@ -348,14 +352,14 @@
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: flex-start;
-		gap: 13px;
+		gap: 26rpx;
 	}
 
 	.grid-item {
-		width: calc(25% - 30px);
+		width: calc(25% - 60rpx);
 		background-color: #F6F9FE;
 		border-radius: 12rpx;
-		padding: 10px;
+		padding: 20rpx;
 		margin-bottom: 20rpx;
 		display: flex;
 		align-items: center;
@@ -364,10 +368,10 @@
 
 	/* 图标容器 */
 	.icon-box {
-		width: 80rpx;
-		height: 80rpx;
+		width: 88rpx;
+		height: 88rpx;
 		border-radius: 50%;
-		background-color: #e6f0ff;
+		/* background-color: #e6f0ff; */
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -381,10 +385,11 @@
 	}
 
 	.item-name {
-		font-size: 14px;
+		font-size: 28rpx;
 		font-weight: 600;
 		color: #333;
 	}
+
 	.status-bar {
 		width: 100vw;
 		height: 46px;