BJ_web_developers / lzsandtable

Blame view

src/components/VHeader.vue 3.19 KB
Edit Raw Normal View History
1e4db980   liuqimichale   轮廓 
1
 
  <template>
414b2840   liuqimichale   头部 
2
3
 
      <header class="header-wrap">
          <span>车场实时概况</span>
f1414ff7   Andy   add fullscreen 
4
 
          <div class="header-fullscreen" @click="toggleFullScreen($event)">全屏</div>
0afb4b58   liuqimichale   headertime 
5
6
7
8
 
          <div class="header-time">
              <p>{{headerDay}}</p>
              <p>{{headerTime}}</p>
          </div>
414b2840   liuqimichale   头部 
9
 
      </header>
1e4db980   liuqimichale   轮廓 
10
11
12
 
  </template>
  
  <script>
0afb4b58   liuqimichale   headertime 
13
 
  import { formateTime, formateday } from "../utils/formate";
49ed5b07   liuqimichale   headertime 
14
1e4db980   liuqimichale   轮廓 
15
16
 
  export default {
    name: 'VHeader',
49ed5b07   liuqimichale   headertime 
17
 
    data() {
f1414ff7   Andy   add fullscreen 
18
 
        isFullscreen:true;
49ed5b07   liuqimichale   headertime 
19
 
      return {
0afb4b58   liuqimichale   headertime 
20
21
 
        headerDay: formateday(),
        headerTime: formateTime(),
49ed5b07   liuqimichale   headertime 
22
 
      }
f1414ff7   Andy   add fullscreen 
23
24
25
26
27
28
29
30
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
56
57
58
59
60
61
62
63
 
    },
      methods:{
  
          FullScreen(el){
              if(this.isFullscreen){//退出全屏
                  if(document.exitFullscreen){
                      document.exitFullscreen()
                  }else if( document.mozCancelFullScreen){
                      document.mozCancelFullScreen()
                  }else if(document.webkitExitFullscreen){
                      //改变平面图在google浏览器上面的样式问题
                      $("#canvasPaintArea").css("position","static").css("width","100%");
                      $(".buildingsFloor").css("width","70%");
                      $(".floor-plan").css("width","78%");
                      document.webkitExitFullscreen()
                  }else if(!document.msRequestFullscreen){
                      document.msExitFullscreen()
                  }
              }else{    //进入全屏
                  if(el.requestFullscreen){
                      el.requestFullscreen()
                  }else if(el.mozRequestFullScreen){
                      el.mozRequestFullScreen()
                  }else if(el.webkitRequestFullscreen){
                      //改变平面图在google浏览器上面的样式问题
                      $("#canvasPaintArea").css("position","absolute").css("width","94%");
                      $(".buildingsFloor").css("width","98%");
                      $(".floor-plan").css("width","90%");
                      el.webkitRequestFullscreen();
                  }else if(el.msRequestFullscreen){
                      el.msRequestFullscreen()
                  }
              }
          },
          toggleFullScreen(e){
              this.isFullscreen=!this.isFullscreen;
              var el=e.srcElement||e.target;//target兼容Firefox
              this.FullScreen(el);
          },
  
      }
1e4db980   liuqimichale   轮廓 
64
65
66
 
  }
  </script>
49ed5b07   liuqimichale   headertime 
67
 
  <style scoped lang="scss">
414b2840   liuqimichale   头部 
68
 
      header {
1e4db980   liuqimichale   轮廓 
69
 
          height: 65px;
414b2840   liuqimichale   头部 
70
 
          text-align: center;
49ed5b07   liuqimichale   headertime 
71
 
          position: relative;
414b2840   liuqimichale   头部 
72
73
74
 
          background-image: url("../images/header/headerbg.png");
          background-repeat: no-repeat;
          background-position: center center;
49ed5b07   liuqimichale   headertime 
75
76
77
78
 
          >span{
              font-size: 32px;
              line-height: 75px;
          }
f1414ff7   Andy   add fullscreen 
79
80
81
82
83
84
85
86
87
 
          .header-fullscreen{
              width: 60px;
              height: 35px;
              line-height: 35px;
              position: absolute;
              right: 148px;
              top:16px;
              cursor:pointer;
          }
49ed5b07   liuqimichale   headertime 
88
89
90
91
92
93
94
95
96
97
98
99
 
          .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;
          }
1e4db980   liuqimichale   轮廓 
100
101
 
      }
  </style>