deviceManageDaPing/src/components/AppHeader.vue

<template>
  <div class="app-header">
	<div class="app-header-time">{{time}}</div>
	<div class="app-header-tit">
		<!-- AI-Hub智能处理平台 -->
	</div>
	<!-- <div>
		<img src="@/assets/images/header.png"/>
		<div>admin</div>
	</div> -->
	<div class="avatar-container right-menu-item hover-effect">
		<div class="avatar-wrapper">
		  <img :src="avatar" class="user-avatar">
			<div class="name">{{name}}</div>
			<div class="line"></div>
			<div class="out" @click="logout">退出</div>
		</div>
	</div>
	
	<!-- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
	  <div class="avatar-wrapper">
	    <img :src="avatar" class="user-avatar">
		<div class="name">123</div>
		<div @click.native="logout">退出</div>
	    <i class="el-icon-caret-bottom" />
	  </div>
	  <el-dropdown-menu slot="dropdown">
	    <router-link to="/user/profile">
	      <el-dropdown-item>个人中心</el-dropdown-item>
	    </router-link>
	    <el-dropdown-item divided @click.native="logout">
	      <span>退出登录</span>
	    </el-dropdown-item>
	  </el-dropdown-menu>
	</el-dropdown> -->
  </div>
</template>

<script>
	import { mapGetters } from 'vuex'
  // import 'qweather-icons/font/qweather-icons.css'
  // import { getWeatherInfo } from '@/utils/weather'
  export default {
    data() {
      return {
        time: '',
        timer: null,
        mhHost: '',
      }
    },
	computed:{
		...mapGetters([
		  'avatar','name'
		]),
	},
    async mounted() {
      this.refreshTime()
      this.timer = setInterval(this.refreshTime, 1000);
      // this.weather = await getWeatherInfo(this.city);
    },
    methods: {
      refreshTime() {
        this.time = new Date().toLocaleString('zh-CN', {
          year: 'numeric',
          hour12: false,
          month: '2-digit',
          day: '2-digit',
          // hour: 'numeric',
          // minute: 'numeric',
          // second: 'numeric',
          weekday: 'long',
        }).replace(/(星期|周)/, ' $1');
		
		// const date = new Date();
		// const options = { 
		//   weekday: 'long', 
		//   year: 'numeric', 
		//   month: 'long', 
		//   day: 'numeric', 
		// };
		// const parts = new Intl.DateTimeFormat('zh-CN', options).formatToParts(date);
		// let result = '';
		// for (const part of parts) {
		//   if (part.type === 'weekday') {
		//     result += ' ' + part.value; // 在星期前加空格
		//   } else {
		//     result += part.value;
		//   }
		// }
		// this.time=result
      },
	  //退出
	  logout() {
	    this.$confirm('确定注销并退出系统吗？', '提示', {
	      confirmButtonText: '确定',
	      cancelButtonText: '取消',
	      type: 'warning'
	    }).then(() => {
	      this.$store.dispatch('LogOut').then(() => {
	        location.href = '/login'
	      })
	    }).catch(() => {})
	  }
    },
  }
</script>

<style lang="scss" scoped>
.app-header {
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;position: relative;
padding:28px 45px 0 45px;
  .app-header-time{padding-left: 2px;}
  .app-header-tit{ background: url('~@/assets/images/headertit.png') no-repeat;
  background-size: contain;width:601px;height: 36px;flex:1;
  background-position: center center;}
}
.avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        position: relative;
		display: flex;align-items: center;
        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 40px;
        }
		.name{font-weight: bold;
font-size: 14px;
color: #FFFFFF;margin-left:10px;}
        .el-icon-caret-bottom {margin-left:8px;
          // cursor: pointer;
          // position: absolute;
          // right: -20px;
          // top: 25px;
          font-size: 14px;
        }
		.line{width: 1px;height: 12px;background: #33536F;margin-left: 12px;}
		.out{margin-left: 12px;}
      }
    }
</style>