BJ_web_developers / dyitoc

Blame view

src/components/headerCommon.vue 1.1 KB
Edit Raw Normal View History
52c50939   liuqimichale   init 
1
2
 
  <template>
    <div class="headercommon">
9808a4b6   liuqimichale   公用头部 
3
4
5
6
7
 
      <h3>丹阳停车运营监控中心</h3>
      <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>