From 651b3d8ec7045f911b5be2d259073a009daf520d Mon Sep 17 00:00:00 2001
From: ShenQiLun <97694732@qq.com>
Date: Thu, 25 Jun 2026 17:04:03 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8Dnvue=20CSS=E5=85=BC?=
 =?UTF-8?q?=E5=AE=B9=E9=97=AE=E9=A2=98(var/env/gap/inline-flex=E7=AD=89)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/upload/camera_capture.nvue | 201 ++++++++++---------------------
 1 file changed, 61 insertions(+), 140 deletions(-)

diff --git a/pages/upload/camera_capture.nvue b/pages/upload/camera_capture.nvue
index 7c29e2f..8eebc50 100644
--- a/pages/upload/camera_capture.nvue
+++ b/pages/upload/camera_capture.nvue
@@ -1,49 +1,36 @@
 <template>
 	<view class="cc-page">
-		<!-- 相机预览（一直显示） -->
+		<!-- 相机预览 -->
 		<ima-camera-view
 			ref="cameraRef"
-			class="cc-camera"
+			style="width:750rpx;flex:1;"
 			flash="off"
 			facing="back"
 			@onPictureTaken="onPictureTaken"
 			@onCameraOpened="onCameraOpened"
 		></ima-camera-view>
 
-		<!-- 顶部：已拍数量 & 确认 -->
-		<view class="cc-topbar">
-			<text class="cc-topbar-title">{{ capturedList.length > 0 ? '已拍 ' + capturedList.length + '/9 张' : '拍照' }}</text>
-			<text class="cc-topbar-confirm" @click="confirmCapture" :class="{ disabled: capturedList.length === 0 }">
-				确认 ({{ capturedList.length }})
-			</text>
+		<!-- 顶部 -->
+		<view class="cc-topbar" style="padding-top:50px;">
+			<text class="cc-topbar-title">{{ capturedList.length > 0 ? '已拍 '+capturedList.length+'/9 张' : '拍照' }}</text>
+			<text class="cc-topbar-confirm" @click="confirmCapture">确认 ({{ capturedList.length }})</text>
 		</view>
 
-		<!-- 底部操作区 -->
-		<view class="cc-footer">
-			<!-- 取消 -->
-			<view class="cc-footer-left" @click="goBack">
-				<text class="cc-footer-text">取消</text>
+		<!-- 底部 -->
+		<view class="cc-footer" style="padding-bottom:30px;">
+			<text class="cc-footer-cancel" @click="goBack">取消</text>
+			<view class="cc-capture-btn" @click="capturePhoto">
+				<view class="cc-capture-inner"></view>
 			</view>
-
-			<!-- 中央拍照按钮 -->
-			<view class="cc-footer-center">
-				<view class="cc-capture-btn" @click="capturePhoto" :class="{ disabled: capturedList.length >= 9 }">
-					<view class="cc-capture-inner"></view>
-				</view>
-			</view>
-
-			<!-- 右侧：翻转 -->
-			<view class="cc-footer-right">
-				<view class="cc-flip-btn" @click="flipCamera">
-					<text class="cc-flip-icon">↺</text>
-				</view>
+			<view class="cc-flip-btn" @click="flipCamera">
+				<text class="cc-flip-icon">↺</text>
 			</view>
 		</view>
 
-		<!-- 已拍照缩略图横条 -->
+		<!-- 缩略图 -->
 		<view class="cc-thumb-bar" v-if="capturedList.length > 0">
-			<scroll-view class="cc-thumb-scroll" scroll-x="true" show-scrollbar="false">
-				<view class="cc-thumb-list">
+			<scroll-view scroll-x="true" show-scrollbar="false" style="flex-direction:row;">
+				<view style="flex-direction:row;">
 					<view class="cc-thumb-item" v-for="(img, idx) in capturedList" :key="idx">
 						<image class="cc-thumb-img" :src="img" mode="aspectFill"></image>
 						<view class="cc-thumb-del" @click.stop="deletePhoto(idx)">
@@ -66,13 +53,10 @@
 			}
 		},
 		methods: {
-			// 相机初始化完成
 			onCameraOpened() {
 				this.cameraReady = true
 				console.log('相机已就绪')
 			},
-
-			// 拍照（预览一直显示，拍完继续拍下一张）
 			capturePhoto() {
 				if (this.capturedList.length >= 9) {
 					uni.showToast({ title: '最多拍9张', icon: 'none' })
@@ -84,44 +68,35 @@
 				}
 				this.$refs.cameraRef.takePhoto()
 			},
-
-			// 拍照完成回调
 			onPictureTaken(e) {
-				var path = e.detail?.path || ''
+				var path = ''
+				if (e.detail) {
+					path = e.detail.path || ''
+				}
 				if (path) {
 					this.capturedList.push(path)
 				}
 			},
-
-			// 切换摄像头
 			flipCamera() {
 				this.facing = this.facing === 'back' ? 'front' : 'back'
 				this.$refs.cameraRef.changeFacing(this.facing)
 			},
-
-			// 删除照片
 			deletePhoto(idx) {
 				this.capturedList.splice(idx, 1)
 			},
-
-			// 取消
 			goBack() {
 				if (this.capturedList.length > 0) {
 					uni.showModal({
 						title: '提示',
 						content: '确定取消拍照吗？已拍照片将丢失',
 						success: function(res) {
-							if (res.confirm) {
-								uni.navigateBack()
-							}
+							if (res.confirm) { uni.navigateBack() }
 						}
 					})
 				} else {
 					uni.navigateBack()
 				}
 			},
-
-			// 确认
 			confirmCapture() {
 				if (this.capturedList.length === 0) {
 					uni.showToast({ title: '请先拍照', icon: 'none' })
@@ -141,20 +116,14 @@
 <style>
 	.cc-page {
 		flex: 1;
-		background-color: #000;
+		background-color: #000000;
 		position: relative;
 	}
-	.cc-camera {
-		flex: 1;
-		width: 750rpx;
-	}
-	/* 顶部栏 */
+	/* 顶部 */
 	.cc-topbar {
 		position: absolute;
 		top: 0; left: 0; right: 0;
-		height: 100rpx;
-		padding-top: var(--status-bar-height);
-		display: flex;
+		height: 100px;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
@@ -164,7 +133,7 @@
 		background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
 	}
 	.cc-topbar-title {
-		color: #fff;
+		color: #ffffff;
 		font-size: 32rpx;
 		font-weight: bold;
 	}
@@ -172,21 +141,18 @@
 		color: #409eff;
 		font-size: 28rpx;
 		font-weight: bold;
-		padding: 10rpx 24rpx;
+		padding-left: 24rpx;
+		padding-right: 24rpx;
+		padding-top: 10rpx;
+		padding-bottom: 10rpx;
 		border-radius: 32rpx;
-		background: rgba(64, 158, 255, 0.15);
+		background-color: rgba(64,158,255,0.15);
 	}
-	.cc-topbar-confirm.disabled {
-		color: #666;
-		background: transparent;
-	}
-	/* 底部操作区 */
+	/* 底部 */
 	.cc-footer {
 		position: absolute;
 		bottom: 0; left: 0; right: 0;
-		height: 200rpx;
-		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-		display: flex;
+		height: 180rpx;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
@@ -195,104 +161,59 @@
 		z-index: 8;
 		background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
 	}
-	.cc-footer-left {
-		width: 120rpx;
-	}
-	.cc-footer-text {
-		color: #fff;
+	.cc-footer-cancel {
+		color: #ffffff;
 		font-size: 28rpx;
 	}
-	.cc-footer-center {
-		flex: 1;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-	.cc-footer-right {
-		width: 120rpx;
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: flex-end;
-	}
-	/* 拍照按钮 */
 	.cc-capture-btn {
-		width: 80rpx;
-		height: 80rpx;
-		border-radius: 50%;
-		border: 6rpx solid #fff;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		width: 80rpx; height: 80rpx;
+		border-radius: 80rpx;
+		border-width: 6rpx; border-color: #ffffff; border-style: solid;
+		align-items: center; justify-content: center;
 	}
 	.cc-capture-inner {
-		width: 64rpx;
-		height: 64rpx;
-		border-radius: 50%;
-		background: #fff;
+		width: 60rpx; height: 60rpx;
+		border-radius: 60rpx;
+		background-color: #ffffff;
 	}
-	.cc-capture-btn.disabled {
-		opacity: 0.4;
-	}
-	/* 翻转按钮 */
 	.cc-flip-btn {
-		width: 64rpx;
-		height: 64rpx;
-		border-radius: 50%;
-		border: 2rpx solid rgba(255,255,255,0.4);
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		width: 64rpx; height: 64rpx;
+		border-radius: 64rpx;
+		border-width: 2rpx; border-color: rgba(255,255,255,0.4); border-style: solid;
+		align-items: center; justify-content: center;
 	}
 	.cc-flip-icon {
-		color: #fff;
+		color: #ffffff;
 		font-size: 32rpx;
 	}
-	/* 缩略图横条 */
+	/* 缩略图 */
 	.cc-thumb-bar {
 		position: absolute;
-		bottom: 200rpx;
-		left: 0;
-		right: 0;
-		padding: 10rpx 20rpx;
+		bottom: 190rpx; left: 0; right: 0;
+		padding-left: 20rpx; padding-right: 20rpx; padding-top: 10rpx; padding-bottom: 10rpx;
 		z-index: 8;
 	}
-	.cc-thumb-scroll {
-		white-space: nowrap;
-	}
-	.cc-thumb-list {
-		display: flex;
-		flex-direction: row;
-		gap: 12rpx;
-	}
 	.cc-thumb-item {
-		width: 100rpx;
-		height: 100rpx;
-		border-radius: 8rpx;
-		overflow: hidden;
+		width: 100rpx; height: 100rpx;
+		border-radius: 8rpx; overflow: hidden;
 		position: relative;
-		border: 2rpx solid rgba(255,255,255,0.3);
-		flex-shrink: 0;
-		background: #333;
+		border-width: 2rpx; border-color: rgba(255,255,255,0.3); border-style: solid;
+		margin-right: 12rpx;
+		background-color: #333333;
 	}
 	.cc-thumb-img {
-		width: 100rpx;
-		height: 100rpx;
+		width: 100rpx; height: 100rpx;
 	}
 	.cc-thumb-del {
 		position: absolute;
-		top: -6rpx;
-		right: -6rpx;
-		width: 32rpx;
-		height: 32rpx;
-		border-radius: 50%;
-		background: rgba(0,0,0,0.6);
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		top: -6rpx; right: -6rpx;
+		width: 32rpx; height: 32rpx;
+		border-radius: 32rpx;
+		background-color: rgba(0,0,0,0.6);
+		align-items: center; justify-content: center;
 	}
 	.cc-del-icon {
-		color: #fff;
+		color: #ffffff;
 		font-size: 18rpx;
 	}
 </style>