.container.data-v-ac60523e { position: relative; width: 100%; height: 100vh; background: #000; } .camera-preview.data-v-ac60523e { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mask.data-v-ac60523e { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .mask-block.data-v-ac60523e { width: 100%; background: rgba(0, 0, 0, 0.5); } .mask-block.top.data-v-ac60523e, .mask-block.bottom.data-v-ac60523e { height: 25%; } .mask-block.middle.data-v-ac60523e { display: flex; flex-direction: row; height: 50%; } .side.data-v-ac60523e { flex: 1; background: rgba(0, 0, 0, 0.5); } .cutout.data-v-ac60523e { width: 100%; height: 60%; aspect-ratio: 1.586; border: 2rpx dashed #fff; position: relative; } .hint.data-v-ac60523e { position: absolute; bottom: 20rpx; width: 100%; text-align: center; color: #fff; font-size: 24rpx; } .controls.data-v-ac60523e { position: absolute; bottom: 50rpx; width: 100%; display: flex; justify-content: center; } .shutter.data-v-ac60523e { width: 300rpx; height: 120rpx; border-radius: 60rpx; background: rgba(255, 255, 255, 0.7); display: flex; justify-content: center; align-items: center; }