adm-frontend/src/components/frame/pageRight.vue

<template>
  <div id="pageRight">
    <div class="headerContainer">
      <div class="projectContainer">
        <el-select
          v-model="selectProject"
          value-key="id"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in projects"
            :key="item.id"
            :label="item.name"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <div class="userContainer">
        <el-popover trigger="hover" popper-class="el-user-popover">
          <div class="userPropExit" @click="loginOut">
            <i class="el-icon-switch-button"></i>
            <span class="user-pro-oper">退出登录</span>
          </div>
          <div class="userPropLine"></div>
          <div class="userPropUpPass">
            <i class="el-icon-unlock"></i>
            <span class="user-pro-oper">修改密码</span>
          </div>

          <div class="userInfo" slot="reference">
            <span v-text="user.name"></span>
            <i class="el-icon-fa-user fa fa-user"></i>
          </div>
        </el-popover>
      </div>
    </div>
    <div class="breadcContainer">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          v-for="bread in breadcrumbs"
          :to="bread.to"
          :key="bread.to"
          v-text="bread.label"
        ></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="contentContainer">
      <router-view class="page-content"></router-view>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { sessionStore } from "@/store/sessionStore";
import { logicConfig } from '@/logicConfig'
export default {
  props: [],
  data() {
    return {};
  },
  computed: {
    ...mapState(["breadcrumbs", "projects", "user"]),
    selectProject: {
      set(value) {
        this.$store.commit("updateSelectProject", value);
      },
      get() {
        return this.$store.state.selectProject;
      },
    },
  },
  methods: {
    //注销
    loginOut: function () {
      this.$store.commit("loginOut");
      sessionStore.loginOut();
      this.$router.replace({ path:  logicConfig.routerNameConfig.loginRouteName });
    },
  },
  created() {},
  watch: {},
  mounted() {},
  components: {},
};
</script>

<style scoped>
#pageRight {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.breadcContainer {
  height: 31px;
  border-bottom: 1px solid #333;
  margin: 0 10px 10px 10px;
}

.contentContainer {
  flex: 1;
  margin: 0 10px 10px 10px;
}

.headerContainer {
  height: 50px;
  background: #2b3643;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.projectContainer {
  flex: 1;
}

.userContainer {
  flex: 1;
}

.userInfo {
  float: right;
  margin-right: 20px;
  font-size: 18px;
  color: #409eff;
  cursor: pointer;
}

.el-icon-fa-user {
  font-family: FontAwesome !important;
  margin-left: 4px;
}

.user-pro-oper {
  margin-left: 4px;
}

.userPropExit {
  margin: 4px 8px 0px 8px;
  cursor: pointer;
}
.userPropUpPass {
  margin: 0px 8px;
  cursor: pointer;
}

.userPropLine {
  border-bottom: solid 1px #c0c4cc;
}
</style>