<template>
	<view class="page-container">
		<view class="share-money-header">
			<image src="/static/images/make-money-bg.png" mode="widthFix">
				<view class="share-money-content">
					<view class="title">推广说明</view>
					<text class="content">
						{{content}}
					</text>
				</view>
		</view>
		<navigator url="/pages/user/share" open-type="switchTab" hover-class="none" class="share-money-button">
			开始赚钱
		</navigator>
		<navigator url="/pages/user/coin-record" hover-class="none" class="view-button">
			查看我的收益 >
		</navigator>
	</view>
</template>

<script>
	import {
		app
	} from '@/utils/api'
	
	export default {
		data() {
			return {
				content: ''
			}
		},
		onLoad() {
			app.shareMoney().then(res => {
				this.content = res.data.content
			})
		}
	}
</script>

<style lang="scss">
	.page-container {
		padding-bottom: 30px;
		background-color: #D24846;

		.share-money-header {
			position: relative;
			uni-image {
				width: 100%;
			}
		}
		.share-money-content {
			position: absolute;
			left: 18%;
			right: 17%;
			top: 51%;
			bottom: 20%;
			overflow: hidden;
		
			.title {
				margin-bottom: 3%;
				font-size: calc(5 * 1vw);
				font-weight: 700;
				color: #e07b33;
				text-align: center;
			}
		
			.content {
				font-size: calc(3.8 * 1vw);
				line-height: 1.8;
			}
		}
		.share-money-button {
			margin: 0 5.8%;
			padding: 12px 5px;
			color: #fff;
			font-size: 18px;
			text-align: center;
			background: linear-gradient(90deg, #ff4382, #ff614c);
			border-radius: 30px;
			border: 4px solid rgba(255, 255, 255, 0.75);
		}

		.view-button {
			margin: 20px 5.8%;
			text-align: center;
			font-size: 16px;
			font-weight: 400;
			color: #113980;
		}
	}
</style>