<template>
	<view class="loading" v-if="visible">
		<view class="loading_model" v-if="!transparentMask">
			<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/load_dynamic.gif"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 是否显示
			visible: {
				type: Boolean,
				default: false
			},
			// 透明遮罩
			transparentMask: {
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loading {
		position: fixed;
		z-index: 9999;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		
		.loading_model {
			background-color: rgba($color: $bg-0, $alpha: 0.3);
			margin: -120rpx 0 0 -120rpx;
			justify-content: center;
			border-radius: 16rpx;
			align-items: center;
			position: absolute;
			height: 240rpx;
			width: 240rpx;
			display: flex;
			left: 50%;
			top: 50%;
			.pic {
				height: 180rpx;
				width: 180rpx;
			}
		}
	}
</style>
