<!-- 头部和主题 -->
<template>
	<div class='indexPage'>
		<el-container style="height: 100%;" direction="vertical">
			<el-header class="headerBg" style="height: 80px;">
				<header-com></header-com>
			</el-header>
			<el-main style="height: 100%;background: #F0F0F0;">
				<div style="height: 100%;background: #FFF;">
					<div style="padding: 20px 20px;">
						<breadcrumb></breadcrumb>
					</div>
					<div style="padding: 0 20px;height: 90%;overflow-y: auto;">
						<router-view></router-view>
					</div>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	import headerCom from '../components/headerDetail';
	import breadcrumb from '../components/mainBreadcrumb'
	export default {
		name: "Index",
//import引入的组件需要注入到对象中才能使用
		components: { breadcrumb, headerCom},
		data () {
//这里存放数据
			return {

			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {

		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {

		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.indexPage{
		height: 100%;
	}

	.headerBg{
		width: 100%;
		height: 80px;
		background-image: url("../assets/images/nav-top.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}
</style>
