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>
    </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: 1001;
      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;
    }
  }
</style>