BiKing/pages/task/index.vue

<template>
	<view class="task-box">
		<headContent :showHead="false"></headContent>
		<view class="task-content">
			<view class="task-title">
				<text class="title-text">任务中心</text>
				<text class="title-record">奖励记录</text>
			</view>
			<view class="task-earnings">
				<view class="earnings-title">
					<text class="earnings-title-text">我的奖励金</text>
					<text class="earnings-title-explain" @click.stop="lookExplain">任务说明</text>
				</view>
				<view class="earnings-money">
					581 USDT
				</view>
				<view class="earnings-statistics">
					<view class="statistics">
						<text class="statistics-item">已使用 581 USDT</text>
						<text class="statistics-item">未领取 0 USDT</text>
					</view>
					<view class="earnings-btns">
						<view class="earnings-btn">赠金钱包</view>
						<view class="earnings-btn">去交易</view>
					</view>
				</view>
			</view>

			<view class="task-advertising">
				<text class="advertising-title">做任务，领百万USDT奖励</text>
				<text class="advertising-text">币王福利大放送</text>
			</view>

			<view class="onekey">
				<view class="onekey-text">
					<text class="onekey-title">币王福利中心</text>
					<text class="onekey-hint">即时任务冲冲冲，超级福利送送送</text>
				</view>
				<view :class="['onekey-btn' , onekeyGet ? 'active-onekey-btn' : '']"
					@click.stop="onekeyGet = !onekeyGet">
					一键领取
				</view>
			</view>

		</view>
		<task-list ref="taskListRef" :active-task="onekeyGet" />
		
		<taskExplain ref="taskExplainRef"/>
	</view>
</template>


<script>
	import taskList from "./modules/task-list.vue"
	import taskExplain from "./modules/task-explain.vue"
	export default {
		name: 'task',
		components: {
			taskList,
			taskExplain
		},
		data() {
			return {
				onekeyGet: true
			};
		},
		methods:{
			lookExplain(){
				this.$nextTick(() => {
					this.$refs.taskExplainRef.open();
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.task-box {
		width: 100%;

		// height: 100vh;
		.task-content {
			width: 100%;
			background-color: #fff;
			padding: 0 $pages-padding ;

			.task-title {
				width: 100%;
				min-height: 148rpx;
				padding-bottom: 32rpx;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;

				.title-text {

					font-size: 48rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #1a1a1a;
					letter-spacing: -0.96rpx;
				}

				.title-record {

					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: right;
					color: #1a1a1a;
					letter-spacing: -0.56px;
					line-height: 40rpx;
				}
			}

			.task-earnings {

				width: 100%;
				width: 690rpx;
				min-height: 254rpx;
				background: linear-gradient(119deg, #05a565 1%, #05c174 85%);
				border-radius: 10rpx;
				padding: 30rpx;
				color: #fff;

				.earnings-title {
					display: flex;
					justify-content: space-between;

					.earnings-title-text {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						color: #ffffff;
						letter-spacing: -0.56px;
						line-height: 40rpx;
					}

					.earnings-title-explain {

						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						color: #ffffff;
						letter-spacing: -0.48rpx;
						line-height: 33rpx;
					}

				}

				.earnings-money {
					padding-top: 10rpx;
					font-size: 52rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #ffffff;
					letter-spacing: 1.04rpx;
					line-height: 73rpx;
				}

				.earnings-statistics {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.statistics {
						display: flex;
						flex-direction: column;

						.statistics-item {

							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							color: #ffffff;
							// letter-spacing: 0.48rpx;
							line-height: 33rpx;
						}
					}

					.earnings-btns {
						display: flex;

						.earnings-btn {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							color: #ffffff;
							letter-spacing: 0.48rpx;
							padding: 9rpx 10rpx;
							min-width: 116rpx;
							min-height: 50rpx;
							text-align: center;
							border-radius: 6rpx;

							&:first-child {
								border: 1rpx solid #ffffff;
							}

							&:last-child {
								margin-left: 8rpx;
								background-color: red;
								background-color: #ffffff;
								color: #06BE74;
							}

						}
					}
				}


			}

			.task-advertising {
				margin-top: 21rpx;
				width: 100%;
				height: 124rpx;
				background: url("../../static/icon/icon_05.png") no-repeat center center;
				background-size: 690rpx 124rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 0 30rpx;

				.advertising-title {
					font-size: 40rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #06be74;
					letter-spacing: -0.8rpx;
					line-height: 56rpx;
				}

				.advertising-text {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #808080;
					letter-spacing: -0.48rpx;
					line-height: 33rpx;
				}

			}

			.onekey {
				width: 100%;
				min-height: 143rpx;
				padding: 29rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.onekey-text {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.onekey-title {

						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #1a1a1a;
						letter-spacing: -0.64rpx;
						line-height: 45rpx;
					}

					.onekey-hint {
						line-height: 33rpx;
						padding-top: 7rpx;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						color: #666666;
						letter-spacing: -0.48rpx;
					}


				}

				.onekey-btn {
					flex-shrink: 0;
					min-width: 147rpx;
					height: 67rpx;
					background: #c3c3cd;
					border-radius: 6rpx;
					text-align: center;
					line-height: 67rpx;
					padding: 0 26rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #ffffff;
					letter-spacing: -0.48rpx;
				}

				.active-onekey-btn {
					background-color: #05C175;
				}
			}

		}
	}
</style>