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/left-logo.png" alt="">
            <p>明世继元</p>
          </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'}">
              信息公告
              <div class="child">
                <router-link to="/policy">政策法规</router-link>
              </div>
            </router-link>
            <router-link to="/auction/announcement" tag="li">
                拍卖中心
                <div class="child">
                  <router-link to="/auction/announcement">拍卖公告</router-link>
                  <router-link to="/auction/display">拍品展示</router-link>
                  <router-link to="/auction/other">其他链接</router-link>
                </div>
              </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="/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="right-logo">
            <img src="@/assets/images/right-logo.png" alt="">
          </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>-->
<!--&lt;!&ndash;        <div class="swiper-pagination" slot="pagination"></div>&ndash;&gt;-->
<!--      </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
  height 95px
  position relative
  box-shadow 0 0 10px #ddd
  .header-nav
    padding 5px 0
    width 1200px
    margin 0 auto
    .logo
      width 1200px
      margin 0 auto
      &:after
        content ''
        display block
        clear both
      a
        display block
        float left
        text-align center
        img
          width 70px
          height 52px
        p
          color #4c4c4c
          font-size 16px
          font-weight 800
      .nav-box
        float left
        margin-left 200px
        margin-top 5px
        &:after
          content ''
          display block
          clear both
        li
          float left
          line-height 44px
          font-size 16px
          color #333
          margin-right 75px
          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

      .right-logo
        float right
        margin-top 5px
        img
          width 80px
          height 70px
  .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>