<template>
  <header class="nav">
    <div class="logo">
      <h3 class="systemName textColor">卫星应用助力数字福建原型系统</h3>
    </div>
    <span class="newDate textColor">{{ newDate }}</span>
  </header>
</template>

<script>
  export default {
    data () {
      return {
        newDate: '',
        timer: '',
      }
    },
    mounted () {
      this.timer = setInterval(() => {
        this.newTime()
      }, 1000)
    },
    beforeDestroy () {
      if (this.timer) {
        // 在Vue实例销毁前，清除定时器
        clearInterval(this.timer)
      }
    },
    methods: {
      // 获取当前时间
      newTime () {
        // 获取年月日
        var time = new Date()
        var year = time.getFullYear()
        var month = time.getMonth()
        var day = time.getDate()
        // 获取时分秒
        var h = time.getHours()
        var m = time.getMinutes()
        var s = time.getSeconds()
        // 检查是否小于10
        h = this.check(h)
        m = this.check(m)
        s = this.check(s)
        this.newDate =
          year + ':' + month + ':' + day + '  ' + h + ':' + m + ':' + s
      },
      // 检查时间是不是小于10
      check (i) {
        var num
        i < 10 ? (num = '0' + i) : (num = i)
        return num
      },
    },
  }
</script>

<style lang="scss" scoped>
  .nav {
    height: 100px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    top:0;
    z-index: 20;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(25,54,148,.1)),to(rgba(25,54,148,.8)));
    background: linear-gradient(180deg,rgba(25,54,148,.1),rgba(25,54,148,.8));
    .logo{
      background: url(../../assets/images/logo-bg.png) no-repeat;
      width: 1044px;
      height: 121px;
      position: absolute;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    .systemName {
      font-size: 43px;
      color: #fff;
      line-height: 74px;
      margin: 0;
    }
    .textColor{
      background: -webkit-gradient(linear,left top,left bottom,from(#c2edff),color-stop(50%,#4bc5fe),to(#00a8ff));
      background: linear-gradient(180deg,#c2edff 0,#4bc5fe 50%,#00a8ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .newDate {
      color: #fff;
      position: absolute;
      right: 10px;
      bottom: 20px;
    }
  }
  .nav:after {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
  }
</style>
