Blame view

src/App.vue 3.74 KB
a0ea7efe   梁保满   init
1
  <template>
98163298   刘有才luck   wip: bug修复
2
3
4
5
6
    <div id="app" ref="app">
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
a0ea7efe   梁保满   init
7
8
9
  </template>
  
  <script>
f45b3c05   LH_PC   云平台新UI界面
10
  import _ from "lodash";
a0ea7efe   梁保满   init
11
  export default {
98163298   刘有才luck   wip: bug修复
12
13
14
15
16
    name: "app",
    mounted() {},
    methods: {
      _reSize() {
        const $app = this.$refs.app;
f45b3c05   LH_PC   云平台新UI界面
17
  
98163298   刘有才luck   wip: bug修复
18
        const standardScale = "100%" / "100%";
ef16e57e   LH_PC   fix:前端版本迭代
19
  
98163298   刘有才luck   wip: bug修复
20
        const docHeight = document.body.clientHeight;
6bca489d   LH_PC   云平台二期UI
21
  
98163298   刘有才luck   wip: bug修复
22
        const docWidth = document.body.clientWidth;
6bca489d   LH_PC   云平台二期UI
23
  
98163298   刘有才luck   wip: bug修复
24
25
        if (docWidth < 1700) {
          const currentScale = docHeight / docWidth;
6bca489d   LH_PC   云平台二期UI
26
  
98163298   刘有才luck   wip: bug修复
27
28
29
30
          let [scale, translate] = [0, 0];
          if (currentScale < standardScale) {
            // 以高度计算
            scale = docHeight / 1080;
ead476dd   LH_PC   fix:最终定版
31
  
98163298   刘有才luck   wip: bug修复
32
            const shouleWidth = 1920 * scale;
ead476dd   LH_PC   fix:最终定版
33
  
98163298   刘有才luck   wip: bug修复
34
            const offsetWidth = docWidth - shouleWidth;
6bca489d   LH_PC   云平台二期UI
35
  
98163298   刘有才luck   wip: bug修复
36
37
38
39
40
            translate =
              offsetWidth > 0 ? `translate(${offsetWidth / 2}px, 0)` : "";
          } else {
            // 以宽度计算
            scale = docWidth / 1920;
6bca489d   LH_PC   云平台二期UI
41
  
98163298   刘有才luck   wip: bug修复
42
            const shouleHeight = 1080 * scale;
6bca489d   LH_PC   云平台二期UI
43
  
98163298   刘有才luck   wip: bug修复
44
            const offsetHeight = docHeight - shouleHeight;
6bca489d   LH_PC   云平台二期UI
45
  
98163298   刘有才luck   wip: bug修复
46
47
48
            translate =
              offsetHeight > 0 ? `translate(0, ${offsetHeight / 2}px)` : "";
          }
f45b3c05   LH_PC   云平台新UI界面
49
  
98163298   刘有才luck   wip: bug修复
50
51
          if (docHeight <= 600) {
            $app.style.cssText = `
ead476dd   LH_PC   fix:最终定版
52
53
54
55
56
  							transform: scale(${scale}) ${translate};
  							transform-origin: top left;
  							min-width: 1920px;
  							min-height:830px;
            				`;
98163298   刘有才luck   wip: bug修复
57
58
          } else if (docHeight == 610) {
            $app.style.cssText = `
ead476dd   LH_PC   fix:最终定版
59
60
61
62
  							transform: scale(${scale}) ${translate};
  							transform-origin: top left;
  							min-width: 1920px;
  							min-height:885px;
98163298   刘有才luck   wip: bug修复
63
64
65
            				`;
          } else if (docHeight <= 606) {
            $app.style.cssText = `
ead476dd   LH_PC   fix:最终定版
66
67
68
69
70
  							transform: scale(${scale}) ${translate};
  							transform-origin: top left;
  							min-width: 1920px;
  							min-height:850px;
            				`;
98163298   刘有才luck   wip: bug修复
71
72
          } else if (docHeight <= 650) {
            $app.style.cssText = `
ead476dd   LH_PC   fix:最终定版
73
74
75
76
77
  							transform: scale(${scale}) ${translate};
  							transform-origin: top left;
  							min-width: 1920px;
  							min-height:850px;
            				`;
98163298   刘有才luck   wip: bug修复
78
79
          } else if (docHeight <= 700) {
            $app.style.cssText = `
6bca489d   LH_PC   云平台二期UI
80
81
82
  								transform: scale(${scale}) ${translate};
  								transform-origin: top left;
  								min-width: 1920px;
ead476dd   LH_PC   fix:最终定版
83
  								min-height: 890px; 
ef16e57e   LH_PC   fix:前端版本迭代
84
            					`;
98163298   刘有才luck   wip: bug修复
85
86
          } else if (docHeight <= 750) {
            $app.style.cssText = `
6bca489d   LH_PC   云平台二期UI
87
88
89
  								transform: scale(${scale}) ${translate};
  								transform-origin: top left;
  								min-width: 1920px;
ead476dd   LH_PC   fix:最终定版
90
  								min-height: 910px; 
ef16e57e   LH_PC   fix:前端版本迭代
91
            					`;
98163298   刘有才luck   wip: bug修复
92
93
94
95
96
97
98
99
100
101
102
          }
          // else {
          // 	$app.style.cssText = `
          // 				transform: scale(${scale}) ${translate};
          // 				transform-origin: top left;
          // 				min-width: 1920px;
          // 				min-height:1045px;
          // 			`;
          // }
          else {
            $app.style.cssText = `
7f6131ad   刘有才luck   wip: bug修复
103
104
105
106
            transform: scale(${scale}) ${translate};
  					transform-origin: top left;
            min-width: 1920px;
        		min-height:989px;
ef16e57e   LH_PC   fix:前端版本迭代
107
            					`;
98163298   刘有才luck   wip: bug修复
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
          }
        } else {
          $app.style.cssText = "";
        }
      },
    },
    created() {
      let that = this;
  
      this.$nextTick(() => {
        if (document.createEvent) {
          that._reSize();
        } else if (document.createEventObject) {
          that._reSize();
        }
      });
    },
  };
a0ea7efe   梁保满   init
126
127
128
129
  </script>
  
  <style lang="scss">
  body {
98163298   刘有才luck   wip: bug修复
130
131
132
133
134
    margin: 0px;
    padding: 0px;
    font-family: Microsoft YaHei, Helvetica Neue, Helvetica, PingFang SC,
      Hiragino Sans GB, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
a0ea7efe   梁保满   init
135
136
137
  }
  
  #app {
98163298   刘有才luck   wip: bug修复
138
139
140
141
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
a0ea7efe   梁保满   init
142
  }
f45b3c05   LH_PC   云平台新UI界面
143
144
  
  a {
98163298   刘有才luck   wip: bug修复
145
    color: #56a9ff;
a0ea7efe   梁保满   init
146
  }
f45b3c05   LH_PC   云平台新UI界面
147
  
a0ea7efe   梁保满   init
148
149
  .fade-enter-active,
  .fade-leave-active {
98163298   刘有才luck   wip: bug修复
150
    transition: all 0.2s ease;
a0ea7efe   梁保满   init
151
152
153
154
  }
  
  .fade-enter,
  .fade-leave-active {
98163298   刘有才luck   wip: bug修复
155
    opacity: 0;
a0ea7efe   梁保满   init
156
  }
f45b3c05   LH_PC   云平台新UI界面
157
  
a0ea7efe   梁保满   init
158
  #nprogress .bar {
98163298   刘有才luck   wip: bug修复
159
160
    height: 3px !important;
    background: #56a9ff !important; //自定义颜色
a0ea7efe   梁保满   init
161
162
  }
  </style>