<template>
	<view>
		<!-- #ifdef H5 -->
		<view class="head">
			<view class="head-box">
				<view class="head-logo">
					<navigator url="#" class="logo"></navigator>
				</view>
				<view class="head-nav uni-flex">
					<view class="nav" :class="{'active':active==1}">
						<navigator url="../../pages/index/index" @click="act(1)">首页</navigator>
					</view>
					<view class="nav" :class="{'active':active==2}">
						<navigator url="#" @click="act(2)">目的地</navigator>
					</view>
					<view class="nav" :class="{'active':active==3}">
						<navigator url="#" @click="act(3)">旅游攻略</navigator>
					</view>
					<view class="nav-xl " :class="{'active':active==4}">
						<view class="nav-xl-nav" >
							<navigator url="#"  @click="act(4)">
								<text>去旅行</text>
								<text class="nav-icon"></text>
							</navigator>		
						</view>
						<view class="xl">
							<view class="xl-br">自由行
								<text class=" xl-icon">hot</text>
							</view>
							<view class="xl-br">跟团游</view>
							<view class="xl-br">当地游</view>
							<view class="xl-br">邮轮</view>
							<view class="xl-br">签证</view>
						</view>
					</view>
					<view class="nav":class="{'active':active==5}">
						<navigator url="#" @click="act(5)" >机票火车</navigator>
					</view>
					<view class="nav " :class="{'active':active==6}">
						<navigator url="../../pages/hotel/hotel" @click="act(6)">订酒店</navigator>
					</view>
					<view class="nav-xl ">
						<view class="nav-xl-nav">
							<navigator url="#">
								<text>社区</text>
								<text class="nav-icon"></text>
							</navigator>
						</view>
						<view class="xl nav-sq-xl">
							<view class="xl-br">问答
								<text class=" xl-icon">hot</text>
							</view>
							<view class="xl-br">周边</view>
							<view class="xl-br">穷游俱乐部</view>
							<view class="xl-br">同城</view>
							<view class="xl-br">照片PK</view>
							<view class="xl-br">真人show</view>
						</view>
					</view>
					<view class="nav">
						<navigator url="#" >APP</navigator>
					</view>
					<view class="nav">
						<navigator url="#" class="nav-logo"></navigator>
					</view>
				</view>
				<view class="head-login">
					<navigator url="#" class="login-wb login-icon"></navigator>
					<navigator url="#" class="login-qq login-icon"></navigator>
					<navigator url="#" class="login-wx login-icon"></navigator>
					<navigator url="#" class="login-size">登录</navigator>
					<text>|</text>
					<navigator url="../../pages/reg/reg" class="login-size">注册</navigator>
				</view>
			</view>
			<view class="head-bottom"></view>
		</view>
			
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		name:"index-header",
		data() {
			return {
				list:[
					{title:'首页'}
				],
                active:1
			};
		},
        methods:{
            act(a){
                this.active=a
                
                console.log(a)
            }
        },
        
	}
</script>

<style lang="scss">
	
	//最大屏
	@media (min-width:1440px) {
		.head-box{
			height: 68px;
			.head-logo{
				padding: 15px 0 12px 14px;
					.logo{
						// width: 120px;
						height: 39px;
						background: url(../../static/index/header/header-sprites15.png)no-repeat 0 0 ;
					}
			}
			.head-nav{
				view{
					line-height: 68px;
				}
                .nav{
                    font-size: 16px;
                }
				.nav:hover{
					color: $color;
					border-bottom: 3px solid $color;
					z-index: 999;
					height: 65px;
				}
				.xl{
					top:65px
				}
				.nav-logo{
					height: 68px;
				}
			}
			.head-login{
				padding: 16px 0;
			}
		}
		
	}
	//最小屏
	@media (max-width:1440px) {
		.head-box{
			height: 58px;
			.head-logo{
				padding: 11px 0 12px 15px; 
				.logo{
					width: 120px;
					height: 33px;
					background: url(../../static/index/header/header-small-sprites3.png)no-repeat 0 0 ;
				}
			}
			.head-nav{
				line-height: 52px;
				.nav:hover{
					color: $color;
					border-bottom: 3px solid $color;
					z-index: 999;
					// height: 58px;
				}
                .nav{
                    font-size: 14px;
                }
				.xl{
					top: 53px;
				}
				.nav-icon{
					border-top: 4px solid #666;
					border-left:4px dashed transparent;
					border-right: 4px dashed transparent;
					display: inline-block;
					margin: 0 -5px 0 3px;
					vertical-align: middle;
				}
				.nav-logo{
					height: 58px;
				}
			}
			.head-login{
				padding: 14px 0;
			}
		}
		
	}
	
	.head{
		position: relative;
		.head-box{
			// background-color: pink;
			width: 1200px;
			margin: 0 auto;
			.head-logo{
				float: left;
				width: 136px;
			}
			//导航栏
			.head-nav{
				height: 100%;
				display: flex;	
				padding: 0 20px;
				font-size: 16px;
				// position: relative;
				float: left;
				color: #333;
                
                .active{
                    background-color: $color;
                    color: #fff;
                }
				.nav{
					padding: 0px  16px;
					z-index: 4;
					// border-top: 1px solid #fff;
					// border-bottom: 0;	
				}
				.nav-icon{
					border-top: 4px solid #666;
					border-left:4px dashed transparent;
					border-right: 4px dashed transparent;
					display: inline-block;
					margin: 0 -5px 0 3px;
					vertical-align: middle;
				}
				.nav-xl{ 
					position: relative;
					padding: 0px  16px;
					z-index: 4;
					display: block;	
                    border-top:2px solid rgba(255,255,255,0);
                    border-left:1px solid rgba(255,255,255,0);
                    border-right:1px solid rgba(255,255,255,0);
					box-sizing:border-box;
				}
                .nav-xl:hover{
                    border-top:2px solid $color;
                    border-left:1px solid #999;
                    border-right:1px solid #999;
                }
				.nav-xl:hover  .xl{
					display: block;
                    
				}
				.xl{
					// height: 230px;
					width: 140px;
					font-size: 14px;
					display: none;
					padding: 0;
					position: absolute;
					// background-color: rgba(255,255,255,.95);
					background-color:rgba(255,255,255,.8);
					border:1px solid #d6d6d6;
					line-height: 40px;
					left: -1px;
					z-index: 3;
					color: #333;
					border-color: #eaeaea;
					view{
						padding: 2px 20px;
					}
					.xl-icon{
						background-color: #f46240;
						margin-left: 15px;
						position: absolute;
						line-height: 14px;
						top: 12px;
						left: 65px;
						color: #fff;
						font-size: 14px;
					}
					.xl-icon::before{
						content: '';
						border-right: 7px solid #f46240;
						border-top:7px solid transparent;
						border-bottom:7px solid transparent;
						position:  absolute;
						width: 0;
						height: 0;
						left: -7px;
					}
					
					.xl-br:hover{
						background-color: #eee;
					}
				}
				
				.nav-logo{
					background: url(../../static/index/header/mfwzx.png)no-repeat center;			background-size: 75px 30px;
					width: 75px;
				}
				
			}
			//右图标
			.head-login{
				float: right;
				color: #ff9d00;
				font-size: 14px;
				height: 26px;
				overflow: hidden;
				>navigator{
					display: inline-block;
				}
				>text{
					padding: 0 10px;
					color: #c9c9c9;
				}
				.login-icon{
					width: 26px;
					height: 26px;
					background-image:url(../../static/index/header/header-sprites15.png);
				margin-right: 10px;
					vertical-align: -7px;
				}
				.login-wb{
					background-position: 0 -50px;;
				}
				.login-wb:hover{
					background-position: 0 -80px;
				}
				.login-qq{
					background-position: -30px -50px;
				}
				.login-qq:hover{
					background-position: -30px -80px;
				}
				.login-wx{
					background-position: 0 -165px;
				}
				.login-wx:hover{
					background-position: -30px -165px;
				}
				.login-size:hover{
					text-decoration: underline;
				}
			}
		}
		.head-bottom{
			width: 100%;
			border-top: 1px solid #d6d6d6;
			position: absolute;
			background-color: rgba(0,0,0,.06);
			bottom: 0;
			z-index: 2s;
			height: 2px;
		}
	}
	
	
</style>
