<template>
  <div>
    <div class="loginheader">
      <div class="loginheaderbox">
        <h1>反欺凌信息采集及评测系统</h1>
        <div class="logingoto"><span>您好，请登录</span></div>
        <div class="loginheaderTimes">{{ newtime }}</div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'login',
  data () {
    return {
      newtime: ''
    }
  },
  created () {
    let that = this
    function updateDateTime () {
      const now = new Date() // 获取当前时间
      const hours = now.getHours().toString().padStart(2, '0') // 获取小时，并确保是两位数
      const minutes = now.getMinutes().toString().padStart(2, '0') // 获取分钟，并确保是两位数
      const seconds = now.getSeconds().toString().padStart(2, '0') // 获取秒数，并确保是两位数
      // 格式化时间字符串，例如 "2023-04-01 15:30:45"
      const datetimeString = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${hours}:${minutes}:${seconds}`
      that.newtime = datetimeString // 更新页面上的时间显示
    }
    // 页面加载完成后立即更新时间，然后每1000毫秒（1秒）更新一次时间
    updateDateTime() // 初始更新
    setInterval(updateDateTime, 1000) // 每秒更新一次时间
  }
}
</script>
<style scoped>
.loginheader{height:70px;font-size:24px;line-height:70px;background: linear-gradient( 270deg, #5C9AEF 0%, #113887 100%);color:#fff;width:100%;}
.loginheaderbox{padding:0 40px;}
.loginheader h1{font-weight:500;font-size: 24px;color: #fff;text-align: left;font-style: normal;float:left;}
.logingoto{float:right; font-size: 16px; color: #FFFFFF; text-align: right; font-style: normal;}
.loginheaderTimes{float:right; font-size: 16px; color: #FFFFFF; text-align: right; font-style: normal; margin-right:40px;}
.loginheaderMail{float:right;padding:0 34px;width:32px;position:relative;}
</style>
