<!-- 纯富文本展示页 -->
<template>
	<!-- #ifdef APP -->
	<view class="login" :style="{ backgroundImage: `url(${myFileUrl+background})`,paddingTop: CustomBar+'rpx' }">
		<view class="app-top" :style="{ height: CustomBar+'rpx',
		background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }"></view>
	<!-- #endif -->
	<!-- #ifndef APP -->
	<view class="login" :style="{ backgroundImage: `url(${myFileUrl+background})` }">
	<!-- #endif -->
		<view class="lg-top">
			<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
				<!-- #ifndef MP-WEIXIN -->
				<u-icon name="arrow-left" size="40" class="back" @click="back"
				:color="topLevel===0? '#f9f9f9' : `rgba(194, 234, 4,${topLevel})`"></u-icon>
				<image :src="myFileUrl+logo"></image>
				<view style="width: 75rpx;"></view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN  -->
				<image :src="myFileUrl+logo"></image>
				<!-- #endif -->
			</view>
			<view class="lg-content">
				
			</view>
		</view>
		<Loading :show="loading" />
	</view>
</template>

<script>
	import configService from '@/common/config.service.js';
	export default {
		data(){
			return{
				content: '',
				loading: true,// 加载
				// 基础路径
				myFileUrl: configService.fileUrl + 'pixel/my/',
				// 我的页面背景
				background: 'bluetext-background.png',
				// logo图标
				logo: 'logo.png',
				// 顶部距离等级
				topLevel: 0,
			}
		},
		// #ifndef H5
		onPageScroll(e) {
			const level = e.scrollTop/60;
			if(level<=1) this.topLevel = level;
			else this.topLevel = 1;
		},
		// #endif
		
		// #ifdef H5
		mounted(){
			let that = this;
			window.onscroll = function () {
			    //为了保证兼容性，这里取三个值，哪个有值取哪一个
			    //scrollTop就是触发滚轮事件时滚轮的高度
			    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				const level = scrollTop/60;
				if(level<=1) that.topLevel = level;
				else that.topLevel = 1;
			}
		},
		
		onHide() {
			window.onscroll = null;
		},
		// #endif
		methods:{
			// 返回
			back(){
				uni.navigateBack();
			},
		},
		onLoad(options) {
			this.loading = false;
		},
	}
</script>

<style scoped lang="scss">
.login{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-size: cover;
	.lg-top{
		// #ifdef APP
		.app-top{
			width: 100%;
			position: fixed;
			z-index: 81;
			top: 0;
		}
		// #endif
		.mobile-logo{
			width: 100%;
			display: flex;
			justify-content: center;
			// #ifndef MP-WEIXIN
			justify-content: space-between;
			align-items: center;
			.back{
				margin-left: 35rpx;
				margin-top: 5rpx
			}
			// #endif
			position: fixed;
			z-index: 81;
			padding: 15rpx 0;
			image{
				width: 200rpx;
				height: 45rpx;
			}
		}
	}
	
}
</style>