blindDate/pages/my/welfare.vue

<template>
	<view class="lf-w-100 lf-h-100">
		<view class="pure_top">
			<view class="tips-top">
				<view class="lf-font-60" style="color: #E21196;">10</view>
				<view class="lf-font-28 lf-color-555">可用桃花</view>
			</view>
		</view>
		<view class="change-tag">
			<view class="lf-p-b-20">
				<view class="change-top lf-flex-column welfare-top">
					<view>
						<text class="lf-iconfont icon-hua" style="color: #FD898E;font-size: 84rpx;"></text>
					</view>
					<view class="lf-color-333 lf-font-24">1条红线</view>
					<view class="lf-font-28" style="color: #E21196;">2900桃花</view>
				</view>
				<view class="change-bottom">兑换</view>
			</view>
			<view class="lf-p-b-20">
				<view class="change-top lf-flex-column welfare-top">
					<view>
						<text class="lf-iconfont icon-hua" style="color: #FD898E;font-size: 84rpx;"></text>
					</view>
					<view class="lf-color-333 lf-font-24">1条红线</view>
					<view class="lf-font-28" style="color: #E21196;">2900桃花</view>
				</view>
				<view class="change-bottom">兑换</view>
			</view>
			<view class="lf-p-b-20">
				<view class="change-top lf-flex-column welfare-top">
					<view>
						<text class="lf-iconfont icon-hua" style="color: #FD898E;font-size: 84rpx;"></text>
					</view>
					<view class="lf-color-333 lf-font-24">1条红线</view>
					<view class="lf-font-28" style="color: #E21196;">2900桃花</view>
				</view>
				<view class="change-bottom">兑换</view>
			</view>
			<view class="lf-p-b-20">
				<view class="change-top lf-flex-column welfare-top">
					<view>
						<text class="lf-iconfont icon-hua" style="color: #FD898E;font-size: 84rpx;"></text>
					</view>
					<view class="lf-color-333 lf-font-24">1条红线</view>
					<view class="lf-font-28" style="color: #E21196;">2900桃花</view>
				</view>
				<view class="change-bottom">兑换</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped="scoped">
	.welfare-top {
		justify-content: space-evenly;
		align-items: center;
		text-align: center;
	}
	.tips-top {
		width: 686rpx;
		height: 252rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		position: relative;
		top: 60rpx;
		padding: 50rpx 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.change-tag {
		width: 704rpx;
		margin: 316rpx auto;
		height: 338rpx;
		display: flex;
		justify-content: space-around;
		align-content: center;
		flex-wrap: wrap;
	}
	
	.change-top {
		width: 333rpx;
		height: 250rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 0 0;
	}
	
	.change-bottom {
		width: 333rpx;
		height: 88rpx;
		background: #E21196;
		border-radius: 0 0 10rpx 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		color: white;
	}
	
	.pure_top {
		width: 100%;
		height: 210rpx;
		position: relative;
		z-index: 1;
	}
	
	.pure_top::after {
		content: '';
		width: 140%;
		height: 210rpx;
		position: absolute;
		left: -20%;
		top: 0;
		z-index: -1;
		border-radius: 0 0 55% 55%;
		background: linear-gradient(180deg, #FE3EA5 0%, #FE7749 100%);
	}
</style>