Browse Source

我的:增加饭票卡片信息

常志远 2 years ago
parent
commit
0b13b4c75f

BIN
assets/img/iconPark-pay-code-one@1x.png


BIN
assets/img/riLine-eye-line@1x.png


BIN
assets/img/riLine-information-line@1x.png


+ 88 - 2
pages/mine/mine.vue

@@ -75,6 +75,36 @@
 			</view>
 
 		</view>
+		<!-- 饭票卡片信息 -->
+		<view class="meal-ticket">
+			<view class="head">
+				<view class="balance">
+					饭卡余额(元)
+				</view>
+				<view class="check">
+					<text><img src="../../assets/img/riLine-eye-line@1x.png" alt=""></text>查看消费记录
+				</view>
+			</view>
+			<view class="content">
+				<view class="number-time">
+					<view class="number">
+						330
+					</view>
+					<view class="time">
+						<text class="icon"><img src="../../assets/img/riLine-information-line@1x.png" alt=""></text>
+						<text>下次清零 2023月6月1日 0点</text>
+					</view>
+				</view>
+				<view class="payment-code">
+					<view class="code">
+						<img src="../../assets/img/iconPark-pay-code-one@1x.png" alt="">
+					</view>
+					<view class="text">
+						付款码
+					</view>
+				</view>
+			</view>
+		</view>
 		<!-- 功能 -->
 		<view class="function-group group1"   @click="gotoUrl('pages/mine/myWinningRecord')"  >
 			<view class="item">
@@ -287,7 +317,7 @@
 	.person-infos {
 		background: linear-gradient(45.45deg, rgba(6, 50, 130, 1) -0.45%, rgba(0, 88, 209, 1) 23.41%, rgba(0, 53, 153, 1) 52.12%, rgba(0, 66, 178, 1) 77.4%, rgba(0, 20, 130, 1) 100.65%);
 		color: rgba(255, 255, 255, 1);
-		padding: 40rpx 32rpx 116rpx 32rpx;
+		padding: 40rpx 32rpx 260rpx 32rpx;
 
 		.main {
 			display: flex;
@@ -388,9 +418,65 @@
 
 	}
 
+	// 饭票信息
+	.meal-ticket{
+		border-radius: 8px 8px 0px 0px;
+		background: linear-gradient(87.06deg, rgba(240,225,198,1) 5.57%,rgba(236,193,148,1) 96.45%);
+		margin: -224rpx 32rpx 0;
+		height: 224rpx;
+		padding: 32rpx;
+		.head{
+			display: flex;
+			justify-content: space-between;
+			color: rgba(49, 54, 66, 1);
+			font-weight: bold;
+			.check{
+				text{
+					vertical-align: middle;
+					margin-right: 8rpx;
+				}
+			}
+		}
+		.content{
+			
+			display: flex;
+			justify-content: space-between;
+			align-items:flex-end;
+			.number-time{
+				.number{
+					color: rgba(16, 16, 16, 1);
+					font-size: 72rpx;
+					font-weight: bold;
+				}
+				.time{
+					opacity: 0.7;
+					color: rgba(49, 54, 66, 1);
+					font-size: 24rpx;
+					.icon{
+						vertical-align: middle;
+						margin-right: 4rpx;
+					}
+				}
+			}
+			.payment-code{
+				
+				width: 96rpx;
+				height: 96rpx;
+				border-radius: 4px;
+				background-color: #F0CFAD;
+				text-align: center;
+				font-size: 20rpx;
+				color: rgba(49, 54, 66, 1);
+				padding: 8rpx 0;
+				
+			}
+		}
+	}
+	
+	
 	// 功能
 	.group1 {
-		margin-top: -72rpx !important;
+		// margin-top: -72rpx !important;
 	}
 
 	.function-group {