236 lines
3.6 KiB
CSS
236 lines
3.6 KiB
CSS
/* ============================================================
|
|
* 商家入驻 - 自定义相机（取景框拍证件）
|
|
* ============================================================ */
|
|
page {
|
|
background: #000;
|
|
}
|
|
|
|
.cam-page {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: #000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 顶部导航 */
|
|
.cam-nav {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 20;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12rpx 24rpx;
|
|
height: 88rpx;
|
|
}
|
|
|
|
.cam-nav-back {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.cam-nav-title {
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.cam-nav-right {
|
|
width: 60rpx;
|
|
}
|
|
|
|
/* 相机取景 */
|
|
.cam-view {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* 取景框遮罩 */
|
|
.cam-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 10;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.cam-frame {
|
|
position: relative;
|
|
border: 2rpx dashed rgba(255, 255, 255, 0.7);
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.frame-landscape {
|
|
width: 86vw;
|
|
height: 54vw;
|
|
}
|
|
|
|
.frame-portrait {
|
|
width: 64vw;
|
|
height: 86vw;
|
|
}
|
|
|
|
.cam-corner {
|
|
position: absolute;
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
border-color: #FF370B;
|
|
border-style: solid;
|
|
border-width: 0;
|
|
}
|
|
|
|
.cam-corner.tl {
|
|
top: -2rpx;
|
|
left: -2rpx;
|
|
border-top-width: 6rpx;
|
|
border-left-width: 6rpx;
|
|
border-top-left-radius: 16rpx;
|
|
}
|
|
|
|
.cam-corner.tr {
|
|
top: -2rpx;
|
|
right: -2rpx;
|
|
border-top-width: 6rpx;
|
|
border-right-width: 6rpx;
|
|
border-top-right-radius: 16rpx;
|
|
}
|
|
|
|
.cam-corner.bl {
|
|
bottom: -2rpx;
|
|
left: -2rpx;
|
|
border-bottom-width: 6rpx;
|
|
border-left-width: 6rpx;
|
|
border-bottom-left-radius: 16rpx;
|
|
}
|
|
|
|
.cam-corner.br {
|
|
bottom: -2rpx;
|
|
right: -2rpx;
|
|
border-bottom-width: 6rpx;
|
|
border-right-width: 6rpx;
|
|
border-bottom-right-radius: 16rpx;
|
|
}
|
|
|
|
.cam-tip {
|
|
margin-top: 36rpx;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
/* 横版/竖版切换 */
|
|
.cam-orient {
|
|
position: absolute;
|
|
bottom: 280rpx;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 20;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.orient-item {
|
|
padding: 12rpx 40rpx;
|
|
border-radius: 40rpx;
|
|
background: rgba(255, 255, 255, 0.18);
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.orient-item.active {
|
|
background: #FF370B;
|
|
color: #fff;
|
|
}
|
|
|
|
/* 底部操作 */
|
|
.cam-actions {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 20;
|
|
height: 240rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.cam-action-side {
|
|
width: 110rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.cam-action-placeholder {
|
|
opacity: 0;
|
|
}
|
|
|
|
.cam-shutter {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
border: 8rpx solid rgba(255, 255, 255, 0.4);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.cam-shutter:active {
|
|
transform: scale(0.94);
|
|
}
|
|
|
|
/* 预览态 */
|
|
.cam-preview {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #000;
|
|
}
|
|
|
|
.cam-preview-actions {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 20;
|
|
height: 200rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 40rpx;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
background: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.prev-btn {
|
|
width: 240rpx;
|
|
height: 88rpx;
|
|
border-radius: 44rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.prev-retake {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: #fff;
|
|
}
|
|
|
|
.prev-submit {
|
|
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
|
color: #fff;
|
|
}
|