digitalMen/components/wike-loading-page/wike-loading-page.vue

<template>
	<view>
		
			<!-- #ifdef H5 -->
			<!-- <view class="loading-wrap" v-if="isLoading">
			<u-loading-page :loading="isLoading" loading-text="正在加载" icon-size="35" color="#9e9e9e" loadingColor="#9e9e9e"></u-loading-page>
			</view> -->
			<view class="loading-wrap" v-show="isLoading">
				<!-- <view class="ue-page-loading"></view> -->
				<image class="loading-image" src="/static/images/loading.gif"></image>
				<!-- <u-loading-icon  textSize="19" :vertical="true" size="42" mode="semicircle"></u-loading-icon> -->
			</view>
			<!-- #endif -->
			
			<!-- #ifdef MP-WEIXIN -->
			<!-- <view class="loading-wrap" v-if="appInfo.examine_mode == 1 || isLoading">
			<u-loading-page :loading="appInfo.examine_mode == 1 || isLoading" loading-text="正在加载" icon-size="35" color="#9e9e9e" loadingColor="#9e9e9e"></u-loading-page>
			</view> -->
			<view class="loading-wrap" v-if="appInfo.examine_mode == 1 || isLoading">
				<!-- <view class="ue-page-loading"></view> -->
				<image class="loading-image" src="/static/images/loading.gif"></image>
				<!-- <u-loading-icon  textSize="19" :vertical="true" size="42" ></u-loading-icon> -->
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		name:"wike-loading-page",
		data() {
			return {
				
			};
		},
		props: {
			isLoading: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			...mapGetters(['appInfo'])
		},
		mounted : async function() {
			// // #ifdef MP-WEIXIN || MP-KUAISHOU
			// let init = await this.appInit()
			// 	if(init.examine_mode == 1){
			// 		this.$Router.replaceAll('/pages/wx/wx')
			// 	}
			// // #endif
		},
		methods: {
			...mapActions(['appInit']),
		}
	}
</script>

<style>
/* .loading-wrap {
		width: 100vw;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
	} */

// 加载
	.loading-wrap {
		width: 100vw;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
		z-index: 9999;
		background: #fff;
		
	}
.loading-image{
			width: 600rpx;
			height: 400rpx;
		}
	.loading {
		width: 180rpx;
		height: 180rpx;
		position: relative;
	}

	.loading-bg {
		width: 180rpx;
		height: 180rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.loading-rotateing {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 180rpx;
		height: 180rpx;
		-webkit-animation: rotating 600ms linear 0ms reverse infinite;
		animation: rotating 600ms linear 0ms reverse infinite;
	}

	@-webkit-keyframes rotating {
		from {
			-webkit-transform: rotate(0);
			transform: rotate(0);
		}

		to {
			-webkit-transform: rotate(-360deg);
			transform: rotate(-360deg);
		}
	}

	@keyframes rotating {
		from {
			-webkit-transform: rotate(0);
			transform: rotate(0);
		}

		to {
			-webkit-transform: rotate(-360deg);
			transform: rotate(-360deg);
		}
	}

	/* 加载样式2 */
	.ue-page-loading {
		position: absolute;
		top: calc(50% - 1.25em);
		left: calc(50% - 1.25em);
		width: 2.5em;
		height: 2.5em;
		-webkit-transform: rotate(165deg);
		transform: rotate(165deg);
		z-index: 10;
	}

	.ue-page-loading:before,
	.ue-page-loading:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		width: .5em;
		height: .5em;
		border-radius: .25em;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%)
	}

	.ue-page-loading:before {
		-webkit-animation: before 2s infinite;
		animation: before 2s infinite
	}

	.ue-page-loading:after {
		-webkit-animation: after 2s infinite;
		animation: after 2s infinite
	}

	@keyframes before {
		0% {
			width: .5em;
			-webkit-box-shadow: 1em -.5em rgba(225, 20, 98, .75), -1em .5em rgba(111, 202, 220, .75);
			box-shadow: 1em -.5em rgba(225, 20, 98, .75), -1em .5em rgba(111, 202, 220, .75)
		}

		35% {
			width: 2.5em;
			-webkit-box-shadow: 0 -.5em rgba(225, 20, 98, .75), 0 .5em rgba(111, 202, 220, .75);
			box-shadow: 0 -.5em rgba(225, 20, 98, .75), 0 .5em rgba(111, 202, 220, .75)
		}

		70% {
			width: .5em;
			-webkit-box-shadow: -1em -.5em rgba(225, 20, 98, .75), 1em .5em rgba(111, 202, 220, .75);
			box-shadow: -1em -.5em rgba(225, 20, 98, .75), 1em .5em rgba(111, 202, 220, .75)
		}

		100% {
			-webkit-box-shadow: 1em -.5em rgba(225, 20, 98, .75), -1em .5em rgba(111, 202, 220, .75);
			box-shadow: 1em -.5em rgba(225, 20, 98, .75), -1em .5em rgba(111, 202, 220, .75)
		}
	}

	@keyframes after {
		0% {
			height: .5em;
			-webkit-box-shadow: .5em 1em rgba(61, 184, 143, .75), -.5em -1em rgba(233, 169, 32, .75);
			box-shadow: .5em 1em rgba(61, 184, 143, .75), -.5em -1em rgba(233, 169, 32, .75)
		}

		35% {
			height: 2.5em;
			-webkit-box-shadow: .5em 0 rgba(61, 184, 143, .75), -.5em 0 rgba(233, 169, 32, .75);
			box-shadow: .5em 0 rgba(61, 184, 143, .75), -.5em 0 rgba(233, 169, 32, .75)
		}

		70% {
			height: .5em;
			-webkit-box-shadow: .5em -1em rgba(61, 184, 143, .75), -.5em 1em rgba(233, 169, 32, .75);
			box-shadow: .5em -1em rgba(61, 184, 143, .75), -.5em 1em rgba(233, 169, 32, .75)
		}

		100% {
			-webkit-box-shadow: .5em 1em rgba(61, 184, 143, .75), -.5em -1em rgba(233, 169, 32, .75);
			box-shadow: .5em 1em rgba(61, 184, 143, .75), -.5em -1em rgba(233, 169, 32, .75)
		}
	}
</style>