<template>
	<view class="wrap">

		<view class="container">
			<image class="container-bg" :src="require('@/static/index-bg1.png')"></image>
			<view class="imgwrap">
				<!-- <image class="imgwrap-map" :src="require('@/static/index-map.png')"></image> -->
				<!-- <image class="imgwrap-title" :src="require('@/static/index-title.png')"></image> -->
				<view class="titlewrap">
					<!-- <view class="title-progress">
						<view class="progress-bar-container">
							<view class="progress-bar" :style="{'width':progressPercentage+'%'}"></view>
						</view>
					</view> -->
					<view @click="toHome" style="min-height:240rpx">
						<image class="title-btn" v-if="showBtn" :src="require('@/static/index-btn.png')"></image>
					</view>


				</view>
				
			</view>
			<view class="support">
				<view>
					<p>技术支持:江苏有线苏州分公司</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		shareInfo
	} from "@/common/util.js"
	export default {
		components: {
		},
		data() {
			return {
				progressPercentage: 0,
				interval: null,
				isShare: false,
				showBtn: true,
				navBarBoxHeight: 0,
			}
		},
		onShareAppMessage() {
			return shareInfo
		},
		onShareTimeline() {
			return shareInfo
		},
		async onLoad() {
			this.start();
			const MenuButton = uni.getMenuButtonBoundingClientRect()
			this.navBarBoxHeight = MenuButton.top + MenuButton.height + 10
		},
		beforeDestroy() {
			// clearInterval(this.interval);
		},
		methods: {
			toHome() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			start() {
				// this.interval = setInterval(() => {
				// 	if (this.progressPercentage < 100) {
				// 		this.progressPercentage++;
				// 	} else {
				// 		clearInterval(this.interval);
				// 		this.showBtn = true
				// 	}

				// }, 30);
			},
		},
	}
</script>

<style lang="scss">
	.wrap {
		// height: 100vh;
		width: 100vw;
		position: relative;
		// padding-bottom:200rpx;
		height: 100vh;
	}

	.container {
		background: #efe9df;
		width: 100vw;
		position: relative;
		// padding-bottom:200rpx;
		min-height: 100vh;
		padding-bottom:80rpx;
		&-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.support {
			position: absolute;
			bottom: 30rpx;
			width: 100%;
			font-size: 24rpx;
			color: #333;
			font-family: '宋体';
			opacity: 1;
			text-align: center;
			z-index: 9;
		}
		.imgwrap {
			position: relative;
			z-index: 9;
			position: absolute;
			bottom: 60rpx;
			width:100%;
			&-map {
				width: 745rpx;
				height: 857rpx;
				margin: 0 auto;
				display: block;
			}

			&-title {
				width: 512rpx;
				height: 131rpx;
				margin: 30rpx auto;
				display: block;

			}

			.titlewrap {
				width: 70%;
				margin: 0 auto;

				.title-btn {
					width: 322rpx;
					height: 211rpx;
					margin: 0 auto;
					margin-top: 70rpx;
					display: block;
				}

				.title-progress {
					margin-top: 30rpx;
					.progress-bar-container {
						width: 100%;
						height: 40rpx;
						background-color: #f7f1e2;
						overflow: hidden;
						border: 4rpx solid #d6aca1;
						border-radius: 20rpx;
						margin: 0 auto;
						font-size: 0;
					}

					.progress-bar {
						height: 100%;
						background-color: #960909;
						width: 0;
						border-radius: 0 16rpx 16rpx 0;
					}

				}

			}
			
		}

	}
</style>