<template>
  <div class="header">
    <div class="header-container">
      <div class="header-contact">
        <span class="phone">010-63518887</span>
        <span class="email">bjmsjy@163.com</span>
      </div>
      <div class="nav">
        <router-link to="/" class="logo" tag="div">
          <img src="@/assets/images/logo.png" alt="">
        </router-link>
        <ul class="nav-box">
          <router-link to="/" tag="li">网站首页</router-link>
          <router-link to="/info" tag="li" :class="{active: this.$route.path == '/info'}">信息公告</router-link>
          <router-link to="/company" tag="li" :class="{active: this.$route.path == '/company' || this.$route.path == '/honor'}">
            关于我们
            <div class="child">
              <router-link to="/company">公司简介</router-link>
              <router-link to="/honor">公司荣誉</router-link>
            </div>
          </router-link>
          <router-link to="/policy" tag="li" :class="{active: this.$route.path == '/policy'}">政策法规</router-link>
          <router-link to="/contact" tag="li" :class="{active: this.$route.path == '/contact'}">联系我们</router-link>
          <router-link to="/recruit" tag="li" :class="{active: this.$route.path == '/recruit'}">职位招聘</router-link>
        </ul>
      </div>
    </div>
    <div class="banner">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide>
          <img :src="requestUrl + '/news/route/file/downloadfile/true/' + coverPhoto" alt="">
        </swiper-slide>
<!--        <div class="swiper-pagination" slot="pagination"></div>-->
      </swiper>
    </div>
  </div>
</template>

<script>
import url from '@/assets/public/url'
export default {
  name: "",
  components: {},
  props: {
    coverPhoto: String
  },
  data() {
    return {
      requestUrl: url.url,
      swiperOptions: {
        // pagination: '.swiper-pagination',
        paginationClickable: true,
        autoplay: 3000
      }
    }
  },
  methods: {},
  mounted() {
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "~styles/public.styl"
.header
  //background $main-blue
  height 530px
  position relative
  .header-container
    width 1200px
    margin 0 auto
    .header-contact
      padding 10px 0
      span
        font-size 12px
        display inline-block
        color #fff
        font-style oblique
        padding 0 15px 0 20px
        &.phone
          background url("~@/assets/images/phone.png") no-repeat left center
          border-right 1px solid #fff
          margin-right 10px
        &.email
          background url("~@/assets/images/email.png") no-repeat left center
    .nav
      padding 10px 20px
      background #fff
      border-radius 10px
      &:after
        content ''
        display block
        clear both
      .logo
        float left
        cursor pointer
        img
          width 60px
          //height 60px
      .nav-box
        float right
        margin-top 10px
        &:after
          content ''
          display block
          clear both
        li
          float left
          line-height 48px
          font-size 16px
          color #333
          margin-right 80px
          cursor pointer
          position relative
          border-bottom 3px solid transparent
          &:last-child
            margin-right 0
          &.active, &:hover
            font-weight bold
            color $main-blue
            border-bottom 3px solid $main-red
          &:hover
            a
              font-weight normal
            .child
              display block
          .child
            position absolute
            top 100%
            left -13px
            padding 0 10px
            width 110%
            box-shadow 0 0 10px #EEE
            display none
            background #fff
            a
              display block
              line-height 40px
              font-size 16px
              color #333
              text-align center
              &:hover
                font-weight bold
                color $main-blue
  .banner
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    z-index -1
    img
      width 100%
      height 530px
</style>
