xt_vue/src/views/layout/components/Navbar.vue

<template>
  <div class="top-nav">
    <div class="nav-logo">
      <img :src="require(`../../../assets/logo/logo.png`)" alt="">
    </div>
    <el-menu class="navbar" mode="horizontal">
      <div>
        <!--<el-dropdown trigger="click" style="color:#fff;">-->
        <!--<span class="el-dropdown-link">-->
          <!--南山市人民医院<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
        <!--</span>-->
          <!--&lt;!&ndash;<el-dropdown-menu slot="dropdown" style="margin-top:21px;">&ndash;&gt;-->
            <!--&lt;!&ndash;<el-dropdown-item>深圳市人民医院</el-dropdown-item>&ndash;&gt;-->
            <!--&lt;!&ndash;<el-dropdown-item>长沙是透析中心</el-dropdown-item>&ndash;&gt;-->
            <!--&lt;!&ndash;<el-dropdown-item>东莞血液透析中心</el-dropdown-item>&ndash;&gt;-->
            <!--&lt;!&ndash;<el-dropdown-item>东莞血液透析中心</el-dropdown-item>&ndash;&gt;-->
            <!--&lt;!&ndash;<el-dropdown-item>东莞血液透析中心</el-dropdown-item>&ndash;&gt;-->
          <!--&lt;!&ndash;</el-dropdown-menu>&ndash;&gt;-->
        <!--</el-dropdown>-->
      </div>
      <div class="system-nav">
        <div class="system-nav-menu">
          <!--<a  href="http://jk.kuyicloud.com/">-->
          <a href="http://test1.sgjyun.com/">
            <span><i class="iconfont icon-pengyou"></i> SCRM</span>
          </a>
        </div>
        <div class="system-nav-menu">
          <!--<a href="http://mall.kuyicloud.com/">-->
          <a href="http://mall.test.sgjyun.com/">
            <span><i class="icon iconfont icon-service_fill"></i> 微商城</span>
          </a>
        </div>
        <div class="system-nav-menu active">
          <a>
            <span><i class="icon iconfont icon-jiankangshuidi"></i> 血透管理</span>
          </a>
        </div>
        <div class="system-nav-menu">
          <!--<a href="http://cdm.kuyicloud.com/">-->
          <a href=" http://cdm.test.sgjyun.com/">
            <span><i class="icon iconfont icon-manbing-xuanzhong"></i> 慢病管理</span>
          </a>
        </div>

        <div class="system-nav-menu">
          <!--<a href="http://sso.kuyicloud.com/org/app/create">-->
          <a href="http://testsso.sgjyun.com/org/app/create">
            <span><i class="icon iconfont icon-suoyou"></i> 应用</span>
          </a>
        </div>
      </div>

      <div class="right-menu">
        <el-dropdown class="avatar-container right-menu-item" trigger="click">
          <div class="avatar-wrapper">
            <img class="user-avatar" :src="avater">
            <span class="user-title">{{ this.$store.getters.xt_user.user.user_name }}</span>
            <i class="el-icon-caret-bottom"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <span @click="modifyUserInfoAction">修改个人信息</span>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <span @click="myServe">我的服务</span>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <span @click="logout" style="display:block;">{{$t('navbar.logOut')}}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <!-- <screenfull class="screenfull right-menu-item"></screenfull> -->
        <modify-user-info-dialog ref="modify_user_info_dialog"></modify-user-info-dialog>

      </div>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
// import Breadcrumb from "@/components/Breadcrumb";
// import Hamburger from "@/components/Hamburger";
import Screenfull from "@/components/Screenfull";
import ModifyUserInfoDialog from "@/xt_pages/home/modify_user_info_dialog";

export default {
  components: {
    // Breadcrumb,
    // Hamburger,
    Screenfull,
    ModifyUserInfoDialog
  },
  computed: {
    ...mapGetters(["sidebar"]),
    avater: function() {
      var avatar = this.$store.getters.xt_user.user.avatar;
      return avatar.length > 0
        ? avatar
        : require("../../../assets/home/userData.png");
    }
  },
  methods: {
    // toggleSideBar() {
    //   this.$store.dispatch("toggleSideBar");
    // },
    logout() {
      this.$store.dispatch("FrontendLogout");
      window.location.href = process.env.BASE_API + "/logout";
    },
    modifyUserInfoAction() {
      this.$refs.modify_user_info_dialog.show();
    },
    myServe() {
      this.$router.push("/service");
      return false;
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.top-nav {
  background: #409eff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  .nav-logo {
    width: 162px;
    display: flex;
    align-items: center;
    height: 60px;
    text-align: center;
    justify-content: center;
    padding: 10px 0;
    box-sizing: border-box;
    float: left;

    img {
      display: inline-block;
      width: 100px;
    }
  }
  .navbar {
    border-radius: 0px !important;
    display: flex;
    justify-content: space-between;
    width: calc(100% - 180px);
    align-items: center;
    color: #fff;
    border: none;
    background: #409eff;
    float: left;

    .breadcrumb-container {
      float: left;
    }

    .errLog-container {
      display: inline-block;
      vertical-align: top;
    }

    .right-menu {
      float: right;
      height: 100%;
      z-index: 99999;
      &:focus {
        outline: none;
      }

      .right-menu-item {
        display: inline-block;
        margin: 0 8px;

        .iconfont {
          font-size: 18px;
        }
      }
      .screenfull {
        height: 20px;
      }

      .international {
        vertical-align: top;
      }

      .theme-switch {
        vertical-align: 15px;
      }

      .avatar-container {
        margin-right: 10px;

        .avatar-wrapper {
          cursor: pointer;
          margin-top: 3px;
          display: flex;
          align-items: center;
          justify-content: center;

          .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            object-position: center;
          }

          .user-title {
            margin: 0 8px;
            font-size: 14px;
            color: #fff;
          }

          .el-icon-caret-bottom {
            font-size: 12px;
            color: #fff;
          }
        }
      }
    }
  }
  .system-nav {
    .system-nav-menu {
      float: left;
      height: 60px;
      line-height: 60px;
      padding: 0 25px;

      a {
        font-size: 15px;

        .iconfont {
          font-size: 18px;
        }
      }
    }
    .active {
      background: #3090eb;
      border-left: 1px #5fabf7 solid;
      border-right: 1px #5fabf7 solid;
    }
  }
  .el-menu::after,
  .el-menu::before {
    width: 1px;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.el-dropdown-menu{
  z-index: 9999!important;
}
.v-modal{
  z-index: 9999!important;  
}
</style>