From 6a972c54fe99a186b5885db1b1319643ce9679dd Mon Sep 17 00:00:00 2001
From: shinnosuke <tantao@1hoper.com>
Date: 星期三, 26 八月 2026 18:43:38 +0800
Subject: [PATCH] 又又更新
---
rencaika_merchant/pages/scan/scan.uvue | 24 ++++++++++++++----------
1 files changed, 14 insertions(+), 10 deletions(-)
diff --git a/rencaika_merchant/pages/scan/scan.uvue b/rencaika_merchant/pages/scan/scan.uvue
index 26c2009..d0487d6 100644
--- a/rencaika_merchant/pages/scan/scan.uvue
+++ b/rencaika_merchant/pages/scan/scan.uvue
@@ -3,10 +3,12 @@
<camera class="scan-camera" device-position="back" flash="off" mode="scanCode" @scancode="onScanCode" @error="onCameraError"></camera>
<cover-view class="camera-shade"></cover-view>
<cover-view class="back-button" @tap.stop="goBack"><cover-image class="back-icon" src="/static/icons/lucide/back-left.svg"></cover-image></cover-view>
- <cover-view class="scan-frame" :class="scanState != 'scanning' ? 'scan-paused' : ''">
- <cover-view class="frame-top"></cover-view><cover-view class="frame-bottom"></cover-view>
+ <cover-view class="scan-frame">
+ <cover-view class="scan-window">
+ <cover-view class="frame-top"></cover-view><cover-view class="frame-bottom"></cover-view>
+ <cover-view v-if="scanState == 'scanning'" class="scan-line"></cover-view>
+ </cover-view>
<cover-view class="frame-corner corner-tl"></cover-view><cover-view class="frame-corner corner-tr"></cover-view><cover-view class="frame-corner corner-bl"></cover-view><cover-view class="frame-corner corner-br"></cover-view>
- <cover-view v-if="scanState == 'scanning'" class="scan-line"></cover-view>
</cover-view>
<cover-view v-if="scanState == 'scanning'" class="scan-tip">将取景框对准二维码，即可自动扫描</cover-view>
@@ -194,10 +196,12 @@
.scan-camera { width: 100%; height: 100vh; background-color: #000000; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.camera-shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.32); }
.back-button { display: flex; width: 72rpx; height: 72rpx; justify-content: center; align-items: center; position: absolute; top: 82rpx; left: 28rpx; z-index: 20; }
- .back-icon { width: 40rpx; height: 40rpx; }
- .scan-frame { width: 570rpx; height: 570rpx; position: absolute; top: 382rpx; left: 90rpx; z-index: 10; background-color: rgba(40, 137, 91, 0.22); box-sizing: border-box; }
- .scan-frame.scan-paused { background-color: rgba(24, 36, 31, 0.42); }
- .frame-top, .frame-bottom { width: 100%; height: 4rpx; position: absolute; left: 0; background-color: #6BE2AD; opacity: 0.85; }
+ .back-icon { width: 40rpx; height: 40rpx; filter: invert(1); }
+ .scan-frame { width: 460rpx; height: 460rpx; position: absolute; top: 430rpx; left: 145rpx; z-index: 10; box-sizing: border-box; }
+ .scan-window { width: 460rpx; height: 286rpx; position: absolute; top: 0; left: 0; background-color: rgba(40, 137, 91, 0.22); }
+ .frame-top, .frame-bottom { height: 4rpx; position: absolute; background-color: #6BE2AD; opacity: 0.85; }
+ .frame-top { width: 382rpx; left: 78rpx; }
+ .frame-bottom { width: 100%; left: 0; }
.frame-top { top: 0; }
.frame-bottom { bottom: 0; }
.frame-corner { width: 42rpx; height: 42rpx; position: absolute; border-color: #69E6B1; box-sizing: border-box; }
@@ -206,8 +210,8 @@
.corner-bl { bottom: 0; left: 0; border-bottom-width: 7rpx; border-left-width: 7rpx; }
.corner-br { right: 0; bottom: 0; border-right-width: 7rpx; border-bottom-width: 7rpx; }
.scan-line { width: 100%; height: 3rpx; position: absolute; top: 0; left: 0; background-color: rgba(133, 255, 192, 0.9); box-shadow: 0 0 15rpx rgba(111, 241, 170, 0.8); animation: scan-line-move 1800ms ease-in-out infinite alternate; }
- .scan-tip { width: 100%; position: absolute; top: 1116rpx; left: 0; z-index: 10; color: #FFFFFF; font-size: 27rpx; line-height: 38rpx; text-align: center; }
- .status-panel { display: flex; width: 620rpx; min-height: 330rpx; padding: 42rpx 38rpx 34rpx; flex-direction: column; align-items: center; position: absolute; left: 65rpx; bottom: 120rpx; z-index: 30; border-radius: 36rpx; background-color: rgba(255, 255, 255, 0.96); box-sizing: border-box; }
+ .scan-tip { width: 100%; position: absolute; top: 975rpx; left: 0; z-index: 10; color: #FFFFFF; font-size: 27rpx; line-height: 38rpx; text-align: center; }
+ .status-panel { display: none; }
.loading-spinner { width: 58rpx; height: 58rpx; border-width: 6rpx; border-style: solid; border-color: #FFD5BF; border-top-color: #FF6B2C; border-radius: 50%; animation: loading-rotate 800ms linear infinite; }
.status-mark { display: flex; width: 64rpx; height: 64rpx; justify-content: center; align-items: center; border-radius: 32rpx; color: #FFFFFF; font-size: 38rpx; line-height: 64rpx; font-weight: 700; text-align: center; }
.success-mark { background-color: #35B879; }
@@ -226,6 +230,6 @@
.half-action { width: 48%; }
.status-actions .primary-action.half-action { margin-left: 4%; }
.full-action { width: 100%; }
- @keyframes scan-line-move { from { transform: translateY(0); } to { transform: translateY(566rpx); } }
+ @keyframes scan-line-move { from { transform: translateY(0); } to { transform: translateY(282rpx); } }
@keyframes loading-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
</style>
--
Gitblit v1.7.1