sso-ssr/components/default/CloudHeader.vue

<template>
  <header class="header">
    <nav class="navbar">
      <div class="navbar-container container">
        <div class="navbar-header">
          <a href="http://www.usoftchina.com" class="item navbar-link">
            <img src="/images/logo/uas.png" class="navbar-logo">
          </a>
          <a href=""><span class="navbar-slogan">云中心</span></a>
        </div>
        <ul class="nav nav-pills f-nav">
          <li>
            <nuxt-link to="/cloudcenter" class="menu-item" exact>基本信息</nuxt-link>
          </li>
          <li>
            <nuxt-link to="/cloudcenter/enterprise" class="menu-item">企业管理</nuxt-link>
          </li>
        </ul>
      </div>
    </nav>
  </header>
</template>
<script>
  export default {
    name: 'cloudHeader',
    data () {
      return {}
    },
    computed: {
//      user () {
//        return this.$store.state.option.user
//      },
//      enterprise () {
//        let ens = this.user.data.enterprises
//        if (ens && ens.length) {
//          return ens.find(item => item.current) || {enName: '个人账户'}
//        } else {
//          return {enName: '个人账户'}
//        }
//      },
//      sortEnterprises () {
//        let ens = this.user.data.enterprises
//        if (ens && ens.length) {
//          ens.sort(function (a, b) {
//            return b.lastLoginTime - a.lastLoginTime
//          })
//        }
//        return ens
//      },
//      url () {
//        return this.$store.state.option.url
//      }
    },
    methods: {
//      logout () {
//        this.$http.get('/logout/crossBefore').then(response => {
//          if (response.data) {
//            window.location.href = response.data.logoutUrl + '&baseUrl=' + encodeURIComponent(window.location.protocol + '//' + window.location.host + response.data.baseUrl)
//          }
//        })
//      },
//      onLoginClick () {
//        this.$http.get('/login/page', {params: {returnUrl: window.location.href}}).then(response => {
//          if (response.data) {
//            window.location.href = response.data.content + '&baseUrl=' + encodeURIComponent(window.location.protocol + '//' + window.location.host + response.data.baseUrl)
//          }
//        })
//      },
//      onRegisterClick () {
//        this.$http.get('/register/page').then(response => {
//          if (response.data) {
//            window.location.href = response.data.content
//          }
//        })
//      },
//      // 切换当前企业
//      switchEnterprise (en) {
//        this.showEnterpriseToggle = false
//        this.$http.get(`/user/authentication/${en.uu}`).then(() => {
//          this.$store.dispatch('loadUserInfo')
//          window.location.href = '/'
//        })
//      },
//      toVendor: function () {
//        let isSelf = true
//        let tempEnterprise = {}
//        let ens = this.user.data.enterprises
//        if (ens && ens.length) {
//          ens.forEach(function (item) {
//            if (item.current) {
//              isSelf = false
//              tempEnterprise = item
//            }
//          })
//        } else {
//          isSelf = true
//        }
//        if (isSelf) {
//          window.location.href = '/register-saler'
//        } else {
//          if (tempEnterprise.isVendor === 313) {
//            window.location.href = '/vendor#/index'
//          } else {
//            window.location.href = '/register-saler'
//          }
//        }
//      }
    }
  }
</script>
<style lang="scss" scoped type="text/scss">
  @import '~assets/scss/mixins';
  @import '~assets/scss/variables';

  $nav-height: 60px;
  $nav-boxshadow: 2px 2px 5px rgba(0,0,0,.12);
  $nav-color: #3c3c3c;
  .navbar-slogan{
    font-size: 14px;
  }
  .f-nav{
    display:inline-block;
    margin-left:30px;
    padding-top:15px;
    li{
      margin-right:25px;
    }
  }
  .menu-item{
    font-size: 14px!important;
    color:#666!important;
  }
  .menu-item.nuxt-link-active, .menu-item:hover{
    color:#333!important;
    background: #eeeeee;
  }
  .header .navbar{
    min-height: inherit;
    border-radius: 0;
  }
  .header .navbar .navbar-container .navbar-right .dropdown .dropdown-menu li span,.header .navbar .navbar-container .navbar-right .dropdown .dropdown-menu li a{
    font-size: 12px;
  }
  .header .navbar .navbar-container .navbar-right .dropdown .dropdown-menu .menu-item a{
    width: 100%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 25px;
  }
  .header .navbar .navbar-container .navbar-right .dropdown .dropdown-menu .menu-item{
    height: 30px;
  }
  .dropdown-menu>li>a{
    padding: 0;
    line-height: 30px;
  }
  .dropdown-menu>li a:hover{
    background: none;
    text-decoration: underline !important;
  }
  .header {
    height: $nav-height;

  .navbar {
    width: 100%;
    height: 100%;
    font-size: $font-size-small;
    background-color: $black-light;
    box-shadow: $nav-boxshadow;
    -o-box-shadow: $nav-boxshadow;
    -moz-box-shadow: $nav-boxshadow;
    -webkit-box-shadow: $nav-boxshadow;

  .navbar-container {

  .item-wrap {
    display: inline-block;
  }

  .item {
    color: $nav-color;
    display: inline-block;
    height: $nav-height;
    line-height: $nav-height;
  }

  a {
    position: relative;
    color: $nav-color;
    font-weight: bold;
    font-size: 16px;
    > span:before{
        content: '';
        position: absolute;
        top: 5px;
        left: 16px;
        width: 1px;
        height: 14px;
        background: #bfbfbf;
      }
  }

  .navbar-header {
    float: left;

  .navbar-logo {
    margin-bottom: 2px;
  }

  .navbar-slogan {
    margin-left: $sm-pad;
  }

  }

  .navbar-right {
    float: right;

  .item {
    padding: 0 $pad;
  }

  .dropdown {
  .dropdown-toggle {
    line-height: $nav-height;
    border-left: 1px solid $black-light;
    border-right: 1px solid $black-light;
    height: 35px;
  a {
    margin-left: 15px;
    float: right;
  &:hover {
     color: $red !important;
   }
  }
  &:hover {
     border-left: 1px solid #999;
     border-right: 1px solid #999;
   }
  span {
    display: inline-block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: right;
  }
  }
  .menu-item-first {
    background: #eee;
    padding: 0 12px;
    line-height: 30px;
    font-size: 12px;
  >span:nth-child(1) {
     cursor: default;
     font-weight: bold;
   }
  input {
    width: 174px;
    height: 24px;
    margin-left: 35px;
    background: #fff;
    border: 1px solid #5078cb;
    padding-left: 4px;
  }
  .search-enterprise {
    display: inline-block;
    width: 36px;
    height: 24px;
    color: #fff;
    background: #5078cb;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
  }
  }

  .dropdown-menu {
    padding: 0 6px 13px;
    margin:0;
    border-radius: 0;
    right: unset;
    background: #fff;
    border: 1px solid #999999;
    border-top: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

  ::-webkit-scrollbar {
    background: #f6f6f6;
  }

  ul {
    max-height: 300px;
    overflow-y: auto;
    background: #f6f6f6;
  }

  .menu-item {
    padding: 0 12px;
  a {
    color: #333;
    max-width: 300px;
    line-height: 30px;
    width: auto;
  &:hover {
     color: #5078cb;
     text-decoration: none!important;
   }
  }
  }
  }

  &:hover {
     background-color: $white;

  .dropdown-toggle {
    color: $text;
  }
  a {
    color: $text
  }
  }
  }
  }
  }
  }
  }
</style>