File tree Expand file tree Collapse file tree 2 files changed +65
-1
lines changed
src/CodeWF/Pages/Tool/Converter Expand file tree Collapse file tree 2 files changed +65
-1
lines changed Original file line number Diff line number Diff line change 34
34
</div >
35
35
<div class =" input-group" >
36
36
<label for =" title" >标题</label >
37
- <input type =" text" id =" title" placeholder =" 临时停靠,请多关照 " value =" 临时停靠,请多关照 " />
37
+ <input type =" text" id =" title" placeholder =" 扫码挪车 " value =" 扫码挪车 " />
38
38
</div >
39
39
<div class =" button-group" >
40
40
<button class =" primary-button" onclick =" generateQrCode()" >
Original file line number Diff line number Diff line change
1
+ /* 修改按钮组样式 */
2
+ .button-group {
3
+ margin : 20px 0 ;
4
+ display : flex;
5
+ justify-content : center; /* 按钮居中 */
6
+ width : 100% ;
7
+ }
8
+
9
+ .primary-button {
10
+ background-color : # 3385ff ;
11
+ color : white;
12
+ border : none;
13
+ padding : 12px 32px ; /* 增加水平内边距 */
14
+ border-radius : 8px ;
15
+ font-size : 1rem ;
16
+ cursor : pointer;
17
+ transition : all 0.3s ;
18
+ display : inline-flex; /* 改为inline-flex */
19
+ align-items : center;
20
+ justify-content : center;
21
+ gap : 8px ;
22
+ min-width : 160px ; /* 设置最小宽度 */
23
+ }
24
+
25
+ /* 优化二维码容器的响应式显示 */
26
+ .qr-code-container {
27
+ margin-top : 20px ;
28
+ text-align : center;
29
+ width : 100% ;
30
+ padding : 0 15px ;
31
+ }
32
+
33
+ .qr-code-container img {
34
+ width : 100% ; /* 改为百分比宽度 */
35
+ max-width : 300px ; /* 限制最大宽度 */
36
+ height : auto; /* 保持图片比例 */
37
+ margin : 0 auto 15px ; /* 上下间距调整 */
38
+ display : block; /* 块级显示确保居中 */
39
+ }
40
+
41
+ /* 优化操作按钮布局 */
42
+ .action-buttons {
43
+ display : flex;
44
+ justify-content : center;
45
+ gap : 20px ;
46
+ margin-top : 15px ;
47
+ flex-wrap : wrap; /* 在小屏幕上允许换行 */
48
+ padding : 0 10px ;
49
+ }
50
+
51
+ /* 响应式调整 */
52
+ @media (max-width : 360px ) {
53
+ .qr-code-container {
54
+ padding : 0 10px ;
55
+ }
56
+
57
+ .qr-code-container img {
58
+ max-width : 260px ; /* 在小屏幕上减小最大宽度 */
59
+ }
60
+
61
+ .action-buttons {
62
+ gap : 15px ;
63
+ }
64
+ }
You can’t perform that action at this time.
0 commit comments