feiniao-youwei-uniapp/pages/tabBar/tree/components/memberLevel.vue

<template>
	<view class="member-level">
		<!-- 用户会员信息 -->
		<view class="user-wrap">
			<view class="user-info">
				<up-image class="avatar" :fade="false"
					src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" width="96rpx"
					height="96rpx" shape="circle"></up-image>
				<view class="level-wrap">
					<text class="name">V1 青铜守护</text>
					<view class="progress-wrap">
						<view class="progress-value">
							<view class="total"></view>
						</view>
						<view class="progress-score">
							<text class="cur-val">80</text>/100分
						</view>
					</view>
					<view class="level-desc">
						再累计能量<text class="level-text"> 20分 </text>即可升级到 青铜等级
					</view>
				</view>
			</view>
			<slot></slot>
		</view>
		<!-- 树信息 -->
		<view class="tree-info">
			<view class="info-text">
				<view>汕尾妙荔</view>
				<text>现代农业产业园</text>
			</view>
			<view class="info-text">
				<view>16年老树</view>
				<text class="text">妃子笑荔枝</text>
			</view>
			<view class="info-text">
				<view>成熟期</view>
				<text class="text">温度适宜-梢期杀虫</text>
			</view>
		</view>
	</view>
</template>

<script setup>
</script>

<style lang="scss" scoped>
	@import "@/static/style/mixin.scss";
	.member-level {
		.user-wrap {
			display: flex;
			border-radius: 70rpx 0 0 70rpx;
			padding: 16rpx 20rpx;
			margin: 0 0 10rpx 24rpx;
			position: relative;
			width: calc(100% - 24rpx);
			box-sizing: border-box;
			background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.4), transparent);

			.user-info {
				width: 100%;
				display: flex;

				.avatar {
					border: 2rpx solid #fff;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.level-wrap {
					line-height: 32rpx;
					width: 54%;

					.name {
						// color: #fff;
						font-family: 'PangMenZhengDao';
					}

					.progress-wrap {
						font-size: 20rpx;
						color: rgba(0, 0, 0, 0.8);
						display: flex;
						align-items: center;
						justify-content: space-between;

						.progress-value {
							width: calc(100% - 120rpx);
							height: 16rpx;
							background: #E7E7E7;
							border-radius: 40rpx;
							border: 2rpx solid #fff;

							.total {
								width: 80%;
								height: 100%;
								border-radius: 20rpx;
								background-image: linear-gradient(120deg, #FDE492, #FB9C03);
							}
						}

						.cur-val {
							font-size: 26rpx;
							font-weight: 500;
							color: #fff;
						}
					}

					.level-desc {
						font-size: 20rpx;
						color: rgba(0, 0, 0, 0.84);

						.level-text {
							color: #fff;
						}
					}
				}
			}
		}
		.tree-info {
			width: 95%;
			height: 160rpx;
			box-sizing: border-box;
			padding: 0 50rpx 20rpx;
			@include ossBg("treePage/tree-info-bg.png");
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 28rpx;
			font-weight: 500;
			margin: auto;
		
			.info-text {
				text-align: center;
				line-height: 32rpx;
				font-family: 'SMILEYSANS';
				position: relative;
		
				.text {
					font-size: 22rpx;
				}
			}
		
			.info-text+.info-text {
				&::before {
					content: '';
					position: absolute;
					left: -34rpx;
					top: 14rpx;
					width: 1rpx;
					height: 38rpx;
					background: rgba(0, 0, 0, 0.26);
				}
			}
		}
	}
</style>