agent-app/agentApp/pages/withdrawal-management/withdrawal-management.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 class="agp-detail">
						<view class="agp-make" @click="makecash">
							去开通
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

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

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

<style lang="scss">
	.uni-page-body {
		background:#f7f7f7;
	}
.agent-content {
	position: relative;
	width: 100%;
	height: 1400rpx;

	background: url(../../static/page/merchant-account-opening-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;
			align-items: center;
			margin-top: 20rpx;

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

	.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;
				}
			}
		}
	}
}
</style>