<template>
	<div id="app">
		<div class="contentbox" :class="{mapBoxs : !isShow}">
			<nav-bar exclude="map" v-if="isShow"></nav-bar>
			<swiper exclude="map" v-if="isShow"></swiper>
			<div class="main-wrapper"><router-view /></div>
		</div>
		<page-bottom exclude="map" v-if="isShow"></page-bottom>
	</div>
</template>
<script>
import NavBar from './components/navBar/NavBar.vue';
import PageBottom from './components/pageBottom/PageBottom.vue';
import swiper from './components/swiper/swiper.vue';
export default {
	components: {
		NavBar,
		PageBottom,
		swiper
	},
	data(){
		return{
			isShow: true,
		}
	},
	watch:{
		$route(e){
			if(e.name == 'map'){
				this.isShow = false
			}else {
				this.isShow = true
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.contentbox {
	margin: 0 auto;
	max-width: 1200px;
	min-width: 1080px;
	}
.main-wrapper {
	width: 100%;
	margin: 0 auto;
}
.mapBoxs {
	margin: 0 auto;
	max-width: 1920px;
	min-width: 1080px;
}
</style>
