DaShangDao/daShangDao_scanBook
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:取景框外显示半透明黑色遮罩

Browse Source
This commit is contained in:
ShenQiLun 2026-06-25 17:28:27 +08:00
parent 8d51eabb19
commit 10ccb194d2
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
pages/upload/camera_capture.nvue
View File

@ -12,7 +12,13 @@
@onCameraOpened="onCameraOpened" @onCameraOpened="onCameraOpened"
></ima-camera-view> ></ima-camera-view>
<!-- 正方形取景框（白色边框指示） --> <!-- 正方形取景框外半透明遮罩 -->
<view class="cc-mask" :style="'top:0px;left:0px;width:' + winWidth + 'px;height:' + frameTop + 'px;'"></view>
<view class="cc-mask" :style="'top:' + (frameTop + camSize) + 'px;left:0px;width:' + winWidth + 'px;height:' + (winHeight - frameTop - camSize) + 'px;'"></view>
<view class="cc-mask" :style="'top:' + frameTop + 'px;left:0px;width:' + frameLeft + 'px;height:' + camSize + 'px;'"></view>
<view class="cc-mask" :style="'top:' + frameTop + 'px;left:' + (frameLeft + camSize) + 'px;width:' + (winWidth - frameLeft - camSize) + 'px;height:' + camSize + 'px;'"></view>
<!-- 正方形取景框（白色边框） -->
<view class="cc-frame" :style="'top:' + frameTop + 'px;left:' + frameLeft + 'px;width:' + camSize + 'px;height:' + camSize + 'px;'"></view> <view class="cc-frame" :style="'top:' + frameTop + 'px;left:' + frameLeft + 'px;width:' + camSize + 'px;height:' + camSize + 'px;'"></view>
<!-- ═══ 顶部栏 ═══ --> <!-- ═══ 顶部栏 ═══ -->
@ -170,6 +176,13 @@
background-color: #000000; background-color: #000000;
} }
/* 遮罩（取景框外半透明黑色） */
.cc-mask {
position: absolute;
background-color: rgba(0,0,0,0.55);
z-index: 3;
}
/* 取景框（白色边框，视觉引导） */ /* 取景框（白色边框，视觉引导） */
.cc-frame { .cc-frame {
position: absolute; position: absolute;