crowd-test-service-frontend/src/components/commons/Header.vue

<template>
  <nav class="navbar" v-loading.fullscreen.lock="fullScreenLoading">
    <div class="container" style="min-width: 1100px">
      <!--<div class="navbar-translate" style="text-align: center;vertical-align: middle;">-->
      <!--<span>-->
      <!--<a href="javascript:;">-->
      <!--<img :src="defaultValue.image" style="height: 50px;object-fit: contain;" >-->
      <!--</a>-->
      <!--</span>-->
      <!--<span  style="margin-bottom: 20px"><a style="font-size: 25px">众测</a></span>-->
      <!--<button-->
      <!--type="button"-->
      <!--data-toggle="collapse"-->
      <!--aria-expanded="false"-->
      <!--aria-label="Toggle navigation"-->
      <!--@click="openNavBarFunc"-->
      <!--v-bind:class="['navbar-toggler',{ 'open-fixed': openNavBar}]"-->
      <!--&gt;-->
      <!--<span class="navbar-toggler-icon"></span>-->
      <!--<span class="navbar-toggler-icon"></span>-->
      <!--<span class="navbar-toggler-icon"></span>-->
      <!--</button>-->
      <!--</div>-->
      <div>
        <ul class="navbar-nav ml-auto">
          <li class="dropdown nav-item">
            <router-link to="/home">
              <a data-toggle="dropdown">
                <img style="height: 50px;padding-top: 10px" :src="defaultValue.image">
              </a>
            </router-link>
          </li>
          <li class="dropdown nav-item">
            <router-link to="/home">
              <a class="dropdown-toggle nav-link" data-toggle="dropdown">
                <span style="font-size: 20px">群智众测平台</span>
              </a>
            </router-link>
          </li>
        </ul>
      </div>
      <div style="margin-left: 0; flex: auto">
        <ul class="navbar-nav ml-auto">

          <li class="dropdown nav-item">
            <router-link to="/home">
              <a class="dropdown-toggle nav-link" data-toggle="dropdown">
                <img class="icon" src="@/assets/img/home_icon.svg">
                <span>首页</span>
              </a>
            </router-link>
          </li>
          <li class="dropdown nav-item">
            <router-link to="/square">
              <a class="dropdown-toggle nav-link" data-toggle="dropdown">
                <img class="icon" src="@/assets/img/square_icon.svg">
                <span>任务广场</span>
              </a>
            </router-link>
          </li>

        </ul>
      </div>
      <div>
        <ul class="navbar-nav ml-auto">

          <li class="dropdown nav-item">
            <router-link v-if="isLogin" to="/mine">
              <a class="dropdown-toggle nav-link" data-toggle="dropdown">
                <img class="icon" src="@/assets/img/mine_icon.svg">
                <span>我的众测</span>
              </a>
            </router-link>
            <a v-if="!isLogin" class="dropdown-toggle nav-link" data-toggle="dropdown"
               href="http://user.mooctest.net:8081/page/login?redirect=http%3a%2f%2fcrowd.mooctest.net%2f%23%2fmine">
              <img class="icon" src="@/assets/img/mine_icon.svg">
              <span>登录</span>
            </a>
            <div class="dropdown-menu dropdown-with-icons">
              <a href="./sections.html#headers" class="dropdown-item">
                <i class="material-icons"></i> Headers
              </a>
              <a href="./sections.html#features" class="dropdown-item">
                <i class="material-icons"></i> Features
              </a>
            </div>
          </li>
          <li class="dropdown nav-item" style="margin-left: 50px">
            <router-link v-if="isLogin" to="/mine">
              <a data-toggle="dropdown">
                <img class="user-img" :src="defaultValue.image">
              </a>
            </router-link>
          </li>
          <el-dropdown v-if="isLogin">
            <span class="dropdown-toggle nav-link el-dropdown-link">{{user.userVO.name}}<i
              class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="rolesPermissions.isSystemAdministrator">
                <router-link :to="{ name: 'AuthenticationManage'}">
                  <el-link icon="el-icon-view" :underline="false">
                    审核认证信息
                  </el-link>
                </router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link :to="{ name: 'AuthenticationIndex'}">
                  <el-link type="info" icon="el-icon-warning-outline" :underline="false">
                    未实名认证
                  </el-link>
                </router-link>
              </el-dropdown-item>
              <el-dropdown-item @click.native="handleClickAuthChecking()">
                <el-link type="warning" icon="el-icon-loading" :underline="false">
                  认证审核中
                </el-link>
              </el-dropdown-item>
              <el-dropdown-item @click.native="handleClickAuthPass()">
                <el-link type="primary" icon="el-icon-check" :underline="false">
                  已认证
                </el-link>
              </el-dropdown-item>
              <el-dropdown-item @click.native="handleClickAuthReject()">
                <el-link type="danger" icon="el-icon-close" :underline="false">
                  认证失败
                </el-link>
              </el-dropdown-item>
              <el-dropdown-item divided @click.native="userLogout()">登出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dialog title="认证信息审核中" :visible.sync="isShowAuthCheckingDialog" width="40%"
                     :before-close="hideAuthCheckingDialog" center>
            <span>
              <el-card v-if="authInfo.type" class="box-card">
                <div slot="header" class="clearfix">
                  <span>认证信息</span>
                </div>
                <div class="text item">
                  <ul v-if="authInfo.type=='个人'" style="list-style-type:none">
                    <li>认证类型：{{authInfo.type}}认证</li>
                    <li>认证姓名：{{authInfo.realName}}</li>
                    <li>认证账户：{{authInfo.bankAccount}}</li>
                    <li>认证地址：{{authInfo.address}}</li>
                    <li>申请时间：{{authInfo.createTime}}</li>
                    <li>认证状态：{{authInfo.status}}</li>
                    <li>失败原因：{{authInfo.rejectReason}}</li>
                  </ul>

                  <ul v-if="authInfo.type=='机构'" style="list-style-type:none">
                    <li>认证类型：{{authInfo.type}}认证</li>
                    <li>认证姓名:{{authInfo.evaluationAgencyName}}</li>
                    <li>认证账户:{{authInfo.bankAccount}}</li>
                    <li>认证地址:{{authInfo.address}}</li>
                    <li>申请时间:{{authInfo.createTime}}</li>
                    <li>认证状态:{{authInfo.status}}</li>
                    <li>失败原因：{{authInfo.rejectReason}}</li>
                  </ul>

                  <ul v-if="authInfo.type=='企业'" style="list-style-type:none">
                    <li>认证类型：{{authInfo.type}}认证</li>
                    <li>认证企业名称:{{authInfo.companyName}}</li>
                    <li>认证法人姓名:{{authInfo.legalPersonName}}</li>
                    <li>认证账户:{{authInfo.bankAccount}}</li>
                    <li>统一信用代码:{{authInfo.unifiedSocialCreditCode}}</li>
                    <li>认证地址:{{authInfo.address}}</li>
                    <li>申请时间:{{authInfo.createTime}}</li>
                    <li>认证状态:{{authInfo.status}}</li>
                    <li>失败原因：{{authInfo.rejectReason}}</li>
                  </ul>
                </div>
              </el-card>
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button size="mini" @click="hideAuthCheckingDialog">返回</el-button>
              <el-button size="mini" type="danger" @click="deleteOldAuthInfo">放弃认证</el-button>
              <el-button size="mini" type="primary" @click="handleUpdateAuthInfo">重新认证</el-button>
            </span>
          </el-dialog>
          <el-dialog title="认证成功" :visible.sync="isShowAuthPassDialog" width="40%" :before-close="hideAuthPassDialog"
                     center>
            <span>
              <el-card v-if="authInfo.type" class="box-card">
                <div slot="header" class="clearfix">
                  <span>认证信息</span>
                </div>
                <div class="text item">
                  <ul v-if="authInfo.type=='个人'" style="list-style-type:none">
                    <li>认证类型：{{authInfo.type}}认证</li>
                    <li>认证姓名：{{authInfo.realName}}</li>
                    <li>认证账户：{{authInfo.bankAccount}}</li>
                    <li>认证地址：{{authInfo.address}}</li>
                    <li>申请时间：{{authInfo.createTime}}</li>
                    <li>认证状态：{{authInfo.status}}</li>
                    <li>失败原因：{{authInfo.rejectReason}}</li>
                  </ul>

                  <ul v-if="authInfo.type=='机构'" style="list-style-type:none">
                    <li>认证类型：{{authInfo.type}}认证</li>
                    <li>认证姓名:{{authInfo.evaluationAgencyName}}</li>
                    <li>认证账户:{{authInfo.bankAccount}}</li>
                    <li>认证地址:{{authInfo.address}}</li>
                    <li>申请时间:{{authInfo.createTime}}</li>
                    <li>认证状态:{{authInfo.status}}</li>
                    <li>失败原因：{{authInfo.rejectReason}}</li>
                  </ul>

                  <ul v-if="authInfo.type=='企业'" style="list-style-type:none">
                    <li>认证类型：{{authInfo.type}}认证</li>
                    <li>认证企业名称:{{authInfo.companyName}}</li>
                    <li>认证法人姓名:{{authInfo.legalPersonName}}</li>
                    <li>认证账户:{{authInfo.bankAccount}}</li>
                    <li>统一信用代码:{{authInfo.unifiedSocialCreditCode}}</li>
                    <li>认证地址:{{authInfo.address}}</li>
                    <li>申请时间:{{authInfo.createTime}}</li>
                    <li>认证状态:{{authInfo.status}}</li>
                    <li>失败原因：{{authInfo.rejectReason}}</li>
                  </ul>
                </div>
              </el-card>
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button size="mini" @click="hideAuthPassDialog">返回</el-button>
            </span>
          </el-dialog>
          <el-dialog title="认证失败" :visible.sync="isShowAuthRejectDialog" width="40%"
                     :before-close="hideAuthRejectDialog"
                     center>
            <span>
              <el-card v-if="authInfo.type" class="box-card">
                <div slot="header" class="clearfix">
                  <span>认证信息</span>
                </div>
                <div class="text item">
                  <ul v-if="authInfo.type=='个人'" style="list-style-type:none">
                    <li>认证类型：{{authInfo.type}}认证</li>
                    <li>认证姓名：{{authInfo.realName}}</li>
                    <li>认证账户：{{authInfo.bankAccount}}</li>
                    <li>认证地址：{{authInfo.address}}</li>
                    <li>申请时间：{{authInfo.createTime}}</li>
                    <li>认证状态：{{authInfo.status}}</li>
                    <li>失败原因：{{authInfo.rejectReason}}</li>
                  </ul>

                  <ul v-if="authInfo.type=='机构'" style="list-style-type:none">
                    <li>认证类型：{{authInfo.type}}认证</li>
                    <li>认证姓名:{{authInfo.evaluationAgencyName}}</li>
                    <li>认证账户:{{authInfo.bankAccount}}</li>
                    <li>认证地址:{{authInfo.address}}</li>
                    <li>申请时间:{{authInfo.createTime}}</li>
                    <li>认证状态:{{authInfo.status}}</li>
                    <li>失败原因：{{authInfo.rejectReason}}</li>
                  </ul>

                  <ul v-if="authInfo.type=='企业'" style="list-style-type:none">
                    <li>认证类型：{{authInfo.type}}认证</li>
                    <li>认证企业名称:{{authInfo.companyName}}</li>
                    <li>认证法人姓名:{{authInfo.legalPersonName}}</li>
                    <li>认证账户:{{authInfo.bankAccount}}</li>
                    <li>统一信用代码:{{authInfo.unifiedSocialCreditCode}}</li>
                    <li>认证地址:{{authInfo.address}}</li>
                    <li>申请时间:{{authInfo.createTime}}</li>
                    <li>认证状态:{{authInfo.status}}</li>
                    <li>失败原因：{{authInfo.rejectReason}}</li>
                  </ul>
                </div>
              </el-card>
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button size="mini" @click="hideAuthRejectDialog">返回</el-button>
              <el-button size="mini" type="danger" @click="deleteOldAuthInfo">放弃认证</el-button>
              <el-button size="mini" type="primary" @click="handleUpdateAuthInfo">修改认证信息</el-button>
            </span>
          </el-dialog>
          <!--<li class="dropdown nav-item">-->
          <!--<router-link v-if="isLogin" to="/mine">-->
          <!--<a class="dropdown-toggle nav-link" data-toggle="dropdown">-->
          <!--<span>{{user.userVO.name}}</span>-->
          <!--</a>-->
          <!--</router-link>-->
          <!--</li>-->
          <!--<li class="dropdown nav-item">-->
          <!--<router-link v-if="isLogin" to="/mine">-->
          <!--<div style="margin-top: 5px;margin-right: 20px">-->
          <!--<el-tooltip class="item" effect="dark" content="认证成功" placement="bottom">-->
          <!--<el-link type="info" disabled icon="el-icon-warning-outline">已认证</el-link>-->
          <!--</el-tooltip>-->
          <!--</div>-->
          <!--</router-link>-->
          <!--</li>-->
          <!--<li class="dropdown nav-item">-->
          <!--<router-link v-if="isLogin" to="/mine">-->
          <!--<div style="margin-top: 5px;margin-right: 20px">-->
          <!--<el-tooltip class="item" effect="dark" content="点击进行认证" placement="bottom">-->
          <!--<el-link type="danger" icon="el-icon-warning-outline">未实名认证</el-link>-->
          <!--</el-tooltip>-->
          <!--</div>-->
          <!--</router-link>-->
          <!--</li>-->
          <!--<li>-->
          <!--<a v-if="isLogin" class="dropdown-toggle nav-link" data-toggle="dropdown" href="#" @click="userLogout()">-->
          <!--<span>登出</span>-->
          <!--</a>-->
          <!--</li>-->
        </ul>
      </div>
    </div>

  </nav>
</template>

<script>
import {
  defaultValue,
  deleteAuthInfo,
  getCurrentAuthenInfo,
  getCurrentUser,
  getRolesPermissions,
  logout,
  storageGet,
  storageSave
} from '@/js/index'
import {notify} from '@/constants/index'

export default {
  name: 'header-container',
  data () {
    return {
      user: {},
      fullScreenLoading: true,
      authInfo: {},
      isShowAuthCheckingDialog: false,
      isShowAuthRejectDialog: false,
      isShowAuthPassDialog: false,
      //loading: true,
      openNavBar: false,
      defaultValue: defaultValue,
      userIdentity: '',
      isLogin: false,
      rolesPermissions: {}
    }
  },
  mounted () {
    this.$nextTick(() => {

    })
  },
  methods: {
    openNavBarFunc () {
      this.openNavBar = !this.openNavBar
    },
    setCurrUserByHttp () {
      // getCurrentUser().then((res) => {
      //   console.log(res)
      //   storageSave('user', res)
      //   storageSave('rolesPermissions', getRolesPermissions(res.roleList))
      //   this.isLogin = true
      //   this.fullScreenLoading = false
      // }).catch(error => {
      //   this.fullScreenLoading = false
      //   console.log(error)
      //   if (error.status == 401) {
      //     notify('warning', error.data)
      //   } else {
      //     notify('error', error.data)
      //   }
      // })
    },
    setUserInfo () {
      // storageGet('user').then((res)=>{
      //   if (res == null){
      //     this.setCurrUserByHttp()
      //   }else{
      //     this.fullScreenLoading = false
      //     this.isLogin = true
      //   }
      // }).catch((error)=>{
      //   this.setCurrUserByHttp()
      // })
      if (storageGet('user') == null) {
        storageSave('rolesPermissions', {
          'isRegionManager': false,
          'isIndividualUser': false,
          'isEnterpriseUser': false,
          'isAgency': false,
          'isSystemAdministrator': false
        })
        console.log('本地没有用户信息,开始加载用户信息')
        getCurrentUser().then((res) => {
          console.log(res)
          storageSave('user', res)
          this.user = res
          this.rolesPermissions = getRolesPermissions(res.roleList)
          storageSave('rolesPermissions', getRolesPermissions(res.roleList))
          console.log('用户信息加载成功')
          this.isLogin = true
          this.fullScreenLoading = false
        }).catch(error => {
          console.log('用户信息加载失败')
          this.fullScreenLoading = false
          // if (error.status == 401) {
          //   notify('warning', error.data)
          // } else {
          //   notify('error', error.data)
          // }
        })
      } else {
        this.user = storageGet('user')
        this.fullScreenLoading = false
        this.isLogin = true
      }
    },
    userLogout () {
      console.log('ee')
      this.isLogin = false
      logout().then((res) => {
        this.$router.push({
          name: 'Index',
        })
      })

    },
    showLoading () {
      this.fullScreenLoading = true
    },
    hideLoading () {
      this.fullScreenLoading = false
    },
    handleClickAuthReject () {
      this.getAuthInfo(this.showAuthRejectDialog)
    },
    handleClickAuthPass () {
      this.getAuthInfo(this.showAuthPassDialog)
    },
    handleClickAuthChecking () {
      this.getAuthInfo(this.showAuthCheckingDialog)
    },
    showAuthRejectDialog () {
      this.isShowAuthRejectDialog = true
    },
    showAuthPassDialog () {
      this.isShowAuthPassDialog = true
    },
    showAuthCheckingDialog () {
      this.isShowAuthCheckingDialog = true
    },
    hideAuthRejectDialog () {
      this.isShowAuthRejectDialog = false
    },
    hideAuthPassDialog () {
      this.isShowAuthPassDialog = false
    },
    hideAuthCheckingDialog () {
      this.isShowAuthCheckingDialog = false
    },
    deleteOldAuthInfo () {
      this.hideAuthCheckingDialog()
      this.hideAuthRejectDialog()
      this.hideAuthPassDialog()
      this.showLoading()
      deleteAuthInfo().then((res) => {
        this.hideLoading()
        notify('success', '成功删除认证信息')
      }).catch((error) => {
        this.hideLoading()
        notify('error', '删除认证信息失败:' + error.data)
      })
    },
    getAuthInfo (successMethod) {
      this.showLoading()
      getCurrentAuthenInfo().then((res) => {
        console.log(res)
        this.authInfo = res
        this.hideLoading()
        successMethod()
      }).catch((error) => {
        this.hideLoading()
        notify('error', '加载用户认证信息失败：' + error.data)
      })
    },
    handleUpdateAuthInfo () {
      this.hideAuthPassDialog()
      this.hideAuthRejectDialog()
      this.hideAuthCheckingDialog()
      if (this.authInfo.type == '个人') {
        this.$router.push({
          name: 'IndividualAuthentication',
          params: {
            userId: this.authInfo.userId
          }
        })
      }
      if (this.authInfo.type == '企业') {
        this.$router.push({
          name: 'EnterpriseAuthentication',
          params: {
            userId: this.authInfo.userId
          }
        })
      }
      if (this.authInfo.type == '机构') {
        this.$router.push({
          name: 'AgencyAuthentication',
          params: {
            userId: this.authInfo.userId
          }
        })
      }
    }
  },
  created () {
  },
  beforeMount () {
    this.setUserInfo()
    // if (storageGet('user' != null)){
    //   this.isLogin = true
    // }
    console.log(this.isLogin)
  }
}
</script>

<style lang="less" scoped>

  .open-fixed {
    position: fixed;
    right: 5px;
    z-index: 1033;
  }

  .navbar {
    background-color: #fff !important;
    box-shadow: none;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #000;
    transition: all 0.15s ease 0s;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  @media (max-width: 991px) {
    [class*="navbar-expand-"] > .container {
      padding-left: 15px;
      padding-right: 15px;
    }
  }

  .navbar > .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    flex: 1;
  }

  .navbar .navbar-brand {
    position: relative;
    color: inherit;
    font-size: 1.8rem;
    line-height: 30px;
    padding: 10px 0;
    margin-right: 1rem;
    display: inline-block;
    white-space: nowrap;
  }

  @media (max-width: 991px) {
    .navbar .navbar-translate {
      width: 100%;
      position: relative;
      display: flex;
      -ms-flex-pack: justify !important;
      justify-content: space-between !important;
      -ms-flex-align: center;
      align-items: center;
      transition: transform 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    }
  }

  .navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
  }

  @media (max-width: 991px) {
    .navbar-collapse {
      position: fixed;
      display: block;
      top: 0;
      height: 100vh;
      width: 230px;
      right: 0;
      margin-right: 0 !important;
      z-index: 1032;
      visibility: visible;
      background-color: #fff;
      overflow-y: visible;
      border-top: none;
      text-align: left;
      padding-right: 0;
      padding-left: 0;
      max-height: none !important;
      -webkit-transform: translate3d(230px, 0, 0);
      transform: translate3d(230px, 0, 0);
      transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    }
  }

  @media (min-width: 992px) {
    .navbar-collapse {
      display: flex !important;
      flex-basis: auto;
    }
  }

  [type="reset"],
  [type="submit"],
  button,
  html [type="button"] {
    -webkit-appearance: button;
  }

  .navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    outline: none;
  }

  .navbar-toggler:not(:disabled):not(.disabled) {
    cursor: pointer;
  }

  @media (min-width: 992px) {
    .navbar-toggler {
      display: none;
    }
  }

  @media (max-width: 991px) {
    .navbar.navbar-transparent .navbar-toggler .navbar-toggler-icon {
      background-color: #fff;
    }
  }

  .navbar .navbar-toggler .navbar-toggler-icon + .navbar-toggler-icon {
    margin-top: 4px;
  }

  .navbar .navbar-toggler .navbar-toggler-icon {
    width: 22px;
    height: 2px;
    vertical-align: middle;
    outline: 0;
    display: block;
    border-radius: 1px;
  }

  .navbar .navbar-toggler .navbar-toggler-icon {
    background-color: #555;
  }

  .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    content: "";
    background: no-repeat 50%;
    background-size: 100% 100%;
  }

  .navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    text-align: center;
  }

  @media (min-width: 991px) {
    .navbar .navbar-nav {
      align-items: center;
    }
  }

  @media (min-width: 992px) {
    .navbar-nav {
      flex-direction: row;
    }
  }

  @media (max-width: 991px) {
    .navbar-nav {
      margin-top: 70px;
      text-align: right;
    }
  }

  .ml-auto,
  .mx-auto {
    margin-left: auto !important;
  }

  .collapsing,
  .dropdown,
  .dropup {
    position: relative;
  }

  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
    display: none;
    padding: 0.3125rem 0;
    border: 0;
    opacity: 0;
    transform: scale(0);
    transform-origin: 0 0;
    will-change: transform, opacity;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  }

  .navbar-nav .dropdown-menu {
    float: none;
  }

  @media (min-width: 992px) {
    .navbar-nav .dropdown-menu {
      position: absolute;
    }
  }

  @media (min-width: 992px) {
    .navbar-nav .nav-link {
      padding-right: 0.5rem;
      padding-left: 0.5rem;
    }
  }

  .navbar .navbar-nav .nav-item .nav-link {
    padding: 15px;
    // text-align: center;
    height: 20px;
    vertical-align: middle;
    color: inherit;
    display: block;
  }

  .nav-link > span {
    /* font-size: 1.2rem; */
    height: 100%;
    vertical-align: middle;
    display: inline-block;
    line-height: 20px;
  }
</style>