<template>
	<header id="head" class="head textC">
		<slot name="iconL"></slot>
		<div v-if="goBack" class="iconL icon textC colorf" @click="$router.go(-1)">
			<i class="iconfont ">&#xe737;</i>
		</div>
		<span v-if="title" class="m-fs36 colorf title">{{title}}</span>
		<slot name="title"></slot>
		<slot name="iconR"></slot>
		<!--<div v-if="borderB" class="hr"></div>-->
	</header>
</template>

<script>

	export default {
		name: 'ZghHeader',
		props: {
			imgL: {
				default() {
					return ''
				}
			},
			title: {
				default() {
					return ''
				}
			},
			goBack: {
				default() {
					return true
				}
			},
			showMsg: {
				default() {
					return true
				}
			},
			borderB: {
				default() {
					return true
				}
			}
		},
		data() {
			return {
				sideActive: false,
			}
		},
		computed: {

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	@import url("../../assets/config");
	#head {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: @m-top;
		/*background: linear-gradient(to top, #ce3d3e, #ab1924);*/
		/*background: @common_cl;*/
		background: @common_cl;
		z-index: 999;
		.logo {
			.m-w(150);
		}
		.input-btn {
			max-width: 80%;
			width: 65%;
			.h(62);
			margin: 0 auto;
			border-radius: 6px;
			.lh(62);
			i {
				color: #dedede;
				margin-left: 10px;
				.fs(40)
			}
		}
		.iconL {

			display: block;
			width:13%;
			height: @m-top;
			line-height: @m-top;
			/*background: url(../../assets/images/back.png) no-repeat center;*/
			/*background-size: 40%;*/
		}
		.iconR {

			display: block;
			width:13%;
			height: @m-top;
			line-height: @m-top;
		}
		.msgnum {
			display: block;
			height: 80%;
			margin-top: 10%;
		}
		.msg {
			span {
				@L: 16px;
				position: absolute;
				top: 20%;
				right: -10%;
				display: block;
				height: @L;
				width: @L;
				line-height: @L;
				background: red;
				border-radius: 100%;
			}
		}
		.title{
			line-height:@m-top;
		}
	}

	.side {
		position: fixed;
		top: @m-top;
		left: -100%;
		width: 100%;
		background: #fff;
		transition: all .5s;
		&.active {
			left: 0;
		}
		a {
			display: inline-block;
			padding: 10px 20px;
			margin: 5px;
			font-size: 14px;
			background: #fff;
			border-radius: 6px;
			&.router-link-active {
				background: red;
				color: #fff;
			}
		}
	}

	.hr {
		width: 100%;
		height: 1px;
		transform: scaleY(.5);
		background: #ccc;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.userHeader .msg .iconfont {
		color: #fff;
	}
</style>
