<template>
	<view class="content">
		<view class="box text-white">
			<view class="text-24">金币明细</view>
			<view class="mgy-20">
				<text class="text-48 mgr-10">5</text>金币></view>
			<view class="text-24">活动奖品数量有限，先到先得，兑完即止</view>
		</view>
		<view class="box2">
			<view class="top_box pd-30">
				<view class="text-36" style="color: #333;">新人签到 必得金币</view>
				<view class="text-24 mgt-10" style="color: #ffcdaf;">活动盛启，福利满满</view>
			</view>
			<view class="bottom_box pd-30">
				<view class="flex jc_between ai_center pdy-20" style="border-bottom: 1rpx solid #ddd;">
					<view>
						<view class="text-32">签到</view>
						<view class="text-24 text-999">连续签到奖励更高！</view>
					</view>
					<view class="btn">
						签到
					</view>
				</view>
				<view class="flex jc_between ai_center pdy-20" style="border-bottom: 1rpx solid #ddd;">
					<view>
						<view class="text-32">天天惊喜，红包多多</view>
						<view class="text-24 text-999">金币兑换海量福利等你来拿</view>
					</view>
					<view class="btn">
						立即领取
					</view>
				</view>
				<view class="flex jc_between ai_center pdy-20" style="border-bottom: 1rpx solid #ddd;">
					<view>
						<view class="text-32">易推小说</view>
						<view class="text-24 text-999">点击右边按钮体验</view>
					</view>
					<view class="btn">
						返回首页
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>


</script>

<style lang='scss' scoped>
	.content{
		min-height: 100vh;
		padding: 28rpx;
		background: linear-gradient(to bottom, #ff8843, #ffffff);
	}
	.box{
		width: 100%;
		height: 220rpx;
		padding: 28rpx;
		background: linear-gradient(90deg, #ff7a3d, #ff582e);
		border-radius: 30rpx;
	}
	.box2{
		margin-top: 50rpx;
		border-radius: 30rpx;
		.top_box{
			height: 180rpx;
			background: linear-gradient(90deg, #ff843c, #ff6e6e);
			border-radius: 30rpx 30rpx 0 0;
		}
		.bottom_box{
			margin-top: -30rpx;
			border-radius: 30rpx;
			background-color: #ffffff;
			height: 600rpx;
			.btn{
				background-color: #ff843c;
				color: #fff;
				height: 60rpx;
				line-height: 60rpx;
				width: 150rpx;
				text-align: center;
				border-radius: 30rpx;
			}
		}
	}
</style>