usoft-town/components/default/header.vue

<template>
  <header class="header">
    <div class="container clearfix">
      <div class="nav-list pull-left">
        <a href="http://town.ubtob.com">
          <img src="/logo.png">
        </a>
        <nuxt-link to="/" exact>
          <span>首页</span>
        </nuxt-link>
        <nuxt-link to="/repairs">
          <span>园区服务</span>
        </nuxt-link>
        <a href="https://www.ubtob.com/saas/about"><span>信息化服务</span></a>
        <a href="http://uas.ubtob.com"><span>市场开拓</span></a>
        <a href="http://zb.uuzcc.com/" target="_blank"><span>众创空间</span></a>
        <a href="http://www.yitoa-fintech.com/" target="_blank"><span>金融服务</span></a>
        <a href="https://www.usoftmall.com" target="_blank"><span>电子商城</span></a>
        <a href="http://job.uuzcc.com/"><span>人才招聘</span></a>
        <nuxt-link to="/park"><span>园区介绍</span></nuxt-link>
        <nuxt-link to="/about"><span>联系我们</span></nuxt-link>
      </div>
      <div class="nav-right pull-right">
        <div class="nav-search">
          <i class="fa fa-search"/>
        </div>
        <template v-if="user != null && user.name">
          <div class="info">
            <i class="fa fa-user-circle"/>
            <span v-text="user.name"/>
            <ul class="list-unstyled">
              <li>个人中心</li>
              <li>消息中心</li>
              <li>订单中心</li>
              <li @click="logout()">安全退出</li>
            </ul>
          </div>
        </template>
        <template v-if="user == null || !user.name">
          <div class="info">
            <a @click="onLoginClick()">登录</a>&nbsp;/&nbsp;
            <a @click="onRegisterClick">注册</a>
          </div>
        </template>
      </div>
    </div>
  </header>
</template>

<script>
  export default {
    name: 'HeaderView',
    computed: {
      user () {
        return this.$store.state.option.user.data
      }
    },
    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)
          }
        })
        // TODO 待Account Center改版
      },
      onRegisterClick () {
        this.$http.get('/register/page').then(response => {
          if (response.data && response.data.content) {
            window.location.href = response.data.content + '&fromDomain=thxz'
            //  console.log(response.data.content + '&fromDomain=thxz')
          }
        })
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .header{
    position:fixed;
    top:0;
    left:0;
    z-index:100;
    height:70px;
    background: #122931;
    .nav-list{
      height:70px;
      a{
        &:first-child{
          margin-left:16px;
          margin-right:20px;
        }
        &.nuxt-link-active span{
          color:#149ccf;
          &:after{
            content:'';
            position:absolute;
            bottom:0;
            left:50%;
            display:block;
            height:5px;
            width:30px;
            margin-left:-15px;
            background: #149ccf;
          }
        }
      }
      span{
        position:relative;
        display:inline-block;
        height:70px;
        line-height: 70px;
        padding:0 15px;
        font-size: 14px;
        color:#dce1e9;
        &:hover{
          color:#149ccf;
          &:after{
            content:'';
            position:absolute;
            bottom:0;
            left:50%;
            display:block;
            height:5px;
            width:30px;
            margin-left:-15px;
            background: #149ccf;
          }
        }
      }
    }
    .nav-right{
      text-align: right;
      line-height:70px;
      .nav-search{
        display:inline-block;
        vertical-align: middle;
        i{
          display:block;
          padding:12px;
          font-size: 18px;
          background: #101f24;
          color:#dce1e9;
        }
      }
      .info{
        display:inline-block;
        vertical-align: top;
        position:relative;
        margin-left:20px;
        color:#dce1e9;
        ul{
          display:none;
          position:absolute;
          top: 100%;
          right:0;
          z-index:1000;
          background: #13252b;
          padding-bottom:20px;
          li{
            line-height: 40px;
            text-align: center;
            width:110px;
            color:#f5f5f5;
            &:hover{
              color:#149ccf;
            }
          }
        }
        &:hover{
          background: #142e37;
          cursor:pointer;
          i{
            color:#149ccf;
          }
          span{
            color:#149ccf;
          }
          ul{
            display:block;
          }
        }
        >i{
          position:relative;
          top:1px;
          left:-5px;
          font-size: 16px;
          color:#f5f5f5;
        }
        >span{
          display:inline-block;
          vertical-align: top;
          text-align: left;
          width:80px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space:nowrap;
          font-size: 14px;
          color:#f5f5f5;
        }
        a{
          color:#dce1e9;
          text-decoration: none;
          &:hover{
            color:#149ccf;
            cursor:pointer;
          }
        }
      }
    }
  }
</style>