reservation-uniapp-250509/service-uniapp-technician/pages/mine/distribution.vue

<template>
	<view class="distribution">
		<mNavbar title="分销代理" :leftClick="leftClick" />

		<view class="box">
			<view class="box1" />

			<view class="content">
				<view class="content-box">
					<view class="content-box1">
						<view>可用余额（元）</view>
						<view>累计提现</view>
						<view>累积收益（元）</view>
					</view>
					<view class="content-box2">
						<view>￥1200.00</view>
						<view>￥1200.00</view>
						<view>1200.00</view>
					</view>
					<view class="content-box3">
						<view @click="toNodes">
							<text>粉丝</text>
						</view>
						<view @click="toWallet">
							<text>提现</text>
						</view>
						<view>
							<text>二维码</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<van-tabs>
			<van-tab title="费用明细">
				<view class="tab-box">
					<view class="tab-box1">
						<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
						<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
						<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
						<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
						<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
						<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
						<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
						<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
						<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
						<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
						<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
					</view>
				</view>
			</van-tab>
			<van-tab title="提现记录"></van-tab>
			<van-tab title="收益记录"></van-tab>
		</van-tabs>

	</view>
</template>

<script>
	import mNavbar from '@/components/base/m-navbar.vue'
	export default {
		components: {
			mNavbar,
		},
		data() {
			return {

			}
		},
		methods: {
			leftClick() { //返回个人中心
				uni.switchTab({
					url: '/pages/index/center'
				})
			},
			toNodes() {
				uni.navigateTo({
					url: '/pages/mine/nodes'
				})
			},
			toWallet(){
				uni.navigateTo({
					url: '/pages/mine/wallet'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.distribution {
		background-color: #f3f3f3;
		min-height: 100vh;
		

		.box {
			position: relative;
			width: 100%;
			height: 175px;
			background-color: #fff;

			.box1 {
				height: 100px;
				background: linear-gradient(to right, #4899a6, #6fc6ad);
			}

			.content {
				position: absolute;
				display: flex;
				justify-content: space-around;
				width: 94%;
				height: 140px;
				background-color: #F5FDFB;
				top: 20px;
				left: 3%;
				z-index: 9;
				border-radius: 10px;
				box-shadow: 0px 1px 7px 1px #4899a6;

				.content-box {
					display: flex;
					width: 94%;
					height: 94%;
					flex-direction: column;
					align-items: self-end;

					.content-box1 {
						display: flex;
						width: 100%;
						height: 60px;
						justify-content: center;
						align-items: center;
						font-size: 13px;
						view {
							width: 200rpx;
							display: flex;
							justify-content: space-around;
						}
					}

					.content-box2 {
						display: flex;
						width: 100%;
						height: 60px;
						justify-content: center;
						align-items: center;

						view {
							width: 200rpx;
							display: flex;
							justify-content: space-around;
							color: #4C9FA6;
							font-size: 18px;

						}
					}

					.content-box3 {
						display: flex;
						width: 100%;
						height: 60px;
						justify-content: center;
						align-items: center;

						view {
							width: 200rpx;
							display: flex;
							justify-content: space-around;
							align-items: center;
						}

						text {
							display: inline-block;
							padding: 5px 20px;
							text-align: center;
							border: 1px solid #96C8CB;
							color: #76B7BA;
							border-radius: 5px;

						}
					}
				}
			}
		}

		.tab-box {
			width: 96%;
			margin-top: 10px;
			margin-left: 2%;
			background-color: #fff;
			border-radius: 10px;
			overflow: hidden;

			.tab-box1 {
				margin-top: 10px;
			}
		}

	}
</style>