<template>
  <div id="login">
    <div class="title">
      <h1 class="title-login">市住建委信用信息数据库</h1>
      <h2 class="pull-right">{{dateFormat(dateTime)}}</h2>
    </div>
    <div class="content">
      <div class="content_login">
        <login-right />
      </div>
    </div>
    <div class="foot">

    </div>
  </div>
</template>

<script>
import LoginRight from "./LoginRight.vue";
export default {
  name: "Login",
  components: {LoginRight},
  data(){
    return{
      dateTime:new Date(),
      timer:null
    }
  },
  mounted(){
    let _this = this
    this.timer = setInterval(()=>{
      _this.dateTime = new Date();
    },1000)
  },
  methods:{
    dateFormat(time){
      let date = new Date(time);
      let year = date.getFullYear();
      let wk = date.getDay();
      let month  = date.getMonth() +1 <10?"0"+(date.getMonth() +1):date.getMonth() + 1;
      let day = date.getDate() < 10 ?"0"+date.getDate():date.getDate();
      let hours = date.getHours()<10 ?"0"+date.getHours():date.getHours();
      let minutes = date.getMinutes()<10 ?"0"+date.getMinutes():date.getMinutes();
      let seconds = date.getSeconds()<10 ?"0"+date.getSeconds():date.getSeconds();
      let weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六",];
      let week = weeks[wk];
      return year + "年" + month + "月" + day + "日" + " " + hours + ":" + minutes + "  " +week;

    }
  },
  beforeCreate() {
    if(this.timer){
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped lang="scss">
#login{
  width: 100%;
  height: 100%;
  background-color: #f3f3f4;
  .title{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin: 0px 40px;
    .title-login{
      display: inline-block;
      color: #114272; /*字体颜色*/
      font-weight: bold;
      font-size: 40px;
      margin: 20px 0px;
    }
    .pull-right{
      color: #114272;
      display: inline-block;
      display: flex;
      align-items: center;
      font-family: FontAwesome;
    }
  }
  .content{
    width: 100%;
    height: 75vh;
    background-image: url("@/assets/imgs/login/bk_3.png"),url("@/assets/imgs/login/bk_2.png"),url("@/assets/imgs/login/bk_1.png");
    background-position: 0 500px,0 174px,0 0;
    background-repeat: no-repeat,no-repeat;
    .content_login{
      float: right;
      padding-top: 5%;
      padding-right: 10%;
    }
  }
}
</style>
