mall-web-ssr/components/main/Header.vue

<template>
  <div class="header-wrapper" id="headerWrapperContent">
    <div class="header clearfix" :class="{'fixed': isFixed}">
      <div class="container">
        <!--Logo商标-->
        <div class="header-brand pull-left">
          <nuxt-link :to="'/'">
            <img src="/images/logo/uas_mall.png" class="mall-logo"/>
            <div class="mall-slogan">
              <p>For the World<br/>为世界电子产业创造价值</p>
            </div>
          </nuxt-link>
        </div>
        <!--搜索-->
        <div class="header-search pull-left">
          <search-box :isPcb="isPcb"></search-box>
        </div>
        <!--统计-->
        <!-- <div class="header-count pull-right">
           <count-box></count-box>
         </div>-->
        <!--立即入驻 新手指南-->
        <div class="header-count pull-right">
          <!--立即入驻-->
          <a v-if="!user.logged" class="enter enter02" href="/businessEnter">
            <img src="/images/all/goInto.png"/>
          </a>
          <a v-if="user.logged" class="enter enter02" @click="goStoreApply()">
            <img src="/images/all/goInto.png"/>
          </a>
          <!--新手指南-->
          <a class="enter enter01" href="/help/home" target="_blank">
            <img src="/images/all/newPointer.png"/>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import SearchBox from './Search.vue'
  import CountBox from './count/Box.vue'

  export default {
    name: 'home-header',
    components: {
      SearchBox,
      CountBox
    },
    props: {
      isPcb: {
        type: Boolean,
        default: false
      },
      isFixed: {
        type: Boolean,
        default: false
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '~assets/scss/variables';
  .header-wrapper {
    height: 103px;
  }

  .header {
    padding: 10px 0;
    &.fixed {
      position: fixed;
      width: 100%;
      background: #fff;
      z-index: 1002;
      top: 0;
      padding-top: 20px;
      -webkit-box-shadow: 0 2px 0 0 #ccc;
      -moz-box-shadow: 0 2px 0 0 #ccc;
      box-shadow: 0 2px 0 0 #ccc;
    }

    .header-brand {

      .mall-logo {
        float: left;
      }

      .mall-slogan {
        line-height: 20px;
        font-weight: bold;
        color: $primary;
        border-left: 1px solid $primary;
        padding-left: 12px;
        margin-left: 118px;
        margin-top: 20px;
      }
    }

    .header-search {
      margin-top: 20px;
      margin-left: 75px;
    }
  }
  .header-count a.enter:hover img{
    transform: scale(1.06);
  }
  .header-count a.enter span{
    display: inline-block;
    width: 104px;
    height: 79px;
  }
  .header-count a.enter:hover span{
    width: 110px;
    height: 84px;
  }
  .header-count a.enter01 span{
    background: url('/images/all/newPointer.png')
  }
  .header-count a.enter01:hover span{
    background: url('/images/all/newPointer01.png')
  }
  .header-count a.enter02 span{
    background: url('/images/all/goInto.png')
  }
  .header-count a.enter02:hover span{
    background: url('/images/all/goInto01.png')
  }
</style>