Skip to content

Commit 9616281

Browse files
CaiJingLongCaiJingLong
committed
修改了页面的样式
1 parent 4716743 commit 9616281

File tree

3 files changed

+95
-56
lines changed

3 files changed

+95
-56
lines changed

‎lib/json_generator.dart

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,22 @@ bool isCamelCase = true;
1111

1212
var downloadFileName = "";
1313

14-
const defaultValue = """{
15-
"body": "",
16-
"data": [1],
17-
"input_content":["1"],
18-
"list1":[{"name":"hello"}],
19-
"number": [1.02],
20-
"user":{"name":"abc"}
21-
}""";
14+
// const defaultValue = """{
15+
// "body": "",
16+
// "data": [1],
17+
// "input_content":["1"],
18+
// "list1":[{"name":"hello"}],
19+
// "number": [1.02],
20+
// "user":{"name":"abc"}
21+
// }""";
22+
const defaultValue = "";
2223

2324
void main() {
2425
TextAreaElement jsonInput = querySelector("#json");
2526
jsonInput.value = defaultValue;
2627

2728
jsonInput.onInput.listen((event) {
29+
print(jsonInput.value);
2830
refreshData();
2931
});
3032

‎web/index.html

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,42 +7,46 @@
77
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
88
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
99
<meta name="scaffolded-by" content="https://github.com/google/stagehand" />
10-
<title>hello_world</title>
10+
<title>json2dart_for_json_serializable</title>
1111
<link rel="stylesheet" href="styles.css">
1212
<link rel="icon" href="favicon.ico">
1313
<script defer src="main.dart.js"></script>
1414
</head>
1515

1616
<body>
17-
17+
<h1>为了便利使用json_serializable库</h1>
1818
<div>
19-
<div id="input" class="textarea">
20-
<div class="top">
21-
将json粘贴至左边
22-
</div>
23-
<textarea id="json" title="json字符串"></textarea>
24-
<div>
25-
<button id="format">格式化</button>
26-
</div>
19+
<div class="title">
20+
<span class="half_span">将json粘贴至左边</span>
21+
<span class="half_span">
22+
<div class="result_title">
23+
类名称
24+
<input id="out_entity_name" />
25+
<input type="checkbox" id="use_json_key" />
26+
<span id="check_label">jsonKey annotation</span>
27+
<input type="checkbox" id="camelCase" />
28+
<span id="camelCaseLabel">use camelCase</span>
29+
</div>
30+
<div id="file_name"></div>
31+
</span>
32+
</div>
33+
<div class="content">
34+
<span class="half_span">
35+
<textarea id="json" title="json字符串" class="content_area"></textarea>
36+
</span>
37+
<span class="half_span">
38+
<textarea id="result" title="结果" class="content_area"></textarea>
39+
</span>
2740
</div>
28-
<div id="output" class="textarea">
29-
<div class="top"></div>
30-
<div class="result_title">
31-
类名称
32-
<input id="out_entity_name" />
33-
<input type="checkbox" id="use_json_key" />
34-
<span id="check_label">jsonKey annotation</span>
35-
<input type="checkbox" id="camelCase" />
36-
<span id="camelCaseLabel">use camelCase</span>
37-
</div>
38-
<div id="file_name"></div>
39-
<textarea id="result" title="结果"></textarea>
40-
<div>
41+
<div class="func">
42+
<span class="half_span">
43+
<button id="format">格式化</button>
44+
</span>
45+
<span class="half_span">
4146
<button id="copy">复制</button>
4247
<button id="save">下载</button>
43-
</div>
48+
</span>
4449
</div>
45-
4650
</div>
4751
</body>
4852

‎web/styles.css

Lines changed: 56 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,73 @@
22

33
html,
44
body {
5-
width: 100%;
6-
height: 100%;
7-
margin: 0;
8-
padding: 0;
9-
font-family: "Roboto", sans-serif;
5+
width: 100%;
6+
height: 100%;
7+
margin: 0;
8+
padding: 0;
9+
font-family: "Roboto", sans-serif;
1010
}
11-
11+
/*
1212
.top {
13-
height: 4vh;
14-
text-align: center;
15-
padding-top: 1vh;
13+
height: 4vh;
14+
text-align: center;
15+
padding-top: 1vh;
16+
}
17+
18+
.result_title {
19+
padding-bottom: 15px;
1620
}
1721
1822
.textarea {
19-
width: 50%;
20-
height: 90%;
21-
text-align: center;
22-
float: left;
23+
width: 50%;
24+
height: 90%;
25+
text-align: center;
26+
float: left;
27+
}
28+
29+
.content_area {
30+
width: 80%;
31+
height: 90vh;
32+
text-align: center;
33+
float: left;
34+
}
35+
36+
.out_entity_name {
37+
height: 40px;
38+
} */
39+
40+
h1 {
41+
text-align: center;
42+
}
43+
44+
.half_span {
45+
width: 50%;
46+
float: left;
47+
text-align: center;
2348
}
2449

2550
textarea {
26-
width: 90%;
27-
height: 80vh;
51+
width: 86%;
52+
height: 70vh;
2853
}
2954

30-
.result_title {
31-
padding-bottom: 15px;
55+
.content {
56+
padding-top: 5vh;
3257
}
3358

34-
#result {
35-
width: 90%;
36-
height: 70vh;
59+
.func .half_span {
60+
height: 7rem;
61+
padding-top: 1rem;
3762
}
3863

39-
.out_entity_name {
40-
height: 40px;
41-
}
64+
button {
65+
width: 5rem;
66+
height: 2rem;
67+
font-size: 1rem;
68+
}
69+
70+
#file_name {
71+
font-size: 0.5rem;
72+
padding-top: 5px;
73+
color: mediumvioletred;
74+
}

0 commit comments

Comments
 (0)