VHeader.vue 1.05 KB
<template>
    <header class="header-wrap">
        <span>车场实时概况</span>
        <div class="header-time">{{headerTime}}</div>
    </header>
</template>

<script>
import { formateTime } from "../utils/formate";

export default {
  name: 'VHeader',
  data() {
    return {
      headerTime: formateTime()
    }
  }
}
</script>

<style scoped lang="scss">
    header {
        height: 65px;
        text-align: center;
        position: relative;
        background-image: url("../images/header/headerbg.png");
        background-repeat: no-repeat;
        background-position: center center;
        >span{
            font-size: 32px;
            line-height: 75px;
        }
        .header-time{
            width: 128px;
            height: 35px;
            line-height: 18px;
            position: absolute;
            right: 10px;
            top:16px;
            padding-left: 45px;
            text-align: left;
            background:url("../images/header/headertime.png") no-repeat 0 center;
            background-size: 35px 35px;
        }
    }
</style>