<template>
  <div class="row">
    <div class="left" />
    <div class="mid"><div class="text">浪潮屏媒安播云平台</div> </div>
    <div class="right">
      <div class="time">{{ nowTime }}</div>
      <div class="exit">退出</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      nowTime: '' // 当前日期
    }
  },
  mounted () {
    this.currentTime()
  },
  // 销毁定时器
  beforeDestroy () {
    if (this.getCurrentTime) {
      clearInterval(this.getCurrentTime) // 在Vue实例销毁前，清除时间定时器
    }
  },
  methods: {
    currentTime () {
      setInterval(this.getCurrentTime, 500)
    },
    getCurrentTime () {
      // 获取当前时间并打印

      const yy = new Date().getFullYear()
      const mm = new Date().getMonth() + 1
      const dd = new Date().getDate()
      const hh = new Date().getHours()
      const mf =
        new Date().getMinutes() < 10
          ? `0${new Date().getMinutes()}`
          : new Date().getMinutes()
      const ss =
        new Date().getSeconds() < 10
          ? `0${new Date().getSeconds()}`
          : new Date().getSeconds()
      this.nowTime = `${yy}/${mm}/${dd}    ${hh}:${mf}:${ss}`
    }
  }
}
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  justify-content: space-between;
  height: 50px;
  align-items: center;
  .left {
    flex: 0 0 160px;
    background: url("~@/assets/logo.png");
    background-size: 142px 36px ;
    height: 100%;
    background-repeat: no-repeat;
        background-position: left center
  }
  .mid {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: url("~@/assets/line.png") 0 0/100% 100% no-repeat;
    height: 100%;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    .text{
      position: relative;
      top: -10px;
    }
  }
  .right {
    flex: 0 0 250px;
    color: #fff;
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 18px;
    justify-content: flex-end;
    .exit {
      margin-left: 20px;
      cursor: pointer;
      color: #2956f0;
      position: relative;
      top: -2px;
      right: 6px;
    }
  }
}
</style>
