jewelry-front/pages_order/mine/partner.vue

<!-- 合伙人页面 -->
<template>
	<view class="partner">
		<!-- 导航栏 -->
		<navbar title="合伙人" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" />

		<!-- 合伙人信息 -->
		<view class="partner-info-bg">
			<view class="partner-info">
				<view class="profile-photo">
					<image src="@/pages_order/static/card/profilePhoto.png" mode="widthFix" class="pro-img"></image>
				</view>

				<view class="performance-information">
					<view class="user-info-base">
						<view class="username">18200000000</view>
						<view class="user-tag">合伙人</view>
					</view>

					<view class="live-performance">
						<view class="live-performance-money">
							<view class="live-tag">
								直推及间推业绩
							</view>
							<view class="money">
								<text class="unit">￥</text>666
							</view>
						</view>
						<view class="withdraw">
							<view class="btn">
								去提现
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="tabs">
			<uv-tabs :activeStyle="{ color : '#DC2828' }" lineColor="#DC2828" :list="tabList" @click="click"></uv-tabs>
		</view>

		<!-- 佣金列表 -->
		<view class="brokerage-list">
			<view v-for="item in 10" :key="item" class="brokerage-item">
				<view class="brokerage-user">
					<image src="@/pages_order/static/card/profilePhoto.png" mode="widthFix" class="pro-img"></image>
					<view class="name-time">
						<view class="name">
							用户138xxxxxxxx
						</view>
						<view class="time">
							已加入平台120天
						</view>
					</view>
				</view>

				<view class="brokerage-money">
					<view class="order-money">
						下单量: <text>666</text>
					</view>
					<text>|</text>
					<view class="money">
						佣金:<text>666元</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "Partner",
		data() {
			return {
				tabList: [{
						name: '直推用户'
					},
					{
						name: '间推用户'
					}
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.partner {

		// 合伙人信息
		.partner-info-bg {
			background: $uni-color;
			padding: 60rpx 0rpx;

			.partner-info {
				display: flex;
				align-items: center;
				background: white;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 20rpx;
				width: calc(100% - 40rpx);
				margin: 0rpx auto;

				.profile-photo {
					width: 25%;

					.pro-img {
						width: 100%;
						aspect-ratio: 1, 1;
					}
				}

				.performance-information {
					width: 75%;
					padding: 0rpx 20rpx;
					box-sizing: border-box;

					.user-info-base {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						border-bottom: 2px dashed $uni-color;
						padding: 20rpx 0rpx;

						.username {
							font-size: 36rpx;
						}

						.user-tag {
							background: black;
							color: white;
							margin-left: 20rpx;
							border-radius: 20rpx;
							padding: 3rpx 10rpx;
							font-size: 28rpx;
						}
					}

					.live-performance {
						display: flex;
						flex-wrap: wrap;
						padding: 20rpx 0rpx;
						box-sizing: border-box;

						.live-performance-money {
							width: 50%;

							.live-tag {
								display: flex;
								align-items: center;
								justify-content: center;
								background: #F99F9F;
								color: #DC2828;
								border-radius: 40rpx;
								font-weight: bold;
								font-size: 28rpx;
								padding: 10rpx 0rpx;
							}

							.money {
								font-size: 45rpx;
								color: $uni-color;
								font-weight: bold;

								.unit {
									font-size: 32rpx;
								}
							}
						}

						.withdraw {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: flex-end;
							width: 50%;

							.btn {
								width: 90%;
								display: flex;
								align-items: center;
								justify-content: center;
								background: #DC2828;
								color: white;
								border-radius: 40rpx;
								padding: 20rpx 0rpx;
								font-weight: bold;
								font-size: 32rpx;
							}
						}
					}
				}
			}
		}

		.tabs {
			background: white;
		}

		// 佣金列表
		.brokerage-list {
			padding: 0rpx 20rpx;

			.brokerage-item {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				background: white;
				margin: 20rpx 0rpx;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.brokerage-user {
					width: 50%;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.pro-img {
						width: 100rpx;
						height: 100rpx;
					}

					.name-time {
						width: calc(100% - 100rpx);
						padding: 0rpx 20rpx;
						box-sizing: border-box;

						.name {
							font-size: 32rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.time {
							color: #999999;
							font-size: 26rpx;
						}
					}
				}

				.brokerage-money {
					width: 50%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.order-money {
						text {
							margin-left: 10rpx;
						}
					}

					.money {
						text {
							color: #FEB814;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}
</style>