Blame view

src/components/headerCommon.vue 1.1 KB
52c50939   liuqimichale   init
1
2
  <template>
    <div class="headercommon">
c85d412b   liuqimichale   正式地址
3
      <h3>赤峰停车运营监控中心</h3>
9808a4b6   liuqimichale   公用头部
4
5
6
7
      <div class="time-wrap">
        <p>{{timedate}}</p>
        <p>{{time}}</p>
      </div>
52c50939   liuqimichale   init
8
9
10
11
    </div>
  </template>
  
  <script>
9808a4b6   liuqimichale   公用头部
12
  import { getNowFormatDate, getNowFormatTime } from '../utils/formatetime'
52c50939   liuqimichale   init
13
14
  export default {
    name: 'HelloWorld',
9808a4b6   liuqimichale   公用头部
15
16
    created() {
    },
52c50939   liuqimichale   init
17
18
    data() {
      return {
9808a4b6   liuqimichale   公用头部
19
20
        timedate: getNowFormatDate(),
        time: getNowFormatTime()
52c50939   liuqimichale   init
21
22
23
24
25
      }
    }
  }
  </script>
  
33e9c5c3   liuqimichale   init
26
  
52c50939   liuqimichale   init
27
28
29
30
  <style scoped>
    .headercommon {
      width: 100%;
      height: 77px;
9808a4b6   liuqimichale   公用头部
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
      position: relative;
  
    }
    .headercommon h3{
      width: 1200px;
      margin: 0 auto;
      line-height: 77px;
      background: url("../assets/img/headerbg.svg") no-repeat center center;
      /*background: #f00;*/
      font-size: 27px;
      text-align: center;
      font-weight:800;
      color:rgba(255,255,255,1);
    }
    .time-wrap{
      position: absolute;
      right: 12px;
      top:20px;
      padding-left: 44px;
      background: url("../assets/img/time-wrap.png") no-repeat 0 center;
      text-align: left;
      font-size:16px;
      font-weight:400;
      color:rgba(255,255,255,1);
      line-height:18px;
52c50939   liuqimichale   init
56
57
    }
  </style>