<template>
  <div class="home">
    <div class="top">
      <p class="title">生产人员管理子系统-人员画像</p>
      <dv-decoration-5 style="width:50rem;height:2rem;margin:0 auto;"/>
      <span>{{newDate}}</span>
    </div>
    <div class="mainbox">
      <div class="topDiv">
        <top/>
      </div>
      <div class="bottomDiv">
        <bottom/>
      </div>
    </div>
  </div>
</template>

<script>

  import top from '@/components/huaxiang/top1'
  import bottom from '@/components/huaxiang/bottom1'

  export default {
    name: 'Home',
    components: {
      top,
      bottom,
    },
    data(){
      return{
        newDate: new Date()
      }
    },
    // 挂载时间
    mounted () {
      let that = this
      this.timer = setInterval(function () {
        that.newDate = new Date().toLocaleString()
      })
    },
// 销毁时清除计时器
    beforeDestroy: function () {
      if (this.timer) {
        clearInterval(this.timer)
      }
    }
  }
</script>
<style>
  *{margin: 0;padding: 0;}
  html{font-size: 62.5%;}
  .home{width: 100%;height: 82rem;color: #fff;background: #000 url('../../assets/bg.png');background-size: 100% 100%;background-position: center center;}
  .top{width: 100%;height: 4%;text-align: center;font-weight: 400;position: relative;}
  .top .title{font-size: 2.8rem;height: 6rem;line-height: 6rem;margin-bottom: 0;}
  .top span{position: absolute;top:1rem;right: 10rem;font-size: 1.4rem;}
  .mainbox{width: 100%;height: 96%;}
  .mainbox>div{width: 100%;height: 48%;}
  .item{background: rgba(0, 25, 56, 0.8);width: 48%;height: 96%;}
  .coin{display:flex;justify-content: space-around;align-items: center;width:100%;height:100%;}

</style>
