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>
|