jp-railway/pages/canteenManagement/consumption/consumptionDetail.vue

<template>
	<view>
		<u-navbar title="消费详情"></u-navbar>
		<!-- 消费详情 -->
		<view class="details">
			<view class="title">
				荆州地方铁路食堂
			</view>
			<view class="price">
				15.00
			</view>
			<view class="infos">
				<view class="info-item">
					<view class="info-title">
						实付金额（元）
					</view>
					<view class="value">
						15.00
					</view>
				</view>
				<view class="info-item">
					<view class="info-title">
						饭卡余额（元）
					</view>
					<view class="value">
						
						315.00
						
					</view>
				</view>
				<view class="info-item">
					<view class="info-title">
						订单号
						
					</view>
					<view class="value">
						000111222333444
						
					</view>
				</view>
				<view class="info-item">
					<view class="info-title">
						支付时间
					</view>
					<view class="value">
						2023-04-10 12:00:00
					</view>
				</view>
				
			</view>
			
		</view>
		
		<!-- 消费用户 -->
		<view class="user">
			<view class="user-title">
				<view class="string">
					
				</view>
				<view class="text">
					消费用户
				</view>
			</view>
			<view class="user-info">
				<view class="info-item">
					<view class="title">
						用户姓名
					</view>
					<view class="value">
						周斌
					</view>
				</view>
				<view class="info-item">
					<view class="title">
						
						手机号码
						
					</view>
					<view class="value">
						
						135****1010
						
					</view>
				</view>
				<view class="info-item">
					<view class="title">
						所属部门
					</view>
					<view class="value">
						机务段
					</view>
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	// 消费详情
	.details{
		background-color: #fff;
		margin: 24rpx 32rpx;
		padding: 40rpx;
		border-radius: 8px;
		text-align: center;
		font-family: 'PingFang Regular';
		.title{
			color: rgba(51, 51, 51, 1);
			font-size: 48rpx;
			font-family: 'PingFang Regular';
		}
		.price{
			margin-top: 24rpx;
			font-size: 72rpx;
			color: rgba(31, 74, 153, 1);
			font-weight: bold;
		}
		.infos{
			margin-top: 48rpx;
			.info-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;
				.info-title{
					color: rgba(134, 137, 140, 1);
					font-size: 32rpx;
				}
				.value{
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
				}
			}
		}
		
	}

// 消费用户
.user{
	background-color: #fff;
	padding: 32rpx;
	margin: 32rpx;
	border-radius: 8px;
	.user-title{
		display: flex;
		align-items: center;
		.string{
			width: 8rpx;
			height: 24rpx;
			background-color: rgba(24, 90, 198, 1);
			margin-right: 16rpx;
		}
		.text{
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
			font-weight: bold;
			font-family: 'Regular';
		}
	}
	.user-info{
		margin-top: 40rpx;
		.info-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;
			font-family: 'PingFang Regular';
			.title{
				color: rgba(134, 137, 140, 1);
				font-size: 32rpx;
			}
			.value{
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
			}
		}
	}
}
</style>