deming/pageE/mine/MineProgress.vue

<template>
	<view class="progress">
		<view class="header">
			<view class="line-progress">
				<view class="rank-value">lv1</view>
				<view class="line-box">
					<u-line-progress :percent="70" :show-percent="false" inactive-color="#FFFFFF" active-color="#F1A36B" height="30"></u-line-progress>
					<text>78/99</text>
				</view>
				<view class="rank-value">lv2</view>
			</view>
			<view class="exp-value">经验值<span>78</span></view>
			<view class="distance">距离下一级还需要21经验值</view>
		</view>
		<view class="body">
			<view class="title">
				<image src="/static/image/mine/34.png"></image>
				<text>等级定义</text>
			</view>
			<view class="rank-list">
				<view v-for="(rank, index) in rank" :key="index" class="list-item">
					<view class="rank-value">lv{{ rank.level }}</view>
					<view class="rank-interval"><span>经验值:</span>{{ rank.max == '--' ? rank.min + '及以上' : rank.min + '~' + rank.max }}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			rank: [
				{
					level: 1,
					min: 50,
					max: 99,
				},
				{
					level: 2,
					min: 100,
					max: 199,
				},
				{
					level: 3,
					min: 200,
					max: 399,
				},
				{
					level: 4,
					min: 400,
					max: 999,
				},
				{
					level: 5,
					min: 1000,
					max: 1999,
				},
				{
					level: 6,
					min: 2000,
					max: 4999,
				},
				{
					level: 7,
					min: 5000,
					max: '--',
				}
			]
		}
	}
};
</script>
<style lang="scss" scoped>
.progress {
	.header {
		width: 750rpx;
		height: 271rpx;
		background: url('/static/image/mine/33.png') no-repeat left top / contain;
		padding: 30rpx {
			top: 82rpx;
		};
		color: #FFF;
		.line-progress {
			display: flex;
			align-items: flex-start;
			margin-bottom: 5rpx;
			.rank-value {
				height: 30rpx;
				line-height: 30rpx;
				box-sizing: content-box;
				background:rgba(255,213,101,1);
				border-radius: 6rpx;
				padding: 0 10rpx;
			}
			.line-box {
				width: 400rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				margin: 0 16rpx;
				/deep/ .u-progress {
					.u-active {
						box-sizing: border-box;
						border: 4rpx solid #FFF;
						border-radius: 50rpx;
					}
				}
				> text {
					margin-top: 12rpx;
					font-size: 20rpx;
					color: rgba(255,255,255,1);
				}
			}
		}
		.exp-value {
			font-size: 28rpx;
			margin-bottom: 32rpx;
			> span {
				margin-left: 20rpx;
				font-size: 32rpx;
			}
		}
		.distance {
			font-size: 22rpx;
		}
	}
	.body {
		.title {
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(51,51,51,1);
			border-bottom: #ECECEC 1rpx solid;
			> image {
				width: 29rpx;
				height: 36rpx;
				margin-right: 20rpx;
			}
		}
		.rank-list {
			padding: 30rpx;
			.list-item {
				margin-bottom: 40rpx;
				display: flex;
				align-items: center;
				.rank-value {
					color: #FFF;
					height: 30rpx;
					line-height: 30rpx;
					box-sizing: content-box;
					background:rgba(255,213,101,1);
					border-radius: 6rpx;
					padding: 0 10rpx;
					margin-right: 15rpx;
				}
				.rank-interval {
					font-size: 28rpx;
					color: #999999;
					> span {
						margin-right: 10rpx;
						color: rgba(51,51,51,1);
					}
				}
			}
		}
	}
}
</style>