dongxin/src/components2/seHeader/index.vue

<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">{{ date }}</el-col>
    </el-col>
    <el-col :span="12">
      <el-col :span="24" class="title">中国东信南宁总部大楼</el-col>
    </el-col>
    <el-col :span="6">
      <el-col :span="24" class="logo">
        <el-image :src="logo" fit="scale-down"> </el-image>
      </el-col>
    </el-col>
  </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: absolute;
    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;
    }
    .logo {
      position: absolute;
      right:40px;
      width:100%;
      text-align: right;

      .el-image {
        height: 65px;
        vertical-align: middle;
      }
    }
  }
}
</style>