JiangYunPhotosManage_WebApp/src/components/Header.vue

<template>
  <div class="header">
    <div class="left">
      <img class="first" src="../assets/three.png" alt="" />
      <div class="shu"></div>
      <img class="logo" src="../assets/white-logo.png" alt="" />
    </div>
    <div class="right">
      <img class="user-icon" src="../assets/user.png" alt="" />
      <div class="user">{{ userName }}</div>
      <div class="quit" @click="quit">[退出]</div>
    </div>
  </div>
</template>
<script>
import store from "../store";
import router from "../router";

export default {
  setup() {
    let userName = localStorage.staffName;
    function quit() {
      localStorage.clear();
      store.commit("changeLogin", false);
      router.push({ path: "/login" });
    }
    return {
      quit,
      userName,
    };
  },
};
</script>
<style scoped>
.header {
  width: 100%;
  height: 60px;
  background: #212029;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left,
.right {
  display: flex;
  align-items: center;
}

.first {
  width: 22px;
  height: 20px;
  margin: 0 22px;
}

.shu {
  width: 1px;
  height: 60px;
  background: #101015;
  margin-right: 22px;
}

.logo {
  width: 120px;
  height: 40px;
}

.title {
  font-size: 21px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin-left: 26px;
}

.user-icon {
  width: 18px;
  height: 18px;
  margin-right: 16px;
}

.user,
.quit {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  margin-right: 16px;
}
</style>