diff --git a/css/qr.css b/css/qr.css index fe0dc40..900b6a9 100644 --- a/css/qr.css +++ b/css/qr.css @@ -1,6 +1,6 @@ /* 二维码功能样式 */ -/* 悬浮按钮 */ +/* ========== 悬浮按钮 ========== */ #qr-btn { position: fixed; bottom: 100px; @@ -29,7 +29,7 @@ background: #3a7bc8; } -/* 弹窗 */ +/* ========== 弹窗 ========== */ #qr-modal { display: none; position: fixed; @@ -128,9 +128,32 @@ color: #fff; } -/* 画布上的二维码 */ +/* ========== 画布上的二维码 ========== */ .qr-item { position: absolute; cursor: move; user-select: none; + touch-action: none; +} + +/* 选中状态 */ +.qr-item.qr-selected { + outline: 2px solid #4a90e2; + outline-offset: 2px; +} + +/* ========== 二维码工具栏 - 与背景图工具栏保持一致 ========== */ +.qr-tools { + display: none; +} + +.qr-tools.active { + display: flex; +} + +/* 数值显示固定宽度,单独占位 */ +#qrOpacityValue, #qrScaleValue { + display: inline-block; + min-width: 40px; + text-align: center; } diff --git a/index.html b/index.html index b6d58ce..8535679 100644 --- a/index.html +++ b/index.html @@ -74,6 +74,20 @@
+ +
+ +
+ +