pet-front/otherPages/binding/grade/detail.vue

<template>
	<!-- <div>我的等级</div> -->
	<view class="box">
		<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="level">
					<view class="title level" :style="{borderRadius:'19rpx'}">
						初级合伙人
					</view>
					<view class="time">
						已加入合伙人:130天
					</view>
				</view>
			</view>
		</view>
		<view class="center box-size" :style="{borderRadius:'16rpx'}">
			<view class="form-title">
				距离下一等级要求
			</view>
			<view class="line1">
			</view>
			<view class="justify_center text">
				<view class="text-item">
					仍需至少注册
				</view>
				<view class="">
					5人
				</view>
			</view>
		</view>
		<view class="">

		</view>
	</view>
</template>

<script>
</script>

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

		.level {
			display: flex;
		}

		.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-right: 15rpx;
		}

		.time {
			color: #A55822;
			font-size: 22rpx;
			line-height: 36rpx;
		}

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

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

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

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

		.justify_center {
			// 水平、垂直方向均居中
			display: grid;
			place-items: center;
		}

		.text {
			width: 660rpx;
			height: auto;
			line-height: 60rpx;
			font-size: 30rpx;
			// background-color: red;

			.text-item {
				color: #999999;
				font-size: 28rpx;
			}
		}
	}
</style>