|
@@ -0,0 +1,112 @@
|
|
|
+<script lang="ts" setup></script>
|
|
|
+<template>
|
|
|
+ <div class="qr-scanner w-full h-full pos-absolute">
|
|
|
+ <div class="box">
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="angle"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<style lang="scss">
|
|
|
+.qr-scanner {
|
|
|
+ background-color: #111;
|
|
|
+ background-image: linear-gradient(
|
|
|
+ 0deg,
|
|
|
+ transparent 24%,
|
|
|
+ rgba(32, 255, 77, 0.1) 25%,
|
|
|
+ rgba(32, 255, 77, 0.1) 26%,
|
|
|
+ transparent 27%,
|
|
|
+ transparent 74%,
|
|
|
+ rgba(32, 255, 77, 0.1) 75%,
|
|
|
+ rgba(32, 255, 77, 0.1) 76%,
|
|
|
+ transparent 77%,
|
|
|
+ transparent
|
|
|
+ ),
|
|
|
+ linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ transparent 24%,
|
|
|
+ rgba(32, 255, 77, 0.1) 25%,
|
|
|
+ rgba(32, 255, 77, 0.1) 26%,
|
|
|
+ transparent 27%,
|
|
|
+ transparent 74%,
|
|
|
+ rgba(32, 255, 77, 0.1) 75%,
|
|
|
+ rgba(32, 255, 77, 0.1) 76%,
|
|
|
+ transparent 77%,
|
|
|
+ transparent
|
|
|
+ );
|
|
|
+ background-position: -1rem -1rem;
|
|
|
+ background-size: 3rem 3rem;
|
|
|
+}
|
|
|
+
|
|
|
+.qr-scanner .box {
|
|
|
+ position: relative;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ height: 100%;
|
|
|
+ // width: 75vw;
|
|
|
+ // max-width: 75vh;
|
|
|
+ // height: 75vw;
|
|
|
+ // max-height: 75vh;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 0.1rem solid rgba(0, 255, 51, 0.2);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+}
|
|
|
+
|
|
|
+.qr-scanner .line {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 2px);
|
|
|
+ background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
|
|
|
+ border-bottom: 3px solid #00ff33;
|
|
|
+ transform: translateY(-100%);
|
|
|
+ animation: radar-beam 2s infinite;
|
|
|
+ animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
|
|
|
+ animation-delay: 1.4s;
|
|
|
+}
|
|
|
+
|
|
|
+.qr-scanner .box:after,
|
|
|
+.qr-scanner .box:before,
|
|
|
+.qr-scanner .angle:after,
|
|
|
+.qr-scanner .angle:before {
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ width: 3vw;
|
|
|
+ height: 3vw;
|
|
|
+ content: '';
|
|
|
+
|
|
|
+ border: 0.2rem solid transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.qr-scanner .box:after,
|
|
|
+.qr-scanner .box:before {
|
|
|
+ top: 0;
|
|
|
+ border-top-color: #00ff33;
|
|
|
+}
|
|
|
+
|
|
|
+.qr-scanner .angle:after,
|
|
|
+.qr-scanner .angle:before {
|
|
|
+ bottom: 0;
|
|
|
+ border-bottom-color: #00ff33;
|
|
|
+}
|
|
|
+
|
|
|
+.qr-scanner .box:before,
|
|
|
+.qr-scanner .angle:before {
|
|
|
+ left: 0;
|
|
|
+ border-left-color: #00ff33;
|
|
|
+}
|
|
|
+
|
|
|
+.qr-scanner .box:after,
|
|
|
+.qr-scanner .angle:after {
|
|
|
+ right: 0;
|
|
|
+ border-right-color: #00ff33;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes radar-beam {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(-100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|