DX-LargeScreen/src/components3/seHeader/index.vue

<!--
 * @Descripttion:
 * @version:
 * @Author: wt
 * @Date: 2023-06-14 15:27:50
 * @LastEditors: wt
 * @LastEditTime: 2023-06-14 15:29:39
-->
<template>
  <el-row
    class="top"
    v-loading="loading"
    element-loading-background="rgba(28,33,41,1)"
  >
    <el-col :span="6">
      <el-col :span="24" class="time"><a href="http://10.21.39.1:8187">{{ date }}</a></el-col>
    </el-col>
    <el-col :span="12">
      <el-col :span="24" class="title">中国东信智慧楼宇</el-col>
    </el-col>
    <div :span="6" class="logo">
        <a href="http://10.21.39.1:8186"><img :src="logo" alt=""></a>
    </div>
  </el-row>
</template>
<script>
import logo from "@/assets/logo/logo-b.png";
export default {
  data() {
    return {
      loading: true,
      date: new Date(),
      logo: logo,
    };
  },
  mounted() {
    let that= this;
    that.loading = false;
    this.timer = setInterval(function() {
        let myDate = new Date()
        let year = myDate.getFullYear() + '年'
        let month = myDate.getMonth() + 1 > 9 ? (myDate.getMonth() + 1) + '月' : '0' + (myDate.getMonth() + 1)  + '月'
        let day = myDate.getDate() > 9 ?  myDate.getDate() + '日' : '0' + myDate.getDate() + '日 '
        let s = myDate.getHours() > 9 ? myDate.getHours() : '0' + myDate.getHours()
        let f = myDate.getMinutes() > 9 ? myDate.getMinutes() : '0' + myDate.getMinutes()
        let m = myDate.getSeconds() > 9  ? myDate.getSeconds() : '0' + myDate.getSeconds()
        that.date = year + month + day + ' ' + s + ":" + f + ":" + m
    });
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/common.scss";
#main {
  .top {
    width: 100%;
    height: 100px;
    line-height: 100px;
    vertical-align: middle;
    position: fixed;
    z-index: 10;
    .time {
      font-size: 24px;
      color: $white;
      margin-left:6px;
    }
    .title {
      font-size: 40px;
      color: $white;
      letter-spacing: 2.22px;
      font-family: "MicrosoftYaHei-Bold";
      vertical-align: middle;
      text-align: center;
      font-weight: 700;
    }
    .logo {
      position: fixed;
      right:16px;
      img {
        height: 65px;
        vertical-align: middle;
      }
    }
  }
}
</style>