<template>
	<view v-if="show" style="z-index: 100000;background-image: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1ae627f1-d0fe-43cf-a7a6-6f30c5e8aadc/d902adaf-6e04-4358-ae28-84f4765b9493.jpg');background-size: 100%;" class="cu-loading-page">
		<view :style="[{height:CustomBarHeight+'px'}]" class="cu_loading_page__loading">
			<view :style="[{paddingTop:statusBarHeight+'px',lineHeight:CustomBarHeight-statusBarHeight+'px'}]" class="cu_loading_page__text padding-lr">
				  <view class="cu-load load-icon loading text-white" style="text-align: start;"></view>
			</view>
		</view>
		<view  class="cu_loading_page_content"><image :src="logo" mode="aspectFit"></image></view>
	</view>
</template>

<script>
import logo from '@/static/logo.png';
import { statusBarHeight, CustomBarHeight } from '../../config.js';
export default {
	props: {
		show: { type: Boolean, default: true }
	},
	data() {
		return {
			logo,
			statusBarHeight ,
			CustomBarHeight
		};
	}
};
</script>

<style scoped lang="scss">
@keyframes run {
	0%,50%,100% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(-50rpx);
	}
	75%{
		transform: translateY(50rpx);
	}
}
.cu-loading-page {
	position: fixed;
	top: 0;left: 0;
	width: 100vw;
	height: 100vh;
	background: rgb(243, 239, 239);
	/* 自动布局 */
	display: flex;
	justify-content: center;
	align-items: center;
	.cu_loading_page__loading{
		position: fixed;
		top: 0;height: 0;
		width: 100vw;
		.cu_loading_page__text{
		}
	}
	.cu_loading_page_content {
		background-color: #fff;
		width: 300rpx;
		height: 300rpx;
		border-radius: 50%;
		position: relative;
		animation: run 5s infinite linear;
		box-shadow: inset 0px 4px 10px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
		image {
			width: 200rpx;
			height: 200rpx;
			position: absolute;
			left: 50rpx;
			top: 50rpx;
			border-radius: 50%;
		}
	}
}
</style>
