Skip to content

Commit dbd3b32

Browse files
author
bajins
committed
fixed popup width
1 parent c7abdb0 commit dbd3b32

File tree

3 files changed

+91
-57
lines changed

3 files changed

+91
-57
lines changed

‎static/css/common.css‎

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,48 @@
1-
@media screen and (min-width: 35.5em) {}
1+
@media screen and (min-width: 35.5em) {
2+
/* 弹窗的样式 */
3+
div[times][type="page"] {
4+
width: 90vw !important;
5+
max-height: 95vh !important;
6+
}
7+
}
28

3-
@media screen and (min-width: 48em) {}
9+
@media screen and (min-width: 48em) {
10+
/* 弹窗的样式 */
11+
div[times][type="page"] {
12+
width: 80vw !important;
13+
max-height: 95vh !important;
14+
}
15+
}
16+
17+
@media screen and (min-width: 58em) {
18+
/* 弹窗的样式 */
19+
div[times][type="page"] {
20+
width: 60vw !important;
21+
max-height: 95vh !important;
22+
}
23+
}
424

5-
@media screen and (min-width: 58em) {}
25+
@media screen and (min-width: 75em) {
26+
/* 弹窗的样式 */
27+
div[times][type="page"] {
28+
width: 50vw !important;
29+
max-height: 95vh !important;
30+
}
31+
}
32+
33+
@media screen and (max-width: 35.5em) {
34+
.legal-license, .legal-copyright {
35+
width: 100%;
36+
text-align: center;
37+
margin: 0;
38+
}
639

7-
@media screen and (min-width: 75em) {}
40+
/* 弹窗的样式 */
41+
div[times][type="page"] {
42+
width: 93vw !important;
43+
max-height: 95vh !important;
44+
}
45+
}
846

947
* {
1048
margin: 0;
@@ -216,14 +254,6 @@ tbody tr:nth-child(odd) {
216254
text-align: right;
217255
}
218256

219-
@media screen and (max-width: 35.5em) {
220-
.legal-license, .legal-copyright {
221-
width: 100%;
222-
text-align: center;
223-
margin: 0;
224-
}
225-
}
226-
227257
.pure-button {
228258
font-family: inherit
229259
}

‎static/js/detection.js‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,11 @@
1111
*/
1212

1313
$(function () {
14+
let area_width = "500px";
1415
if (IEVersion() != -1) {
15-
var html = '<div style="font-weight:bold;text-align: center;padding: 20px;font-size: 200%">不支持IE，请使用其他浏览器</div>';
16-
let area_width = "500px";
17-
if (window.innerWidth <= 600) {
18-
area_width = "80%";
19-
}
16+
const html = `<div style="font-weight:bold;text-align: center;padding: 20px;font-size: 200%">
17+
不支持IE，请使用其他浏览器
18+
</div>`;
2019
//自定页
2120
layer.open({
2221
// 在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。
@@ -29,6 +28,14 @@ $(function () {
2928
closeBtn: 0
3029
});
3130
}
31+
/**
32+
* 监听窗口变化
33+
*/
34+
window.onresize = function () {
35+
if (window.innerWidth <= 600) {
36+
area_width = "80%";
37+
}
38+
}
3239
})
3340

3441
/**

‎static/js/index.js‎

Lines changed: 37 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,14 @@ import http from "./utils/http.js";
1414
import array from "./utils/array.js";
1515
import string from "./utils/string.js";
1616

17-
// ECMAScript6指定元素添加事件
18-
// document.querySelector("#id").addEventListener("click", getKey);
17+
let bsAreaWidth = "";
18+
let keyAreaWidth = "";
19+
let nsdAreaWidth = "";
1920

2021

22+
/**
23+
* 监听窗口变化
24+
*/
2125
$(function () {
2226
$.ajax({
2327
url: "/SystemInfo",
@@ -27,8 +31,31 @@ $(function () {
2731
$(".version").text(result.data.Version);
2832
}
2933
})
34+
window.onload = function () {
35+
area();
36+
}
37+
window.onresize = function () {
38+
area();
39+
}
3040
})
3141

42+
function area() {
43+
if (window.innerWidth <= 419) {
44+
bsAreaWidth = "95%";
45+
keyAreaWidth = "80%";
46+
nsdAreaWidth = "80%";
47+
} else if (window.innerWidth <= 768) {
48+
bsAreaWidth = "80%";
49+
keyAreaWidth = "50%";
50+
nsdAreaWidth = "50%";
51+
} else {
52+
bsAreaWidth = "60%";
53+
keyAreaWidth = "40%";
54+
nsdAreaWidth = "50%";
55+
}
56+
}
57+
58+
3259
// ================================== 获取Netsarang激活key ===================================
3360

3461
/**
@@ -135,27 +162,21 @@ window.getKey = function getKey() {
135162
let appName = $("#app").find("option:selected").text();
136163
log.info(JSON.stringify(result));
137164
if (result.code == 200) {
138-
let html = `<div style='width:100%;height:100%;padding:5%;'><p><b>产品：</b>${appName}</p><hr />`;
165+
let html = `<div style='padding:5%;'><p><b>产品：</b>${appName}</p><hr />`;
139166
if (company == "torchsoft") {
140167
html = `${html}<p><b>许可证数量：</b>${version}</p><hr />`;
141168
} else {
142169
html = `${html}<p><b>版本：</b>${version}</p><hr />`;
143170
}
144171
html = `${html}<p><b>key：</b>
145-
<pre style='background: black;color:#66FF66;padding:5%;'>${result.data.key}</pre>
146-
</p><hr /></div>`;
147-
148-
let area_width = "30%";
149-
if (window.innerWidth <= 419) {
150-
area_width = "80%";
151-
} else if (window.innerWidth <= 768) {
152-
area_width = "50%";
153-
}
172+
<pre style='background: black;color:#66FF66;padding:5%;'>${result.data.key}</pre>
173+
</p><hr /></div>`;
174+
154175
//自定页
155176
layer.open({
156177
// 在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。
157178
// 当你宽高都要定义时，你可以area: ['500px', '300px']
158-
area: [area_width],
179+
//area: [keyAreaWidth],
159180
type: 1,
160181
icon: 1,
161182
// 样式类名,目前layer内置的skin有：layui-layer-lan、layui-layer-molv
@@ -205,21 +226,12 @@ window.netSarangDownload = function netSarangDownload() {
205226
layer.close(index);
206227
let appName = $("#app").find("option:selected").text();
207228
if (result.code == 200) {
208-
let html = `<div style='width:100%;height:100%;padding:5%;text-align:center;word-wrap:break-word;'>
229+
let html = `<div style='padding:5%;text-align:center;word-wrap:break-word;'>
209230
<p><b>${appName} 下载地址：</b></p>
210231
<p><a href='${result.data.url}' target='_blank'>${result.data.url}</a></p>
211232
</div>`;
212-
let area_width = "40%";
213-
if (window.innerWidth <= 419) {
214-
area_width = "80%";
215-
} else if (window.innerWidth <= 768) {
216-
area_width = "50%";
217-
}
218233
//自定页
219234
layer.open({
220-
// 在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。
221-
// 当你宽高都要定义时，你可以area: ['500px', '300px']
222-
area: [area_width],
223235
type: 1,
224236
icon: 1,
225237
// 样式类名,目前layer内置的skin有：layui-layer-lan、layui-layer-molv
@@ -284,9 +296,7 @@ window.beautifyCode = function beautifyCode() {
284296
}
285297
if ("online" == beautification) {
286298
onlineBeautifier(code);
287-
288299
} else if ("offline" == beautification) {
289-
290300
let indentation = $(".pure-button-active").attr("id");
291301
if (util.isEmpty(indentation)) {
292302
layer.msg("请选择缩进方式！");
@@ -347,12 +357,10 @@ function activateBeautifierListener(contents, indentCode, indentation) {
347357
layer.msg("请输入配置代码！");
348358
return;
349359
}
350-
351360
modifyOptions({INDENTATION});
352361
// 将文件拆分为行，清理空格
353362
let cleanLines = clean_lines(contents);
354363

355-
356364
// 加入左括号（如果用户希望如此）默认为true
357365
let trailingBlankLines;
358366
if ("indentWay1" == indentation) {
@@ -362,7 +370,6 @@ function activateBeautifierListener(contents, indentCode, indentation) {
362370
}
363371
// 加入左括号并且不要换行
364372
else if ("indentWay2" == indentation) {
365-
366373
trailingBlankLines = false;
367374
modifyOptions({trailingBlankLines});
368375
cleanLines = join_opening_bracket(cleanLines);
@@ -389,20 +396,10 @@ function activateBeautifierListener(contents, indentCode, indentation) {
389396
* @return
390397
*/
391398
function beautifySuccess(contents) {
392-
let html = `<pre style='background: black;color:#66FF66;width: 100%;height: 100%;margin: 0px;padding: 10px;'>
393-
${contents}
394-
</pre>`;
395-
let area_width = "60%";
396-
if (window.innerWidth <= 419) {
397-
area_width = "95%";
398-
} else if (window.innerWidth <= 768) {
399-
area_width = "80%";
400-
}
399+
let html = "<pre style='max-height: calc(93vh);background: black;color: #66FF66;margin: 0px;padding:" +
400+
" 10px;'>" + contents + "</pre>";
401401
//自定页
402402
layer.open({
403-
// 在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。
404-
// 当你宽高都要定义时，你可以area: ['500px', '300px']
405-
area: [area_width, "80%"],
406403
type: 1,
407404
icon: 1,
408405
skin: 'layui-layer-lan', //样式类名,目前layer内置的skin有：layui-layer-lan、layui-layer-molv

0 commit comments

Comments
 (0)