|  | @@ -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>
 |