yj_vue3/src/components/Cjmsheader.vue

<template>
	<div class="Cjmsheader">
		<div class="time">{{nowdate}}&nbsp;&nbsp;{{nowtime}}</div>
		<div class="header">
			  <p>延吉市数字应急自然灾害综合风险监管平台</p>
		</div>
		<div class="yj-name">张三</div>
	</div>
  
</template>

<script>
export default {
  name: 'Cjmsheader',
 data(){
   	return {
 		nowdate : '', //日期
 		nowtime : '', //时间
 		newTimer : '', //定时器
 	  }
   },
   props: {
 	  
   },
    mounted () {
          this.timerOneScondRun(); //执行日期函数
                 clearInterval(this.newTimer); //清除定时器
                 // 定时获取时间
                 this.newTimer = setInterval(this.timerOneScondRun, 1000);
             },
             beforeRouteLeave(to,from,next){
             	// 离开组件时停掉定时器，节省内存
                 clearInterval(this.newTimer);
                 next();
             },
    
   methods: {
          //获取时间
                 timerOneScondRun() {
                 	let date = new Date();
                 	// 日期格式  2022年05月31日
         	        this.nowdate =
         	            date.getFullYear() +
         	            "/" +
         	            (date.getMonth() + 1 >= 10
         	            ? date.getMonth() + 1
         	            : "0" + (date.getMonth() + 1)) +
         	            "/" +
         	            (date.getDate() >= 10 ? date.getDate() : "0" + date.getDate());
         	        // 时间格式 12:11:27
         	        this.nowtime =
         	            date.getHours() +
         	            ":" +
         	            (date.getMinutes() >= 10
         	            ? date.getMinutes()
         	            : "0" + date.getMinutes()) +
         	            ":" +
         	            (date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds());
                 },
 				
   	}
 }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.header{
		position: absolute;
		background: url("../assets/images/yj-cjmstopbg.png") no-repeat center;
		width: 100%;
		height: 108px;
		top:0px;
		left: 0px;
		z-index: 4;
	}
	.header p{
		color: #fff;
		line-height: 70px;
		font-family: "myfont";
		font-size: 36px;
		letter-spacing: 1px;
		text-align: center;
	}
	.time{
		text-align: center;
		font-family: "黑体";
		font-size: 16px;
		color: #fff;
		font-style: italic;
		position: absolute;
		left:25px;
		top:6px;
		z-index: 9;
	}
	.yj-name{
		position: absolute;
		cursor: pointer;
		padding-left: 72px;
		height: 26px;
		line-height: 26px;
		right: 25px;
		top: 4px;
		color: #fff;
		z-index: 9;
		font-size: 16px;
		background: url("../assets/images/yj-name.png") no-repeat center;
	}
</style>