<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: async function() {
			const res = await this.$api.getCompany({})
			uni.setStorageSync("companyInfo",res.data)
			const res1 = await this.$api.getNavScode({})
			uni.setStorageSync("navInfo",res1.data)
			function remSize(){
			  var deviceWidth = document.documentElement.clientWidth || window.innerWidth; //兼容多浏览器
			
			  //限制宽度
			  if(deviceWidth >= 750){
			    deviceWidth = 750
			  }
			  if(deviceWidth <= 320){
			    deviceWidth = 320
			  }
			
			  /*
			  为什么除以7.5呢？是因为结果比较好计算，这也是可以根据设计稿的宽度来决定的。
			  例如设计稿宽度是750px，那么将html的font-size设置成750/7.5=100px，那么1rem就相当于100px。当屏幕宽度不同的时候，也可以达到自适应的效果。
			  */
			  document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
			  document.querySelector('body').style.fontSize = 0.16 + 'rem' //相当于16px
			}
			remSize()
			//调整窗口大小时调用函数
			window.onresize = ()=> remSize()

			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>
<style lang="scss">
	/*每个页面公共css */
	page{
		background-color: #F3F4F5;
		overflow: hidden;
	}
	.menu{
		width: 250px;
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		z-index: 122;
		background-color: #f5f5f5;
		padding-top: 100px;
		box-sizing: border-box;
		animation: fade 1s;
		@keyframes fade {
			from {left:-200px;}
			to {left: 0;}
		}
		.btn{
			width: 80px;
			text-align: center;
			background-color: #211E70;
			font-size: 15px;
			color: #FFFFFF;
			cursor: pointer;
			line-height: 50px;
			border-radius: 5px;
			position: absolute;
			left: 50%;
			margin-left: -40px;
			bottom: 50px;
			z-index: 2;
		}
		.li{
			font-weight: 400;
			font-size: 20px;
			cursor: pointer;
			position: relative;
			flex: 1;
			max-width: 180px;
			text-align: center;
			padding: 25px 0;
			transition: all 0.2s;
			.title{
				color: #333333;
			}
			.desc{
				display: none;
			}
			&-on{
				.title{
					color: #211E70;
					font-weight: bold;
				}
				&::after{
					content: "";
					position: absolute;
					width: 5px;
					height: 30px;
					background: #211E70;
					border-radius: 3px;
					left: 0;
					top: 50%;
					margin-top: -15px;
					z-index: 2;
				}
			}
		}
	}
	.header{
		width: 100%;
		height: 80px;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 55;
		padding: 0 10%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.logo{
			width: 165px;
			height: 45px;
			cursor: pointer;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.icon{
			display: none;
			image{
				width: 40px;
				height: 40px;
			}
		}
		.nav{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.li{
				font-weight: 400;
				font-size: 20px;
				cursor: pointer;
				position: relative;
				flex: 1;
				max-width: 180px;
				text-align: center;
				padding: 25px 0;
				transition: all 0.2s;
				.title{
					color: #333333;
				}
				.desc{
					display: none;
				}
				&-on{
					.title{
						color: #211E70;
						font-weight: bold;
					}
					&::after{
						content: "";
						position: absolute;
						width: 34px;
						height: 6px;
						background: #211E70;
						border-radius: 3px;
						left: 50%;
						bottom: 0;
						z-index: 2;
						margin-left: -17px;
					}
				}
				&:hover{
					.title{
						color: #211E70;
						font-weight: bold;
					}
					.desc{
						width: 100%;
						display: block;
						position: absolute;
						left: 0;
						top: 74px;
						z-index: 2;
						background-color: rgba(255, 255, 255, 0.6);
						.item{
							width: 100%;
							line-height: 50px;
							text-align: center;
							font-size: 18px;
							transition: all 0.2s;
							&:hover{
								color: #211E70;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}
	.footer{
		width: 100%;
		height: 370px;
		background: #ececec;
		.d{
			height: 115px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10%;
			font-size: 16px;
			color: #000000;
			text-align: center;
		}
		.t{
			padding: 40px 0 0;
			box-sizing: border-box;
			overflow: hidden;
			.a{
				display: flex;
				align-items: center;
				justify-content: center;
				.a1{
					margin-left: 25px;
				}
				image{
					width: 100px;
					height: 100px;
					&:first-child{
						// margin-right: 25px;
					}
				}
			}
			.b{
				font-size: 16px;
				color: #000000;;
				text-align: center;
				margin-top: 18px;
			}
			.c{
				font-size: 16px;
				color: #000000;;
				text-align: center;
				margin-top: 18px;
			}
		}
	}
	
	/* 小设备 (平板电脑和大型手机，600 像素及以下) */
	@media only screen and (max-width: 599px) {
		.header{
			padding: 0 2%;
			.nav{
				display: none;
			}
			.icon{
				display: block;
			}
		}
		.footer{
			width: 100%;
			.d{
				display: block;
				.p{
					flex: 1;
					text-align: center;
					margin-top: 20px;
				}
			}
		}
	}
	/* 小设备 (平板电脑和大型手机，600 像素及以上) */
	@media only screen and (min-width: 600px) and (max-width: 767px)  {
		.header{
			padding: 0 2%;
			.nav{
				display: none;
			}
			.icon{
				display: block;
			}
		}
		.footer{
			width: 100%;
			.d{
				display: block;
				.p{
					flex: 1;
					text-align: center;
					margin-top: 25px;
				}
			}
		}
	}

	/* 中型设备（平板电脑，768 像素及以上） */
	@media only screen and (min-width: 768px) and (max-width: 991px) {
		.header{
			padding: 0 2%;
			.nav{
				display: none;
			}
			.icon{
				display: block;
			}
		}
		.footer{
			width: 100%;
			.d{
				display: block;
				.p{
					flex: 1;
					text-align: center;
					margin-top: 20px;
				}
			}
		}
	} 

	/* 大型设备（笔记本电脑/台式机，992 像素及以上） */
	@media only screen and (min-width: 992px) and (max-width: 1199px) {
		.header{
			padding: 0 2%;
			.nav{
				display: none;
			}
			.icon{
				display: block;
			}
		}
	} 

	/* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
	@media only screen and (min-width: 1200px) and (max-width: 1350px){
		.header{
			width: 100%;
			padding: 0 5%;
		}
		.footer{
			width: 100%;
		}
	}
</style>
