BiKing/pages/task/modules/task-explain.vue

<template>
	<uni-popup ref="popupRef">

		<view class="unopen-box">
			<view class="unopen-title">
				任务说明
			</view>
			<view class="unopen-content">
				<text class="content-title">任务说明</text>
				<view class="content-text">
					BiKing合约任务中心，将参与合约交易中所涉及的各项执行步骤.拆分成有趣多样的任务体系。用户可通过完成各项任务的对应要求获得USDT赠金奖励。完成的任务越多，获得的奖励越丰厚。任务中心的任务主要分成三个类别，分别是新人任务，成长任务以及活动任务
				</view>
				<view class="content-confirm" @click.stop="closePopup">
					确认
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: "taskExplain",
		data() {
			return {

			};
		},
		mounted() {
			// this.$refs.popupRef.open()
		},
		methods: {
			open() {
				this.$nextTick(() => {
					this.$refs.popupRef.open();
				})
			},
			closePopup(){
				this.$nextTick(() => {
					this.$refs.popupRef.close();
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.unopen-box {
		width: 587rpx;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;

		.unopen-title {
			height: 90rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #1a1a1a;
			line-height: 90rpx;
			letter-spacing: 0.64rpx;
			border-bottom: 1rpx solid #e6e6e6;
		}

		.unopen-content {
			padding: 0  34rpx 67rpx;
			.content-title{
				padding: 33rpx 0 15rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #1a1a1a;
				line-height: 40rpx;
			}
			.content-text{
			 
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #808080;
				line-height: 38rpx;
			}
			
			.content-confirm{
				margin-top: 36rpx;
				width: 100%;
				height: 75rpx;
				background: #05c175;
				border-radius: 8rpx;
				line-height: 75rpx;
				text-align: center;
			 
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400; 
				color: #ffffff;
			 
				letter-spacing: 0.64rpx;
			}
		}

	}
</style>