agent-app/agentApp/pages/index/index.vue

<template>
	<view class="app-container">
		<view class="agent-content">
			<view class="ag-sign" @click="cashManager">
				提现管理
			</view>
			<view class="agent-top">
				<view class="ag-num">
					<view class="au-font">
						￥
					</view>
					<view class="au-num">
						458.00
					</view>
				</view>
				<view class="age-font">
					可提现
				</view>
				<view class="age-line">
					<img src="../../static/index/line-style.png" style="width: 200rpx;height: 2rpx;" alt="" srcset="" />
				</view>
				<view class="age-wait">
					待入账：￥200.00
				</view>
			</view>
			<view class="agent-main">
				<view class="agm-title">
					提现信息
				</view>
				<view class="agm-sitem">
					<view class="ags-cell u-border-bottom">
						<view class="agc-title">
							用户提现流水号
						</view>
						<view class="agc-detail">
							22398983498
						</view>
					</view>
					<view class="ags-cell u-border-bottom">
						<view class="agc-title">
							提现金额
						</view>
						<view class="agc-detail">
							<view class="price">
								￥458.00
							</view>
						</view>
					</view>
					<view class="ags-cell u-border-bottom">
						<view class="agc-title">
							分成比例
						</view>
						<view class="agc-detail">
							5%
						</view>
					</view>
					<view class="ags-cell u-border-bottom">
						<view class="agc-title">
							状态
						</view>
						<view class="agc-detail">
							到账
						</view>
					</view>
					<view class="ags-cell">
						<view class="agc-title">
							时间
						</view>
						<view class="agc-detail">
							2023-11-24 15:45:56
						</view>
					</view>
					<u-gap height="10rpx" bgColor="#F7F7F7"></u-gap>
				</view>
				<view class="agm-sitem">
					<view class="ags-cell u-border-bottom">
						<view class="agc-title">
							用户提现流水号
						</view>
						<view class="agc-detail">
							22398983498
						</view>
					</view>
					<view class="ags-cell u-border-bottom">
						<view class="agc-title">
							提现金额
						</view>
						<view class="agc-detail">
							<view class="price">
								￥458.00
							</view>
						</view>
					</view>
					<view class="ags-cell u-border-bottom">
						<view class="agc-title">
							分成比例
						</view>
						<view class="agc-detail">
							5%
						</view>
					</view>
					<view class="ags-cell u-border-bottom">
						<view class="agc-title">
							状态
						</view>
						<view class="agc-detail">
							到账
						</view>
					</view>
					<view class="ags-cell">
						<view class="agc-title">
							时间
						</view>
						<view class="agc-detail">
							2023-11-24 15:45:56
						</view>
					</view>
					<u-gap height="10rpx" bgColor="#F7F7F7"></u-gap>
				</view>
				<view class="loadmore">
					下拉加载更多
				</view>
			</view>

		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			
		}
	},
	onLoad() {

	},
	methods: {
		cashManager() {
			uni.navigateTo({
				url: '/pages/cash/cash'
			});
		}
	}
}
</script>

<style lang="scss">
.agent-content {
	position: relative;
	width: 100%;
	height: 1400rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
	background: url(../../static/index/principal-sheet-bg.png) no-repeat top center;
	background-size: 100% 100%;
	box-sizing: border-box;

	.ag-sign {
		position: absolute;
		right: 0;
		top: 0;
		width: 150rpx;
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 40rpx;
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		color: #fff;
		font-size: 12px;
		background: #FCC565;
		box-sizing: border-box;
		cursor: pointer;
	}

	.agent-top {
		text-align: center;

		.ag-num {
			display: flex;
			justify-content: center;
			padding-top: 20rpx;
			color: #fff;

			.au-font {
				margin-top: 45rpx;
				font-size: 14px;
				margin-right: 10rpx;
				line-height: 28rpx;
			}

			.au-num {
				font-size: 30px;
				font-weight: bold;
			}
		}

		.age-font {
			margin-top: 10rpx;
			font-size: 16px;
			line-height: 1.5;
			color: #fff;
		}

		.age-line {
			margin: 45rpx auto 0;
			width: 200rpx;
			height: 2rpx;

			img {
				display: block;
				margin: 0 auto;
			}
		}

		.age-wait {
			margin-top: 20rpx;
			color: #fff;
			font-size: 14px;
		}
	}

	.agent-main {
		margin-top: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		background: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		.agm-title {
			padding-left: 30rpx;
			margin-left: 30rpx;
			color: #454545;
			font-weight: normal;
			font-size: 30rpx;
			line-height: 1.5;
			background: url(../../static/index/title-style.png) no-repeat left center;
			background-size: 15rpx 19rpx;
		}

		.agm-sitem {

			.ags-cell {
				display: flex;
				justify-content: space-between;
				height: 90rpx;
				line-height: 90rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;

				.agc-title {
					height: 90rpx;
					line-height: 90rpx;
					font-size: 12px;
					color: #454545;
				}

				.agc-detail {
					height: 90rpx;
					line-height: 90rpx;
					font-size: 12px;
					color: #666;
					
					.price {
						color: #F52F3E;
					}
				}
			}

			.u-border-bottom {
				border-color: #eee !important
			}



		}

		.loadmore {
			width: 172rpx;
			margin: 30rpx auto;
			padding-right: 20rpx;
			color: #1783FF;
			font-size: 14px;
			background: url(../../static/index/down.png) no-repeat right center;
			background-size: 17rpx 20rpx;
			cursor: pointer;
		}
	}
}
</style>