<template>
  <div>
    <div class="header">
      <div class="header-content">
        <router-link to="/">
<!--          <img src="@/assets/images/logo.png" alt="">-->
        </router-link>
        <div class="search">
          <input type="text" placeholder="请输入关键字" @keyup.13="doSearch" v-model="keyword">
          <button @click="doSearch"></button>
        </div>
      </div>
    </div>
    <div class="nav">
      <div class="nav-content">
        <ul>
          <router-link to="/" tag="li" :class="{active: this.$route.path == '/'}">首页</router-link>
          <router-link to="/notice" tag="li" :class="{active: this.$route.path == '/notice'}">
            信息公告
            <div class="hide-menu">
              <router-link tag="div" :to="{path: '/notice',query:{tab: 0}}" class="menu-box">招标公告</router-link>
              <router-link tag="div" :to="{path: '/notice',query:{tab: 1}}" class="menu-box">中标公告</router-link>
              <router-link tag="div" :to="{path: '/notice',query:{tab: 2}}" class="menu-box">更正公告</router-link>
              <router-link tag="div" :to="{path: '/notice',query:{tab: 3}}"  class="menu-box">废标公告</router-link>
            </div>
          </router-link>
          <router-link to="/qualify" tag="li" :class="{active: this.$route.path == '/qualify'}">公司介绍和荣誉</router-link>
          <router-link to="/source" tag="li" :class="{active: this.$route.path == '/source'}">单一来源公示</router-link>
          <router-link to="/law" tag="li" :class="{active: this.$route.path == '/law'}">政策法规</router-link>
          <router-link to="/recruit" tag="li" :class="{active: this.$route.path == '/recruit'}">相关招聘</router-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'Header',
    components: {},
    data () {
        return {
          keyword: ''
        }
    },
    methods: {
      // 搜索
      doSearch: function () {
        var self = this
        if (self.keyword) {
          this.$router.push({
            path: '/search',
            query: {
              keyword: self.keyword
            }
          })
        }
      },
    },
    mounted: function () {}
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.header
  height 155px
  box-sizing border-box
  min-width 1200px
  padding 45px 0
  background url("~@/assets/images/topbg.jpg") no-repeat center
  background-size 100% 100%
  .header-content
    width 1200px
    margin 0 auto
    .search
      float right
      width 210px
      font-size 0
      margin-top 40px
      input
        width 180px
        font-size 14px
        height 25px
        padding 0 10px
        box-sizing border-box
        border none
        background #fff
        vertical-align top
      button
        width 30px
        height 25px
        cursor pointer
        vertical-align top
        border none
        outline none
        background #fcddd0 url("~@/assets/images/search-btn.jpg") no-repeat center
.nav
  height 50px
  background #2a5ca1
  margin-bottom 20px
  .nav-content
    width 1200px
    margin 0 auto
    ul
      &:after
        content ''
        display block
        clear both
      li
        float left
        line-height 50px
        text-align center
        font-size 18px
        color #fff
        width 200px
        cursor pointer
        box-sizing border-box
        border-right 1px solid #336bb8
        position relative
        &:first-child
          border-left 1px solid #336bb8
        &.active, &:hover
          background #ff4f01
        .hide-menu
          position absolute
          top 100%
          left 0
          width 100%
          display none
          z-index 10
          .menu-box
            color #fff
            background #fff
            height 40px
            line-height 40px
            text-align center
            border-bottom 1px solid #ff793d
            padding 0 10px
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            font-size 16px
            background rgba(255, 79, 1, 0.9) none repeat scroll 0 0
            &:hover
              background #cc3f00
        &:hover
          .hide-menu
            display block
</style>
