jp-railway/pages/mine/myMealCard.vue

<template>
	<view>
		<u-navbar title="我的饭卡"></u-navbar>
		<view class="background">
			<view class="head">
				<view class="balance">
					饭卡余额（元）
				</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="main">
				<view class="number">
					330
				</view>
				<view class="img">
					<img src="../../assets/img/ze-card@1x.png" alt="">
				</view>
			</view>
			
		</view>
		
		<view class="content">
			<view class="tabs">
				<u-tabs bar-width="100" inactive-color="#bbbbbb" active-color="#101010"  :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			<!-- 消费 -->
			<view class="consumption" v-if="this.current==0">
				<view class="total">
					6月消费105元
				</view>
				<view class="each" v-for="item in 7">
					<view class="place-date">
						<view class="place">
							地方铁路食堂
						</view>
						<view class="date">
							2023-04-07 12:00
						</view>
					</view>
					<view class="number">
						-15
					</view>
				</view>
			</view>
			<!-- 餐费存入 -->
			<view class="deposit" v-if="this.current==1">
				<view class="each" v-for="item in 5">
					<view class="place-date">
						<view class="place">
							2023年4月餐费存入
						</view>
						<view class="date">
							2023-04-07 12:00
						</view>
					</view>
					<view class="number">
						+330
					</view>
				</view>
			</view>
			
		</view>
		
		<u-divider   bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
									name: '余额消费'
								}, {
									name: '餐费存入'
								}],
								current: 0
			}
		},
		methods: {
			change(index) {
							this.current = index;
						}
		}
	}
</script>

<style scoped lang="scss">
	page{
		padding-bottom: 100px;
	}
	.background{
		background: linear-gradient(-0.06deg, rgba(246,248,248,1) -0.15%,rgba(240,225,198,1) 48.47%,rgba(236,193,148,1) 101.15%);
		padding: 32rpx;
		color: #fff;
		height: 231px;
		.head{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.balance{
				color: rgba(51, 51, 51, 1);
				font-family: 'Regular';
			}
			.time{
				opacity: 0.7;
				color: rgba(49, 54, 66, 1);
				font-size: 24rpx;
				font-family: 'PingFang Regular';
				.icon{
					vertical-align: middle;
					margin-right: 4rpx;
				}
			}
		}
		.main{
			
				display: flex;
				justify-content: space-between;
			.number{
				color: rgba(16, 16, 16, 1);
				font-size: 80rpx;
				font-weight: bold;
			}
			.img{
				margin-top:-20rpx
			}
		}
		
		
		
}

  .content{
	  margin: -260rpx 32rpx 24rpx;
	  background-color: #fff;
	  border-radius: 8px 8px 0px 0px;
	  overflow: hidden;
	  min-height: 800rpx;
	  /deep/.u-tab-bar{
	  			 background-color: #0076FF !important ;
	  }
	  // 消费
	  .consumption,.deposit{
		  padding: 0 36rpx;
		  .total{
			  line-height: 88rpx;
			  color: rgba(16, 16, 16, 1);
			  font-size: 36rpx;
			  border-top: 1px solid #E6E6E6;
			  font-family: 'Alibaba-PuHuiTi-Regular';
		  }
		  .each{
		  	display: flex;
		  	justify-content: space-between;
		  	align-items: center;
		  	padding: 28rpx 0;
		  	border-top: 1px solid #E6E6E6;
		  	.place-date{
		  		.place{
		  			color: #101010;
		  			font-size: 32rpx;
					font-weight: bold;
					font-family: 'Alibaba-PuHuiTi-Regular';
		  		}
		  		.date{
		  			color: rgba(119, 119, 119, 1);
		  			margin-top: 16rpx;
		  		}
		  	}
		  	.number{
		  		color: rgba(31, 74, 153, 1);
		  		font-size: 48rpx;
				font-weight: bold;
		  	}
		  	
		  }
	  }
  }

</style>