bug修复迭代

src/views/verify/VerifyView.vue

@@ -167,18 +167,31 @@ onBeforeUnmount(stopScan)
       </div>
       <button v-else class="scan-button" type="button" :disabled="loading" @click="startScan">
         <QrCode :size="54" />
-        <span>{{ loading ? '正在打开摄像头' : '点击进行扫码' }}</span>
+        <strong>{{ loading ? '正在打开摄像头' : '点击进行扫码' }}</strong>
+        <span>请将客人的核销二维码置于取景框内</span>
       </button>
       <p v-if="scanError" class="scan-error">{{ scanError }}</p>
     </section>
+
+    <section class="scan-tips">
+      <div>
+        <strong>核销前确认</strong>
+        <span>扫码后仍需核对订单、套餐和可核销数量。</span>
+      </div>
+      <div>
+        <strong>识别不成功</strong>
+        <span>调整距离、光线，或请客人提高屏幕亮度。</span>
+      </div>
+    </section>
   </section>
 </template>
 
 <style scoped>
 .scan-panel {
-  padding: 18px;
+  padding: 16px;
   background:
-    linear-gradient(135deg, rgba(15, 139, 114, 0.12), rgba(243, 165, 29, 0.12)),
+    radial-gradient(circle at 50% 0, rgba(19, 144, 111, 0.16), transparent 190px),
+    linear-gradient(135deg, rgba(15, 139, 114, 0.1), rgba(255, 247, 223, 0.78)),
     var(--surface);
 }
 
@@ -186,7 +199,8 @@ onBeforeUnmount(stopScan)
   position: relative;
   overflow: hidden;
   min-height: 260px;
-  border-radius: var(--radius);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: var(--panel-radius);
   background: #111827;
 }
 
@@ -236,14 +250,37 @@ onBeforeUnmount(stopScan)
 .scan-button {
   display: grid;
   width: 100%;
-  min-height: 156px;
-  border: 1px dashed rgba(15, 139, 114, 0.45);
-  border-radius: var(--radius);
-  background: rgba(255, 255, 255, 0.78);
+  min-height: 174px;
+  padding: 20px 16px;
+  border: 1px dashed rgba(15, 139, 114, 0.5);
+  border-radius: var(--panel-radius);
+  background: rgba(255, 255, 255, 0.74);
   color: var(--primary-deep);
-  font-weight: 750;
-  gap: 10px;
+  gap: 8px;
   place-items: center;
+  transition:
+    border-color var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out),
+    background-color var(--duration-fast) var(--ease-out);
+}
+
+.scan-button:active {
+  border-color: var(--primary);
+  background: rgba(255, 255, 255, 0.9);
+  transform: scale(0.99);
+}
+
+.scan-button strong {
+  color: var(--text-strong);
+  font-size: 17px;
+  font-weight: 750;
+}
+
+.scan-button span {
+  max-width: 210px;
+  color: var(--text-muted);
+  font-size: 13px;
+  line-height: 1.45;
 }
 
 .scan-button:disabled {
@@ -256,4 +293,30 @@ onBeforeUnmount(stopScan)
   font-size: 12px;
   line-height: 1.5;
 }
+
+.scan-tips {
+  display: grid;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.scan-tips > div {
+  display: grid;
+  gap: 4px;
+  padding: 12px 13px;
+  border: 1px solid rgba(202, 214, 208, 0.78);
+  border-radius: var(--panel-radius);
+  background: rgba(255, 255, 255, 0.62);
+}
+
+.scan-tips strong {
+  color: var(--text-strong);
+  font-size: 14px;
+}
+
+.scan-tips span {
+  color: var(--text-muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
 </style>