cyzh-SoundOfMusic-H5/pages/activityList/activity/awards.vue

<template>
	<view>
		<view class="bg-img" style="background-image: url('/static/bgimg.png');height: 310upx;"></view>
		<view class="container" style="margin: -80upx 30upx 30upx 30upx;">
			<view class="padding">
				<text class="text-bold text-black padding-right-sm">账户热力值</text>
				<text class="text-bold" style="color: #f87a3a;">可兑换到账288元</text>
			</view>
			<view class="padding-lr flex justify-between align-center">
				<view>
					<text style="font-size: 60upx;font-family: PingFang SC;font-weight: 800;color: #F3484E;">28216</text>
					<text class="padding-left-xs" style="font-size: 24upx;font-family: PingFang SC;font-weight: 800;color: #878787;">热力值</text>
				</view>
				<button class="cu-btn round text-white" style="background-color: #f75757;width: 140upx;">提现</button>
			</view>
			<view style="margin: 10upx 20upx;">
				<u-line color="#e0e0e0"></u-line>
			</view>
			<view style="padding: 20upx 0upx 0upx 30upx;">
				<text class="title">已提现：</text>
				<text class="number">100</text>
				<text class="title padding-left-xs">元</text>
			</view>
			<view style="padding: 10upx 0upx 20upx 30upx;">
				<text class="title">可提现：</text>
				<text class="number">188</text>
				<text class="title padding-left-xs">元</text>
			</view>
		</view>
		<view class="container margin-lr">
			<view class="padding flex align-center">
				<view class="cuIcon-text text-bold padding-right-xs" style="font-size: 38upx;"></view>
				<view class="title">提现明细</view>
			</view>
			<block v-for="(item, index) in 6" :key="index">
				<view class="flex align-center justify-between">
					<view class="padding-lr">
						<view class="title">热力提现</view>
						<view style="font-size: 24upx;font-family: PingFang SC;font-weight: bold;color: #686868;">2020-11-24 00:32</view>
					</view>
					<view class="padding-right">
						<text style="font-size: 36upx;font-family: PingFang SC;font-weight: bold;color: #F3484E;">+45</text>
						<text class="text-bold padding-left-xs">元</text>
					</view>
				</view>
				<view style="padding: 20upx;">
					<u-line color="#e0e0e0"></u-line>
				</view>
			</block>
		</view>
		<view style="height: 30upx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.container {
		background-color: #FFFFFF;
		border-radius: 16upx;
		box-shadow: 0px 3px 79px 0px rgba(132, 132, 132, 0.22);
	}
	.title {
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
	}
	.number {
		font-size: 30upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #F3484E;
	}
</style>