yj_vue3/src/components/Btmbutton.vue

<template>
	  <div>
  <div class="btmbuttonbg">

	  <div class="btmbutton">

		  <div class="btmbutton-con">
			  <!--<div class="btm-left-btn">-->
				  <!--<a class="btm-btn">值班信息</a>-->
			  <!--</div>-->
			  <div class="yj-name" style="text-indent: 1em">张雨晴</div>
			  <div class="model-tab">
				  <button class="on" @click="goJiaShi">驾驶模式</button>
				  <button @click="goChenJin">沉浸模式</button>
			  </div>
			  <div class="time"> {{nowdate}}&nbsp;&nbsp;{{nowtime}}</div>
			  <div class="btm-con">
				  <h2 class="yj-sjzs">160</h2>
				  <div class="yj-sjs">
					  <div class="yj-cl">
						  <b>40</b>
						  <span>未处理</span>
					  </div>
					  <div class="yj-k"></div>
					  <div class="yj-cl">
						  <b>120</b>
						  <span>已确认</span>
					  </div>
				  </div>
			  </div>
			  <div class="btm-con2">
				  <span>隐患排查</span>
				  <span>应急物资</span>
			  </div>
			  <div class="btm-con3">
					<span><i class="iconfont yj-icon-fengsu"></i><u>风力</u></span>
					  <span><i class="iconfont yj-icon-fengxiang"></i><u>东南风</u></span>
					  <span><i class="iconfont yj-icon-jiangyuliang"></i><u>10mm</u></span>
					  <span><i class="iconfont yj-icon-shidu"></i><u>93</u></span>
			  </div>
			  <div class="btn-left">
				  <p><i class="iconfont yj-icon-tongxunlu"></i>通讯录</p>
				  <p><i class="iconfont yj-icon-weizhi"></i>人员定位</p>
				  <p><i class="iconfont yj-icon-taizhang"></i>事件台账</p>
				  <div class="btm-cs">
					  <b>72</b>
					  <span>传感器</span>
				  </div>
			  </div>
			  <div class="btn-right">
				  <p>物联网<i class="iconfont yj-icon-wulianwang"></i></p>
				  <p>视联网<i class="iconfont yj-icon-shilianwang"></i></p>
				  <p>电视墙<i class="iconfont yj-icon-dianshiqiang"></i></p>
				  <div class="btm-cs">
					  <b>160</b>
					  <span>摄像头</span>
				  </div>
			  </div>
		  </div>

	  </div>

  </div>

</div>
</template>
<script>
export default {
  name: 'Btmbutton',
  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());
                },

		// 跳转沉浸模式
		goChenJin(){
			this.$router.push( '/YjCjms');
		},
	  	// 跳转驾驶模式
		goJiaShi(){
			// this.$router.push( '/index');
		}

  	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.btmbuttonbg{
		position: absolute;
		bottom: 0px;
		width: 100%;
		height: 239px;
		background: url("../assets/images/yj-btmbg.png") no-repeat center;
		background-size: 100% 100%;
		z-index: 2;
	}
	.btmbutton{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.btmbutton-con{
		width: 900px;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 50%;
		transform: translateX(-50%);
	}
	.btmbutton-con .model-tab{
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.btmbutton-con .model-tab button{
		background: url("../assets/images/yj-nav.png") no-repeat center;
		display: block;
		width: 165px;
		height: 25px;
		line-height: 25px;
		background-size: 100% 100%;
		margin-top: -15px;
		cursor: pointer;
		color: #8b8b8b;
		font-size: 14px;
		border: 0px;
		outline: 0px;
	}
	.btmbutton-con .model-tab button.on{
		background: url("../assets/images/yj-navon.png") no-repeat center;
		background-size: 100% 100%;
		color: #fff;
	}
	.btmbutton-con .model-tab button:hover{
		background: url("../assets/images/yj-navon.png") no-repeat center;
		background-size: 100% 100%;
		color: #fff;
	}
	.time{
		text-align: center;
		font-family: "黑体";
		font-size: 20px;
		color: #fff;
		font-style: italic;
		margin-top: 10px;
	}
	.btm-con{
		background: url("../assets/images/yj-btmcbg1.png") no-repeat center;
		width: 313px;
		height: 207px;
		margin: -20px auto 0px auto;
		display: flex;
		flex-direction: column;
	}
	.btm-con h2{
		font-size: 55px;
		background-image:-webkit-linear-gradient(top,#fff,#6a6a6a);
		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;
		text-align: center;
		margin-top: 50px;
		font-family: myfont3;
		font-weight: bold;
	}
	.btm-con .yj-sjs{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: -7px;
	}
	.btm-con .yj-sjs b{
		font-size: 28px;
		background-image:-webkit-linear-gradient(top,#fff,#6a6a6a);
		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;
		text-align: center;
		display: block;
		font-family: myfont3;
		font-weight: bold;
	}
	.btm-con .yj-sjs span{
		color: #fff;
		font-size: 12px;
		text-align: center;
		display: block;
	}
	.btm-con .yj-k{
		width: 70px;
	}
	.btm-con2{
		background: url("../assets/images/yj-btmcbg2.png") no-repeat center;
		width: 459px;
		height: 43px;
		margin: -135px auto 0px auto;
		background-size: 100% 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.btm-con2 span{
		color: #fff;
		font-size: 14px;
		line-height: 43px;
	}
	.btm-con2 span:nth-child(1){
		padding-left: 30px;
	}
	.btm-con2 span:nth-child(2){
		padding-right: 30px;
	}
	.btm-con3{
		width:250px ;
		height: 20px;
		margin: 75px auto 0px auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.btm-con3 span{
		margin: 0px 5px;
	}
	.btm-con3 i{
		color: #fff;
		font-size: 16px;

	}
	.btm-con3 u{
		color: #fff;
		font-size: 14px;
		text-decoration: none;
		padding-left: 5px;
	}
	.btn-left{
		position: absolute;
		left: 0px;
		top:14px;
	}
	.btn-left p{
		background: url("../assets/images/yj-btmleftbg.png") no-repeat center;
		background-size: 100% 100%;
		width: 150px;
		height: 23px;
		line-height: 23px;
		margin-bottom: 10px;
		color: #fff;
		padding-left: 18px;
		font-size: 14px;
		cursor: pointer;
		text-align: left;
	}
	.btn-left p i{
		font-size: 15px;
		margin-right: 8px;
	}
	.btn-left p:nth-child(1){
		margin-left: 85px;
	}
	.btn-left p:nth-child(2){
		margin-left: 72px;
	}
	.btn-left p:nth-child(3){
		margin-left: 62px;
	}
	.btn-left p:nth-child(4){
		margin-left: 50px;
	}
	.btm-cs{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 25px;
	}
	.btm-cs b{
		font-size: 50px;
		background-image:-webkit-linear-gradient(top,#fff,#6a6a6a);
		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;
		text-align: center;
		display: block;
		font-family: myfont3;
		font-weight: bold;
	}
	.btm-cs span{
		color: #fff;
		font-size: 12px;
	}
	.btn-right{
		position: absolute;
		right: 0px;
		top:14px;
	}
	.btn-right p{
		background: url("../assets/images/yj-btmrightbg.png") no-repeat center;
		background-size: 100% 100%;
		width: 150px;
		height: 23px;
		line-height: 23px;
		margin-bottom: 10px;
		color: #fff;
		padding-right: 18px;
		font-size: 14px;
		cursor: pointer;
		text-align: right;
	}
	.btn-left p:hover,.btn-right p:hover{
		text-shadow: 0px 0px 5px #1cf4ff;
	}
	.btn-right p i{
		font-size: 15px;
		margin-left: 8px;
	}
	.btn-right p:nth-child(1){
		margin-right: 85px;
	}
	.btn-right p:nth-child(2){
		margin-left: 13px;
	}
	.btn-right p:nth-child(3){
		margin-left: 28px;
	}
	.btn-right .btm-cs{
		margin-top: 25px;
	}
	.btm-left-btn{
		position: absolute;
		left: 90px;
		top: -26px;
		z-index: 99;
		display: flex;
		flex-direction: row;
	}
	.btm-right-btn{
		position: fixed;
		right: 20px;
		bottom:18px;
		z-index: 99;
		display: flex;
		flex-direction: row;
	}
	.btm-btn{
		background: url("../assets/images/yj-btmxbg.png") no-repeat center;
		background-size: 100% 100%;
		width: 85px;
		height: 28px;
		line-height: 28px;
		display: block;
		text-align: center;
		font-size: 12px;
		color: #fff;
		cursor: pointer;
		margin: 0px 5px;
	}
	.btm-btn:hover{
		text-shadow: 0px 0px 5px #1cf4ff;
	}
	.yj-name{
		position: absolute;
		cursor: pointer;
		padding-left: 72px;
		height: 26px;
		line-height: 26px;
		right: 101px;
		top: -25px;
		color: #fff;
		font-size: 16px;
		background: url("../assets/images/yj-name.png") no-repeat center;
	}
</style>