diff --git a/hybrid/html/scanner.html b/hybrid/html/scanner.html index 6b8834f..f24de4d 100644 --- a/hybrid/html/scanner.html +++ b/hybrid/html/scanner.html @@ -20,60 +20,32 @@ position: absolute; top: 0; left: 0; } - /* 隐藏 quagga 的取景框 canvas */ - #scanner-container canvas { - display: none !important; - } - /* 关闭按钮 */ + #scanner-container canvas { display: none !important; } .close-btn { - position: fixed; - top: 60rpx; - left: 30rpx; - width: 60rpx; - height: 60rpx; + position: fixed; top: 30px; left: 15px; + width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.2); - display: flex; - align-items: center; - justify-content: center; + display: flex; align-items: center; justify-content: center; z-index: 9999; - color: #fff; - font-size: 36rpx; + color: #fff; font-size: 22px; } - /* tip */ .tip { - position: fixed; - bottom: 120rpx; - left: 0; - right: 0; - text-align: center; - z-index: 9999; + position: fixed; bottom: 60px; left: 0; right: 0; + text-align: center; z-index: 9999; } .tip-text { display: inline-block; - color: #fff; - font-size: 28rpx; + color: #fff; font-size: 14px; background: rgba(0,0,0,0.5); - padding: 12rpx 30rpx; - border-radius: 40rpx; + padding: 6px 16px; border-radius: 20px; } - /* 加载/错误提示 */ .loading { - position: fixed; - top: 50%; - left: 50%; + position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); - color: #fff; - font-size: 28rpx; - z-index: 9999; + color: #fff; font-size: 14px; z-index: 9999; text-align: center; } - /* 适配 rpx 单位:假设 750rpx = 屏幕宽 */ - @media (min-width: 400px) { - .close-btn { width: 40px; height: 40px; font-size: 22px; top: 40px; left: 20px; } - .tip-text { font-size: 16px; padding: 8px 20px; border-radius: 28px; } - .tip { bottom: 80px; } - }
@@ -82,17 +54,24 @@