Skip to content

Commit bff8f52

Browse files
committed
fix style;
1 parent f5a7e54 commit bff8f52

File tree

2 files changed

+65
-1
lines changed

2 files changed

+65
-1
lines changed

src/CodeWF/Pages/Tool/Converter/NuoChe.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
</div>
3535
<div class="input-group">
3636
<label for="title">标题</label>
37-
<input type="text" id="title" placeholder="临时停靠,请多关照" value="临时停靠,请多关照" />
37+
<input type="text" id="title" placeholder="扫码挪车" value="扫码挪车" />
3838
</div>
3939
<div class="button-group">
4040
<button class="primary-button" onclick="generateQrCode()">
Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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+
}

0 commit comments

Comments
 (0)