diff --git a/pages/upload/camera_capture.nvue b/pages/upload/camera_capture.nvue index 2a64b78..c567c35 100644 --- a/pages/upload/camera_capture.nvue +++ b/pages/upload/camera_capture.nvue @@ -1,9 +1,9 @@ @@ -90,9 +81,6 @@ winWidth: 750, winHeight: 1334, camSize: 750, - frameTop: 110, - frameLeft: 0, - // 自定义预览 previewVisible: false, previewSrc: '', previewSize: 600 @@ -104,15 +92,8 @@ success: function(res) { that.winWidth = res.windowWidth that.winHeight = res.windowHeight + that.camSize = res.windowWidth that.previewSize = Math.floor(res.windowWidth * 0.85) - // 取景框放在中间偏上一点 - var barH = 110 - var bottomArea = 240 - var availableH = res.windowHeight - barH - bottomArea - var size = Math.min(res.windowWidth, availableH) - that.camSize = size - that.frameTop = barH + Math.floor((availableH - size) / 2) - that.frameLeft = Math.floor((res.windowWidth - size) / 2) } }) }, @@ -173,14 +154,12 @@ } uni.navigateBack() }, - // 放大预览指定图片(正方形显示) previewPhoto(idx) { if (this.capturedList.length > 0 && idx >= 0 && idx < this.capturedList.length) { this.previewSrc = this.capturedList[idx] this.previewVisible = true } }, - // 放大预览最新一张 previewLast() { this.previewPhoto(this.capturedList.length - 1) } @@ -194,17 +173,6 @@ background-color: #000000; position: relative; } - - /* 取景框(白色边框,视觉引导) */ - .cc-frame { - position: absolute; - border-width: 2rpx; - border-color: rgba(255,255,255,0.5); - border-style: solid; - z-index: 4; - background-color: transparent; - } - /* ═══ 顶部栏 ═══ */ .cc-topbar { position: absolute; @@ -219,9 +187,7 @@ z-index: 8; background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent); } - .cc-topbar-left { - width: 100rpx; - } + .cc-topbar-left { width: 100rpx; } .cc-topbar-back { width: 80rpx; height: 80rpx; border-radius: 80rpx; @@ -233,21 +199,14 @@ font-size: 44rpx; text-align: center; } - .cc-topbar-center { - flex: 1; - align-items: center; - } + .cc-topbar-center { flex: 1; align-items: center; } .cc-topbar-title { color: #ffffff; font-size: 40rpx; font-weight: 700; } - .cc-topbar-right { - flex-direction: row; - align-items: center; - } - - /* 翻转按钮(在右上角) */ + .cc-topbar-right { flex-direction: row; align-items: center; } + /* 翻转按钮 */ .cc-flip-btn { width: 84rpx; height: 84rpx; border-radius: 84rpx; @@ -263,8 +222,7 @@ font-weight: 700; text-align: center; } - - /* ═══ 底部操作栏 ═══ */ + /* ═══ 底部 ═══ */ .cc-footer { position: absolute; bottom: 0; left: 0; right: 0; @@ -278,23 +236,10 @@ z-index: 8; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); } - .cc-footer-left { - flex-direction: row; - align-items: center; - flex: 1; - } - .cc-footer-center { - align-items: center; - justify-content: center; - } - .cc-footer-right { - flex-direction: row; - align-items: center; - justify-content: flex-end; - flex: 1; - } - - /* 拍照按钮(放大) */ + .cc-footer-left { flex-direction: row; align-items: center; flex: 1; } + .cc-footer-center { align-items: center; justify-content: center; } + .cc-footer-right { flex-direction: row; align-items: center; justify-content: flex-end; flex: 1; } + /* 拍照按钮 */ .cc-capture-outer { width: 120rpx; height: 120rpx; border-radius: 120rpx; @@ -308,11 +253,7 @@ border-radius: 106rpx; background-color: #ffffff; } - .cc-capture-btn:active { - background-color: #dddddd; - } - - /* 完成按钮(在底部右侧) */ + /* 完成按钮 */ .cc-confirm-btn { color: #ffffff; font-size: 30rpx; @@ -325,8 +266,7 @@ background-color: transparent; lines: 1; } - - /* 缩略图预览(最新一张) */ + /* 缩略图预览 */ .cc-thumb-preview { width: 100rpx; height: 100rpx; border-radius: 12rpx; @@ -336,9 +276,7 @@ border-color: rgba(255,255,255,0.3); border-style: solid; } - .cc-thumb-last { - width: 100rpx; height: 100rpx; - } + .cc-thumb-last { width: 100rpx; height: 100rpx; } .cc-thumb-badge { position: absolute; top: -8rpx; right: -8rpx; @@ -351,7 +289,6 @@ line-height: 34rpx; padding-left: 6rpx; padding-right: 6rpx; } - /* 缩略图横条 */ .cc-thumb-bar { position: absolute; @@ -371,9 +308,7 @@ margin-right: 16rpx; background-color: #333333; } - .cc-thumb-img { - width: 120rpx; height: 120rpx; - } + .cc-thumb-img { width: 120rpx; height: 120rpx; } .cc-thumb-del { position: absolute; top: -8rpx; right: -8rpx; @@ -385,12 +320,8 @@ border-color: rgba(255,255,255,0.3); border-style: solid; } - .cc-del-icon { - color: #ffffff; - font-size: 22rpx; - } - - /* ═══ 自定义正方形预览 ═══ */ + .cc-del-icon { color: #ffffff; font-size: 22rpx; } + /* 预览 */ .cc-preview-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; @@ -408,10 +339,7 @@ align-items: center; justify-content: center; z-index: 21; } - .cc-preview-close-icon { - color: #ffffff; - font-size: 36rpx; - } + .cc-preview-close-icon { color: #ffffff; font-size: 36rpx; } .cc-preview-img { border-radius: 8rpx; border-width: 2rpx;