gxgx

src/components/sweepPage_html5_qrcode.vue

@@ -3,16 +3,16 @@
     <div id="reader" style="width: 100vw;height: 100vh;position: relative;"></div>
     <div class="ku-scanner">
       <div class="ku-scanner-content">
-      <div class="ku-scanner-tooltip">
-        将二维码/条码放入框内，即自动扫描
-        {{ msg }}
-      </div>
-      <div class="ku-scanner-section">
-        <div class="ku-scanner-section-animation-line"></div>
-        <div class="ku-scanner-section-angle"></div>
+        <div class="ku-scanner-tooltip">
+          将二维码/条码放入框内，即自动扫描
+          {{ msg }}
+        </div>
+        <div class="ku-scanner-section">
+          <div class="ku-scanner-section-animation-line"></div>
+          <div class="ku-scanner-section-angle"></div>
+        </div>
       </div>
     </div>
-    </div>
     <!-- <QrcodeStream
       class="ku-scanner"
       ref="QrcodeStreamRef"
@@ -135,11 +135,7 @@ export default {
       //     this.msg += err
       //   })
       this.cameras = new Html5Qrcode('reader')
-      this.cameras.start(
-        { facingMode: { exact: 'environment' } },
-        { fps: 10 },
-        this.CamerasSuccess
-      )
+      this.cameras.start({ facingMode: { exact: 'environment' } }, { fps: 10 }, this.CamerasSuccess)
     },
     CamerasSuccess(decodedText, decodedResult) {
       console.log(decodedResult)
@@ -335,18 +331,26 @@ export default {
   }
 }
 
-#reader__dashboard_section_cameras,
-#reader__dashboard_section_swaplink,
-#reader__header_message,
-#reader__scan_region > div {
-  display: none !important; /* 隐藏默认的一些 UI */
+#reader {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  object-fit: cover; /* 使视频自适应填充 */
 }
+// #reader__dashboard_section_cameras,
+// #reader__dashboard_section_swaplink,
+// #reader__header_message,
+// #reader__scan_region > div {
+//   display: none !important; /* 隐藏默认的一些 UI */
+// }
 
-#reader__scan_region video {
-  width: 100% !important;
-  height: 100% !important;
-  object-fit: cover; /* 视频填充满容器，裁切多余部分 */
-}
+// #reader__scan_region video {
+//   width: 100% !important;
+//   height: 100% !important;
+//   object-fit: cover; /* 视频填充满容器，裁切多余部分 */
+// }
 
 // #reader__dashboard {
 //   display: none !important;