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() {
40e43b0f   liuqimichale   init 打包 
18
49ed5b07   liuqimichale   headertime 
19
 
      return {
0afb4b58   liuqimichale   headertime 
20
21
 
        headerDay: formateday(),
        headerTime: formateTime(),
40e43b0f   liuqimichale   init 打包 
22
 
        isFullscreen:true
49ed5b07   liuqimichale   headertime 
23
 
      }
f1414ff7   Andy   add fullscreen 
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
64
 
    },
      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   轮廓 
65
66
67
 
  }
  </script>
49ed5b07   liuqimichale   headertime 
68
 
  <style scoped lang="scss">
414b2840   liuqimichale   头部 
69
 
      header {
1e4db980   liuqimichale   轮廓 
70
 
          height: 65px;
414b2840   liuqimichale   头部 
71
 
          text-align: center;
49ed5b07   liuqimichale   headertime 
72
 
          position: relative;
414b2840   liuqimichale   头部 
73
74
75
 
          background-image: url("../images/header/headerbg.png");
          background-repeat: no-repeat;
          background-position: center center;
49ed5b07   liuqimichale   headertime 
76
77
78
79
 
          >span{
              font-size: 32px;
              line-height: 75px;
          }
f1414ff7   Andy   add fullscreen 
80
81
82
83
84
85
86
87
88
 
          .header-fullscreen{
              width: 60px;
              height: 35px;
              line-height: 35px;
              position: absolute;
              right: 148px;
              top:16px;
              cursor:pointer;
          }
49ed5b07   liuqimichale   headertime 
89
90
91
92
93
94
95
96
97
98
99
100
 
          .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   轮廓 
101
102
 
      }
  </style>