bjmsjy-portal-new/src/assets/components/Header.vue

<template>
  <div class="header">
    <div class="header-nav">
      <div class="header-contact">
        <div class="logo">
          <router-link to="/" title="北京明世纪元招标有限公司">
            <img src="@/assets/images/logo.png" alt="">
          </router-link>
          <ul class="nav-box">
            <router-link to="/" tag="li" :class="{active: this.$route.path == '/'}">网站首页</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 class="contact">
            <span class="phone">010-63518887</span>
            <span class="email">bjmsjy@163.com</span>
          </div>
        </div>
      </div>
    </div>
    <div class="banner">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide>
          <div class="banner-box">
            <img :src="requestUrl + '/news/route/file/downloadfile/true/' + coverPhoto" alt="">
          </div>
        </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
  //padding 10px 0
  height 500px
  overflow hidden
  position relative
  .header-nav
    padding 15px 0
    background rgba(255,255,255,0.6)
    margin-top 40px
    .header-contact
      width 1200px
      margin 0 auto
    .logo
      width 1200px
      margin 0 auto
      &:after
        content ''
        display block
        clear both
      a
        display block
        float left
        img
          width 160px
      .nav-box
        float left
        margin-left 130px
        //margin-top 10px
        &:after
          content ''
          display block
          clear both
        li
          float left
          line-height 44px
          font-size 16px
          color #333
          margin-right 30px
          cursor pointer
          position relative
          border-bottom 3px solid #b2b2b2
          &: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
      .contact
        float right
        margin-top 12px
        span
          font-size 12px
          display inline-block
          color #2c367e
          font-style oblique
          padding 0 15px 0 20px
          &.phone
            background url("~@/assets/images/phone.png") no-repeat left center
            border-right 1px solid #2c367e
            margin-right 10px
          &.email
            background url("~@/assets/images/email.png") no-repeat left center
  .banner
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    z-index -1
    .swiper-container
      height 100% !important
    .banner-box
      position relative
      width 100%
      height 100%
      overflow hidden
      img
        position absolute
        top 0
        left 50%
        transform translate(-50%, 0)
        height 500px
</style>