pay-video-applet-uniapp-24-8-22/pages/mine/withdrawalRecord.vue

<template>
	<view class="withdrawalRecord">

		<!--顶部导航栏-->
		<navbar leftClick @leftClick="$utils.navigateBack" title="提现记录" />

		<!--提现记录页面-->
		<view class="content">
			<view class="list" v-for="(item,index) in list ">
				<!--第一行-->
				<view class="item1">
					<view class="left">提现金额</view>
					<view class="right">
						<view class="money">${{item.money}}</view>
						<view :class="item.flag ? 'yiDaoZhangClass' : 'shenHeClass'">已到账</view>
					</view>
				</view>
				<!--第二行-->
				<view class="item2">
					<view class="left">申请时间</view>
					<view class="right">{{item.ApplyDateTime}}</view>
				</view>
				<!--第三行-->
				<view class="item2">
					<view class="left">到账时间</view>
					<view class="right">{{item.daozhangsj}}</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						money: '13354',
						ApplyDateTime: '2024.12.12 16:55:55',
						daozhangsj: '2024.12.12 16:55:55',
						flag: true,
					},
					{
						money: '13354',
						ApplyDateTime: '2024.12.12 16:55:55',
						daozhangsj: '2024.12.12 16:55:55',
						flag: false,
					}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.withdrawalRecord {
		background-color: #f8faff;
		height: calc(100vh - 240rpx);
		width: 100vw;

		.content {
			padding: 20rpx 20rpx 50rpx 20rpx;
			box-sizing: border-box;
			width: 100vw;

			.list {
				box-sizing: border-box;
				border-bottom: 2rpx solid #e0e2e6;
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				gap: 10rpx;

				.item1 {
					display: flex;

					.left {
						width: 30%;

					}

					.right {
						display: flex;
						width: 70%;

						.money {
							width: 75%;
						}

						.yiDaoZhangClass {
							width: 25%;
							background: $uni-linear-gradient-color;
							-webkit-background-clip: text;
							/*将设置的背景颜色限制在文字中*/
							-webkit-text-fill-color: transparent;
							/*给文字设置成透明*/
						}

						.shenHeClass {
							width: 25%;
						}
					}
				}

				.item2 {
					display: flex;

					.left {
						width: 30%;
					}

					.right {
						width: 70%;
					}
				}
			}
		}
	}
</style>