<template>
	<view class="integral1">
		<view class="integral-top">
			<view>
				<view class="title">总积分</view>
				<view class="value">999</view>
			</view>
			<view>
				<view class="title">经验值</view>
				<view class="value">999</view>
			</view>
			<view>
				<view class="title">预计进度</view>
				<view class="value">999</view>
			</view>
		</view>
		<view class="integral-botom">
			<rich-text :nodes="nodes"></rich-text>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			nodes: '<h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1>'
		}
	}
};
</script>
<style lang="scss" scoped>
.integral1 {
	.integral-top {
		padding: 79rpx 88rpx;
		width: 750rpx;
		height: 271rpx;
		background: linear-gradient(0deg,rgba(246,211,119,1) 1%,rgba(240,154,105,1) 100%);
		display: flex;
		justify-content: space-between;
		> view {
			flex: 1;
			text-align: center;
			.title {
				font-size: 28rpx;
				color: rgba(255,255,255, 0.6);
				margin-bottom: 29rpx;
			}
			.value {
				font-size: 48rpx;
				font-weight: 500;
				color: rgba(255,255,255,1);
			}
		}
	}
	.integral-botom {
		position: absolute;
		width: 750rpx;
		// height: 856rpx;
		background: rgba(255,255,255,1);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		top: 251rpx;
		z-index: 9;
	}
}
</style>