foton-laws-system-front/src/components/personalCenter/index.vue

<template>
  <div class="header">
    <div style="background-color: #0068B7; height: 65px; width: 100%;">
      <div class="header-left">
        <div class="logo">
          <img src="@/assets/images/shangqi/img/logo2.png" style="height: 61px; width: 160px;" />
        </div>
      </div>
          <span style="color: #fff; line-height: 65px; float: left; font-size: 20px; font-weight: 600;">
            标准法规管理系统  Standard and Regulation Management System
          </span>
      <!-- header头部 右侧内容 当前登录人和退出-->
<!--      <div class="header-right" style="display: inline-block; float: right; margin-right: 20px; color: #fff">-->
<!--        <div>-->
<!--          <el-dropdown-->
<!--                  trigger="click"-->
<!--                  @command="handleCommand"-->
<!--          >-->
<!--            <div>-->
<!--              <img :src="userAvator" v-if="$store.getters.userInfo.avator">-->
<!--              <span class="iconfont" v-else style="color: #FFFFFF;">&#xe69b;</span>-->
<!--              <span style="color: #FFFFFF;">{{ $store.getters.userInfo.uName }}</span>-->
<!--              <i style="color: #FFFFFF;" class="el-icon-arrow-down"/>-->
<!--            </div>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              <el-dropdown-item command="loginOut">退出</el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->
<!--        </div>-->
<!--      </div>-->
    </div>
<!--    <div class="header-left">-->
<!--      <span class="logo" @click="toHome" title="回到首页"></span>-->
<!--    </div>-->
<!--    <div class="header-center">-->
<!--        <span style="color: #fff; line-height: 65px; font-size: 20px;">-->
<!--            标准法规管理系统  standard and regulations management system-->
<!--          </span>-->
<!--    </div>-->
<!--    <div class="header-right">-->
<!--      <span class="date">{{ currentTime }}</span>-->
<!--      <span class="divide-line"> | </span>-->
<!--      <span class="user-img"></span>-->
<!--      <span class="user">{{ $store.getters.userInfo.uName }}</span>-->
<!--      <div class="user-info-panel-setting" @click.prevent="userInfoVisible = !userInfoVisible">-->
<!--        <el-dropdown-->
<!--          trigger="click"-->
<!--          :visible="userInfoVisible"-->
<!--          @command="userInfoOpen"-->
<!--        >-->
<!--          <div class="iconfont" style="color: #fff;"><i class="el-icon-arrow-down"></i></div>-->
<!--          <el-dropdown-menu slot="dropdown">-->
<!--            <el-dropdown-item name="logout" command="logout">{{ $t("m.exit") }}</el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
<!--        </el-dropdown>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";

export default {
  name: "useImg",
  data() {
    return {
      // 当前系统时间
      currentTime: "",
      userInfoVisible: false
    };
  },
  methods: {
    toHome() {
      this.$router.push("/home2");
    },
    // 获取当前时间
    getTime() {
      this.currentTime = this.$dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss");
    },
    // 用户菜单栏点击
    userInfoOpen(name) {
      switch (name) {
        case "personal":
          this.$router.push("/personal");
          break;
        case "logout":
          this.$confirm("您确认要退出吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            confirmButtonClass: "common-button-primary",
            roundButton: true
          }).then(() => {
            this.userLoginOut();
          }).catch(() => {
          });
          break;
      }
    },
    // 用户退出登录
    userLoginOut() {
      this.$http.get("logout", {}, {
        _this: this
      }, res => {
        this.$store.dispatch("logout");
        this.$router.push("/sign_in");
      }, e => {
      });
    },
    ...mapMutations(["setProcess", "setDynamicTotal"])
  },
  mounted() {
    this.getTime();
  },
  computed: {
    // 用户头像
    userAvator() {
      return this.$store.getters.userInfo.avator || require("@/assets/images/avator_default.png");
    },
    uName() {
      return this.$store.getters.userInfo.uName;
    },
    ...mapGetters(["getDynamicTotal", "getMenuList"])
  }
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  background-color: #171E4A;
  color: #fff;

  .header-left {
    float: left;
    .logo {
      padding: 4px 42px 10px 10px;
      text-align: left;
    }
  }
  .header-center{
    width: 70%;
    margin-left: 60px;
  }
  .header-right {
    width: 49%;
    text-align: right;
    line-height: 61px;
    height: 61px;
    display: flex;
    margin-right: 20px;
    justify-content: flex-end;
    align-items: center;

    .date {
      display: inline-block;
      margin-right: 20px;
    }

    .user-img {
      display: inline-block;
      width: 20px;
      height: 21px;
      background: url("~@/assets/images/shangqi/home/user-img.png") no-repeat;
      background-size: 100% 100%;
      margin-right: 15px;
    }

    .divide-line {
      display: inline-block;
      margin-right: 20px;
    }

    .user {
      display: inline-block;
    }
  }
}
</style>