diff --git a/css/qr.css b/css/qr.css
index 776dfe5..85f7b07 100644
--- a/css/qr.css
+++ b/css/qr.css
@@ -3,7 +3,7 @@
/* ========== 悬浮按钮 ========== */
#qr-btn {
position: fixed;
- bottom: 100px;
+ bottom: 20px;
left: 20px;
width: 44px;
height: 44px;
diff --git a/css/style.css b/css/style.css
index 546adc2..bb57b6e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -188,39 +188,144 @@ html, body {
z-index: 10000;
}
-/* 移动端:允许横向滚动 */
+/* 移动端:两行整洁布局 @ 375px 友好 */
@media (max-width: 768px) {
.editor-toolbar {
- justify-content: flex-start;
- overflow-x: auto;
- -webkit-overflow-scrolling: touch;
- scrollbar-width: none;
- padding: 8px;
- }
- .editor-toolbar::-webkit-scrollbar {
- display: none;
+ justify-content: center;
+ overflow: visible;
+ padding: 6px 10px;
+ height: auto;
+ box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.toolbar-group {
- gap: 2px;
- flex-shrink: 0;
- width: 100%;
+ gap: 6px;
+ flex-wrap: wrap;
justify-content: center;
+ align-items: center;
+ width: 100%;
+ padding: 4px 0;
+ }
+ /* 分隔线在折叠布局中隐藏 */
+ .toolbar-divider {
+ display: none;
}
.toolbar-btn {
- width: 32px;
- height: 32px;
+ width: 30px;
+ height: 30px;
font-size: 14px;
+ min-width: 0;
+ border-radius: 6px;
+ background: #f5f5f5;
+ border-color: #e0e0e0;
+ }
+ .toolbar-btn:active {
+ background: #e0e0e0;
+ transform: scale(0.95);
+ }
+ .toolbar-btn.active {
+ background: #4a90e2;
+ color: #fff;
+ border-color: #4a90e2;
+ }
+ .toolbar-btn.italic {
+ font-weight: normal;
+ font-style: italic;
+ font-family: 'Times New Roman', serif;
+ font-size: 17px;
}
.toolbar-label {
- font-size: 12px;
+ font-size: 11px;
+ gap: 3px;
+ padding: 2px 6px;
+ background: #f8f8f8;
+ border-radius: 6px;
+ border: 1px solid #eee;
}
.toolbar-label span:first-child {
display: inline;
+ color: #888;
+ }
+ .toolbar-label input[type="color"] {
+ width: 24px;
+ height: 24px;
+ padding: 1px;
+ border-radius: 4px;
+ border: 1px solid #ddd;
+ cursor: pointer;
+ }
+ .toolbar-label select {
+ max-width: 70px;
+ font-size: 11px;
+ padding: 2px 4px;
+ border-radius: 4px;
+ border: 1px solid #ddd;
+ background: #fff;
+ }
+ .toolbar-label select option {
+ font-size: 12px;
+ }
+ .weight-slider {
+ width: 56px;
+ accent-color: #4a90e2;
+ }
+ #weightValue {
+ min-width: 20px;
+ text-align: center;
+ font-size: 11px;
+ font-weight: bold;
+ color: #333;
}
.roller-picker {
- min-width: 50px;
- height: 32px;
- padding: 2px 4px;
+ min-width: 44px;
+ height: 28px;
+ padding: 1px 4px;
+ border-radius: 6px;
+ border: 1px solid #ddd;
+ background: #fff;
+ }
+ .roller-value {
+ font-size: 13px;
+ min-width: 20px;
+ font-weight: bold;
+ }
+ .roller-arrow {
+ font-size: 8px;
+ padding: 1px 3px;
+ }
+ /* 背景图工具栏仅两项,保持单行 */
+ .bg-tools {
+ flex-wrap: nowrap;
+ }
+
+ /* ===== 顶部工具栏 移动端优化 ===== */
+ .toolbar {
+ padding: 6px 8px;
+ gap: 2px;
+ }
+ .btn {
+ min-width: 44px;
+ height: 28px;
+ padding: 0 5px;
+ font-size: 11px;
+ border-radius: 4px;
+ }
+ .btn-primary {
+ min-width: 60px;
+ height: 28px;
+ padding: 0 8px;
+ font-size: 12px;
+ }
+ .toolbar-btn-icon {
+ width: 22px;
+ height: 22px;
+ font-size: 11px;
+ }
+ .toolbar-action-group {
+ gap: 1px;
+ }
+ .toolbar-divider-v {
+ height: 16px;
+ margin: 0 1px;
}
}
@@ -323,6 +428,14 @@ html, body {
margin: 0;
}
+.weight-slider {
+ width: 80px;
+ height: 32px;
+ cursor: pointer;
+ accent-color: #4a90e2;
+ margin: 0;
+}
+
/* 旋转度数显示固定宽度 */
#rotateValue {
display: inline-block;
diff --git a/index.html b/index.html
index e84b058..d9c91a7 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,12 @@
-
+
+