pet-front/otherPages/binding/wallet/index.vue

<template>
	<!-- <div>钱包</div> -->
	<view class="box box-size">
		<view class="level">
			<view class="picture" :style="{borderRadius:'50%'}">
				<image src="" mode="" shape="circle" withe="139rpx" height="139rpx"></image>
			</view>
			<view class="flex">
				<view class="name">
					猫小姐
				</view>
				<view class="title level" :style="{borderRadius:'19rpx'}">
					初级合伙人
				</view>
				<view class="time level">
					<view >
						当前分成比例:25%
					</view>
					<view >
						晋级后分成比例:30%
					</view>
				</view>
			</view>
		</view>
		<view class="top box-size" :style="{borderRadius:'16rpx'}">
			<view class="level account">
				<view >
					钱包余额
				</view>
				<view class="level text">
					<view @click="toDetail">
						明细
					</view>
					<view class="line" @click="totixian">
						提现
					</view>
				</view>
			</view>
			<view class="money level">
				<view class="text1">
					¥
				</view>
				<input type="text" />
			</view>
			<view class="line1">
			</view>
			<view class="level flex--justify divide">
				<view class="level">
					<view >
						本月订单分成:&nbsp;&nbsp;
					</view>
					¥<view >
						0.00
					</view>
				</view>
				<view class="level">
					<view >
						累积订单分成:&nbsp;&nbsp;
					</view>
					¥<view >
						0.00
					</view>
				</view>
			</view>
		</view>
		<view class="center box-size">
			<view class="form-title">
				本月数据
			</view>
			<view class="line2">
			</view>
			<view class="flex-rowl wrap">
				<view class="text2">
					本月注册用户
					<view class="text3">
						0个
					</view>
				</view>
				<view class="text2">
					本月下单用户
					<view class="text3">
						0个
					</view>
				</view>
				<view class="text2">
					本月有效用户
					<view class="text3">
						0个
					</view>
				</view>
				<view class="text2">
					本月订单金额
					<view class="text4">
						¥0.00
					</view>
				</view>
				<view class="text2">
					本月有效订单金额
					<view class="text4">
						¥0.00
					</view>
				</view>
			</view>
		</view>

	</view>

    <!-- 客服组件 -->
		<CustomerService />
</template>

<script setup>
	const toDetail = () => {
		uni.navigateTo({
			url: "/otherPages/binding/partner/index"
		})
	}
	const totixian = () => {
		uni.navigateTo({
			url: "/otherPages/binding/withdrawal/index"
		})
	}
</script>

<style lang="scss">
	.box {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(180deg, #ffbf60, #ffe6bf, #F5F5F7 433rpx);
		padding: 1% 2%;

		.flex {
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
		}

		.picture {
			width: 139rpx;
			height: 139rpx;
			background-color: green;
			margin: 30rpx 20rpx 30rpx 30rpx;
		}

		.name {
			font-size: 32rpx;
			margin-bottom: 15rpx;
		}

		.title {
			width: 143rpx;
			height: 38rpx;
			background-color: #FFA848;
			font-size: 22rpx;
			border: 1rpx solid #FFFFFF;
			line-height: 36rpx;
			color: #FFFFFF;
			justify-content: center;
			margin: 0 15rpx 15rpx 0;
		}

		.time {
			width: 430rpx;
			color: #A55822;
			font-size: 22rpx;
			line-height: 36rpx;
			justify-content: space-between;
		}


		.top {
			width: 718rpx;
			height: 259rpx;
			background-color: #FFF6EC;
			padding: 3% 4%;

			.account {
				justify-content: space-between;
				color: #000000;
				font-size: 30rpx;

				.text {
					color: #A55822;
				}

				.line {
					position: relative;
					padding: 0 0 0 20rpx;

					&::before {
						position: absolute;
						top: 7rpx;
						left: 10rpx;
						content: "";
						width: 3rpx;
						height: 30rpx;
						border-radius: 9rpx;
						background-color: #A55822;
					}
				}

			}

			.money {
				width: auto;
				height: 60rpx;
				margin: 20rpx 0;
				color: #FF2A2A;
				font-size: 42rpx;
				align-items: center;

				.text1 {
					font-size: 25rpx !important;
					color: #FF2A2A !important;
					margin-right: 10rpx;
				}
			}

			.line1 {
				position: relative;

				&::before {
					position: absolute;
					top: -10rpx;
					left: 0;
					content: "";
					width: 660rpx;
					height: 1rpx;
					background-color: #FFBF60;
				}
			}

			.divide {
				color: #A55822;
				font-size: 30rpx;
				margin-top: 50rpx;
			}

		}

		.center {
			width: 718rpx;
			height: 400rpx;
			background-color: #FFFFFF;
			padding: 2% 4%;

			.line2 {
				position: relative;
				margin-bottom: 50rpx;

				&::before {
					position: absolute;
					top: 25rpx;
					left: 0;
					content: "";
					width: 660rpx;
					height: 1rpx;
					background-color: #F5F5F7;
					// background-color: red;
				}
			}

			.text2 {
				width: 33%;
				color: #999999;
				font-size: 28rpx;
				margin-bottom: 24rpx;

				.text3 {
					color: #000000;
					font-size: 30rpx;
					margin-top: 10rpx;

				}

				.text4 {
					color: #FF2A2A;
					font-size: 30rpx;
					margin-top: 10rpx;
				}
			}

		}
	}

	.box-size {
		box-sizing: border-box;
	}

	.level {
		display: flex;
	}

	.flex--justify {
		justify-content: space-between;
	}

	.flex-around {
		justify-content: space-around;
	}
</style>