<template>
  <div class="Topnavign">
    <div class="logo"></div>
    <div class="user">
      <img src="../assets/image/Top-Navigation/user.png">
      <span>欢迎您，</span>
    </div>
    <div class="information">
      <img src="../assets/image/Top-Navigation/information.png">
      <span>消息</span>
      <div class="information-number">99</div>
    </div>
    <div class="index">
      <img src="../assets/image/Top-Navigation/index.png">
      <span>首页</span>
    </div>
    <div class="out" @click="out">
      <img src="../assets/image/Top-Navigation/out.png">
      <span>退出</span>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import router from "@/router";
export default {
  name: "TopNavigation",
  setup(){
    const out = () =>{
      ElMessageBox.confirm(
          '确定要退出登录吗',
          '退出',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: '退出',
            draggable: true,
          }
      )
          .then(() => {
            router.push('/')
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: 'Delete canceled',
            })
          })
    }
    return{
      out
    }
  }
}
</script>

<style scoped>
.Topnavign{
  background-color: #3391d8;
  width: 100%;
  height: 80px;
  position: relative;
}

.logo{
  width: 15%;
  height: 100%;
  background-color: darkcyan;
}
/*用户*/
.user{
  position: absolute;
  left:320px;
  bottom: 20px;
  max-width: 300px;
  height: 25px;
  display: flex;
  align-items: center;
  color: white;
  font-size: 12px;
}

.user img{
  width: 20px;
  height: 25px;
}
.user span{
  margin-left: 10px;
}
/*信息*/
.information{
  position: absolute;
  left:600px;
  bottom: 20px;
  width: 100px;
  height: 25px;
  display: flex;
  align-items: center;
  color: white;
  font-size: 12px;
}

.information img{
  width: 25px;
  height: 20px;
}

.information span{
  margin-left: 10px;
}

.information-number{
  background-color: #f15151;
  border-radius: 15px;
  width: 20px;
  height: 15px;
  text-align: center;
}
/*主页跳转*/
.index{
  position: absolute;
  right: 250px;
  bottom: 20px;
  width: 150px;
  height: 40px;
  display: flex;
  align-items: center;
  color: white;
  font-size: 16px;
}

.index img{
  width: 40px;
  height: 40px;
}

.index span{
  margin-left: 10px;
}

/*退出登录*/
.out{
  position: absolute;
  right: 50px;
  bottom: 20px;
  width: 150px;
  height: 40px;
  display: flex;
  align-items: center;
  color: white;
  font-size: 16px;
}

.out img{
  width: 40px;
  height: 40px;
}

.out span{
  margin-left: 10px;
}
</style>