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

<template>
	<view class="box w-100 h100">
		<view class="header-info">
			<view class="base flex-rowl">
				<image src="" mode=""></image>
				<view class="flex-colt">
					<view class="size-32 mb16">
						猫小姐
					</view>
					<view class="title size-22 color-fff">
						初级合伙人
					</view>
					<view class="color-a55 size-24 mt16">
						当前分成比例25%，晋级后分成比例30%
					</view>
				</view>
			</view>
		</view>
		<view class="order bg-fff">
			<view class="tabs flex-around">
				<view class="item size-30">
					未下单
				</view>
				<view class="item size-30">
					已下单
				</view>
			</view>
			<view class="list">
				<view class="li" v-for="item in 4">
					<view class="top flex-rowl">
						<image src="" mode=""></image>
						<view class="size-30 ml5">
							猫小咪
						</view>
					</view>
					<view class="flex-between time">
						<view class="size-30 color-999">
							注册时间
						</view>
						<view class="size-30 color-999">
							2024-11-01 18:12:56
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import YCard from "../components/y-card.vue"
</script>

<style scoped lang="scss">
	.box {
		background: linear-gradient(180deg, #ffbf60, #ffe6bf, #F5F5F7 433rpx);

		.header-info {
			padding: 23rpx 36rpx;

			.base {
				image {
					width: 139rpx;
					height: 139rpx;
					background-color: red;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}

			.title {
				border: 4rpx solid #fff;
				border-radius: 30rpx;
				padding: 0 10rpx;
				background-color: #FFA848;
			}

		}

		.order {
			border-radius: 16rpx;
			margin: 0 16rpx;
			padding-bottom: 34rpx;

			.tabs {
				padding: 63rpx 0 43rpx;

				.item {
					border-bottom: 6rpx solid #FFBF60;
					padding-bottom: 10rpx;
				}
			}

			.list {
				margin: 0 30rpx;

				.li {
					background-color: #F9F9F9;
					padding: 17rpx;
					border-radius: 16rpx;
					margin-bottom: 16rpx;

					.time {
						border-top: 1rpx solid #999;
						padding-top: 15rpx;
						margin-top: 25rpx;
					}

					.top {
						image {
							width: 85rpx;
							height: 85rpx;
							border-radius: 50%;
							background-color: red;
							margin-right: 8rpx;
						}
					}
				}
			}
		}
	}
</style>