kuangshan-project/src/components/zdh/topimg.vue

<template>
  <div class="img">
    <img src="../../assets/images/tongfeng.png" alt="">
    <h1>通风系统</h1>
    <p>{{   nowTime }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
         src: '../../assets/images/tongfeng.png',
          nowTime:''
      }
    },
    
     mounted() {
       setInterval(this.getNowFormatDate, 1000);
    },
    beforeDestroy() {
      if(this.timeId){
 

               clearInterval(this.getNowFormatDate);
 

           }
    },
    methods: {
      
      getNowFormatDate() {
      var now = new Date();
      var year = now.getFullYear(); //获取年份
      var month = now.getMonth(); //获取月份
      var date = now.getDate(); //获取日期
      var day = now.getDay(); //获取星期
      var hour = now.getHours(); //获取小时
      var minute = now.getMinutes(); //获取分钟
      // if(minute.length<=1){
      //   minute="0"+minute;
      // }
      // console.log(minute.length);
      var seconds =
        now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds(); //获取秒
      month = month + 1;
      var arr_week = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      var week = arr_week[day];
      var time =
        year +
        "年" +
        month +
        "月" +
        date +
        "日 " +
        week +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        seconds;
      this.nowTime= time;
    },
  },
};
   
</script>

<style  scoped>
  .img{
    height: 180px;
    position: relative;
  }
  img{
    width: 100%;
    height: 100%;
  }
  h1{
    color: #FFFFFF;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translate(-50%);
    text-shadow: 5px 5px 4px #0E0E0E;
    font-size: 30px;
    margin: 0;
  }
  p{
    position: absolute;
    right: 5px;
    /* left: 10px; */
    color: #FFFFFF;
    bottom: 0px;
    margin: 0px;
  }
</style>