You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
1.7 KiB
96 lines
1.7 KiB
<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>
|
|
|