<template>
	<view>
		<view class="scan-view">
			<view class='scan-border'>
				<camera class='scan-camera' mode="scanCode" binderror="cameraError" bindscancode='scancode' frame-size='large'>
					<cover-image class='cover-corner cover-left-top' src='/images/left-top.png'></cover-image>
					<cover-image class='cover-corner cover-right-top' src='/images/right-top.png'></cover-image>
					<cover-image class='cover-corner cover-left-bottom' src='/images/left-bottom.png'></cover-image>
					<cover-image class='cover-corner cover-right-bottom' src='/images/right-bottom.png'></cover-image>

					<!-- <cover-view class='scan-animation' animation="{{animation}}"></cover-view> -->
				</camera>
				<!-- 这里可以处理其他内容 -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped>
.scan-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #B9BEC4;
  position: fixed;
  align-items: center;
  justify-content: space-around;
}
 
.scan-border {
  width: 94%;
  height: 94%;
  border: 6rpx solid #08FDFE;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.scan-camera {
  width: 500rpx;
  height: 500rpx;
  border-radius: 6rpx;
  margin: 30rpx;
}
 
.cover-corner {
  width: 80rpx;
  height: 80rpx;
  position: absolute;
}
 
.cover-left-top {
  left: 0;
  top: 0;
}
 
.cover-right-top {
  right: 0;
  top: 0;
}
 
.cover-left-bottom {
  left: 0;
  bottom: 0;
}
 
.cover-right-bottom {
  right: 0;
  bottom: 0;
}
 
.scan-animation {
  position: absolute;
  top: -10rpx;
  left: 10rpx;
  width: 480rpx;
  height: 8rpx;
  background-color: #08FDFE;
  border-radius: 50%;
}
</style>
