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

<template>
	<view class="app-container" style="background-color: #f7f7f7;">
		<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/page/line-style.png" style="width: 200rpx;height: 2rpx;" alt="" srcset="" />
				</view>
				<view class="age-wait">
					总体现：￥500.00
				</view>
				<view class="age-linemore">
					<img src="../../static/page/divider-style.png" style="width: 690rpx;height: 2rpx;" alt="" srcset="" />
				</view>
				<div class="age-mnum">
					<view class="mtext">
						待入账：1000元
					</view>
					<view class="mline">

					</view>
					<view class="mtext">
						提现中：458元
					</view>
				</div>
			</view>
			<view class="ag-paylist">
				<view class="agp-item">
					<view class="agp-title">
						<view class="zhifubao">
							支付宝账户
						</view>
					</view>
				</view>
				<view class="apt-main u-border-top u-border-bottom">
					<view class="apm-cell">
						<view class="am-title">
							提现账户
						</view>
						<view class="am-value">
							<view class="mphone">
								159****6532
							</view>
							<view class="mlink">
								修改
							</view>
						</view>
					</view>
					<view class="apm-cell">
						<view class="am-title">
							可提现金额
						</view>
						<view class="am-value">
							<view class="mnum">
								￥458.00
							</view>
						</view>
					</view>
				</view>
				<view class="apt-btn">
					<view class="cashbtn">
						提现
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {

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

<style lang="scss">
.agent-content {
	position: relative;
	width: 100%;
	height: 1400rpx;

	background: url(../../static/page/withdrawal-management-bg.png) no-repeat top center;
	background-size: 100% 414rpx;
	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;
		padding-top: 40rpx;

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

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

			.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: 20rpx auto 0;
			width: 200rpx;
			height: 2rpx;

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

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

		.age-linemore {}

		.age-mnum {
			display: flex;
			justify-content: center;
			margin-top: 20rpx;
			align-items: center;

			.mtext {
				color: #fff;
				font-size: 14px;
				margin: 0 20rpx;
				line-height: 1.5;
			}
			
			.mline {
				height: 28rpx;
				width: 2rpx;
				background: #5da8ff;
			}
		}
	}

	.ag-paylist {
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-top: 36rpx;
		background: #fff;

		.agp-item {
			display: flex;
			justify-content: space-between;
			height: 100rpx;

			.agp-title {

				.zhifubao {
					padding-left: 55rpx;
					height: 100rpx;
					line-height: 100rpx;
					color: #454545;
					font-size: 14px;
					font-weight: bold;
					background: url(../../static/page/payment-icon.png) no-repeat left center;
					background-size: 40rpx 40rpx;
				}
			}

			.agp-detail {

				.agp-make {
					padding-right: 30rpx;
					height: 100rpx;
					line-height: 100rpx;
					color: #999;
					font-size: 12px;
					background: url(../../static/page/open-icon.png) no-repeat right center;
					background-size: 14rpx 24rpx;
					cursor: pointer;
				}
			}
		}

		.apt-main {
			padding: 10rpx 0;

			.apm-cell {
				display: flex;
				justify-content: space-between;

				.am-title {
					height: 70rpx;
					line-height: 70rpx;
					color: 454545;
					font-size: 12px;
				}

				.am-value {
					display: flex;
					justify-content: flex-end;
					height: 70rpx;
					line-height: 70rpx;

					.mphone {
						margin-right: 20rpx;
						font-size: 12px;
						color: #454545;
					}

					.mlink {
						font-size: 12px;
						color: #32A2FC;
					}

					.mnum {
						font-size: 14px;
						color: 454545;
						font-weight: bold;
					}
				}
			}
		}

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

		.apt-btn {
			display: flex;
			justify-content: flex-end;
			padding: 30rpx 0;

			.cashbtn {
				width: 110rpx;
				height: 48rpx;
				text-align: center;
				line-height: 48rpx;
				color: #fff;
				font-size: 12px;
				background: #1783FF;
				border-radius: 100rpx;
			}
		}
	}
}
</style>