xpl/pages/conversion/frozen.vue

<template>
	<view class="frozen">
		<view class="header">
			<text>兑换规则</text><br>
			<text class="explain">每1000拼团冻结积分+10拼团值可兑换2000拼团积分</text>
		</view>
		<view class="content">
			<view class="title">
				<view class="l"></view>
				<view >福利兑换</view>
			</view>
			<view class="center">
				<view class="left">
					<view class="name">
						<text class="num">1000</text><br>
						<text>拼团冻结积分</text>
					</view>
					<view class="name">+</view>
					<view class="name"><text class="num">10</text>拼团值</view>
				</view>
				<view class="img">
					<image src="../../static/img/duhuanbg.png" mode=""></image>
				</view>
				<view class="right">
					<text class="num">1000</text>拼团积分
				</view>
			</view>
		</view>
		<view class="footer">
			当前剩余拼团冻结积分<text class="num">2000</text>拼团值<text class="num">50</text>
		</view>
		<view class="btn">
			确认兑换
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.header {
		font-size: 28rpx;
		padding: 30rpx;
		background-color: #fff;
		font-family: PingFang-SC-Medium;
		.explain {
			color: #6D7C88;
		}
	}
	.content {
		margin-top: 10rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 1rpx;
		.title {
			display: flex;
			.l {
				width: 4rpx;
				border-radius: 30rpx;
				margin-right: 10rpx;
				background: linear-gradient(180deg, #32C6FF 0%,  #2E58FF 100%);
			}
		}
		.center {
			width: 100%;
			display: flex;
			justify-content: space-around;
			padding: 30rpx;
			view {
				margin: auto 0;
			}
			.name {
				font-family: PingFang-SC-Bold;
				font-weight: bold;
				font-size: 35rpx;
				margin: 10rpx;
			}
			.left {
				text-align: center;
				display: grid;
				align-content: space-around;
			}
			.img {
				height: 80rpx;
				line-height: 80rpx;
				image {
					width: 80rpx;
					height: 100%;
				}
			}
			.right {
				font-family: PingFang-SC-Bold;
				font-weight: bold;
				font-size: 35rpx;
			}
		}
	}
	.footer {
		padding: 20rpx;
		color: #6D7C88;
	}
	.btn {
		background: linear-gradient(180deg, #32C6FF 0%,  #2E58FF 100%);
		color: #fff;
		font-size: 30rpx;
		width: 90%;
		border-radius: 60rpx;
		padding: 20rpx;
		text-align: center;
		margin: 120rpx auto;
	}
	.num {
		color: #2E58FF;
		margin-right: 5rpx;
	}
</style>