From 085855e39e227a119374fb72efbcee0793a6d9d8 Mon Sep 17 00:00:00 2001
From: ShenQiLun <97694732@qq.com>
Date: Thu, 25 Jun 2026 17:10:34 +0800
Subject: [PATCH] =?UTF-8?q?style:=E4=BC=98=E5=8C=96=E6=8B=8D=E7=85=A7?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2UI-=E9=A1=B6=E9=83=A8X=E5=85=B3=E9=97=AD/?=
 =?UTF-8?q?=E5=BA=95=E9=83=A8=E7=BC=A9=E7=95=A5=E5=9B=BE=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?/=E5=9C=86=E7=8E=AF=E6=8B=8D=E7=85=A7=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/upload/camera_capture.nvue | 222 +++++++++++++++++++++++--------
 1 file changed, 166 insertions(+), 56 deletions(-)

diff --git a/pages/upload/camera_capture.nvue b/pages/upload/camera_capture.nvue
index ecc2701..cf324f3 100644
--- a/pages/upload/camera_capture.nvue
+++ b/pages/upload/camera_capture.nvue
@@ -10,25 +10,50 @@
 			@onCameraOpened="onCameraOpened"
 		></ima-camera-view>
 
-		<!-- 顶部 -->
-		<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" 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 class="cc-topbar">
+			<view class="cc-topbar-left">
+				<view class="cc-topbar-back" @click="goBack">
+					<text class="cc-back-icon">✕</text>
+				</view>
 			</view>
-			<view class="cc-flip-btn" @click="flipCamera">
-				<text class="cc-flip-icon">↺</text>
+			<view class="cc-topbar-center">
+				<text class="cc-topbar-title">{{ capturedList.length > 0 ? '已拍 ' + capturedList.length + '/9' : '拍照' }}</text>
+			</view>
+			<view class="cc-topbar-right">
+				<text class="cc-topbar-confirm" @click="confirmCapture" v-if="capturedList.length > 0">
+					完成
+				</text>
 			</view>
 		</view>
 
-		<!-- 缩略图 -->
-		<view class="cc-thumb-bar" v-if="capturedList.length > 0">
+		<!-- ═══ 底部操作栏 ═══ -->
+		<view class="cc-footer">
+			<!-- 左侧：缩略图预览 -->
+			<view class="cc-footer-left">
+				<view class="cc-thumb-preview" v-if="capturedList.length > 0" @click="confirmCapture">
+					<image class="cc-thumb-last" :src="capturedList[capturedList.length-1]" mode="aspectFill"></image>
+					<text class="cc-thumb-badge">{{ capturedList.length }}</text>
+				</view>
+			</view>
+
+			<!-- 中间：拍照按钮 -->
+			<view class="cc-footer-center">
+				<view class="cc-capture-outer">
+					<view class="cc-capture-btn" @click="capturePhoto"></view>
+				</view>
+			</view>
+
+			<!-- 右侧：翻转 -->
+			<view class="cc-footer-right">
+				<view class="cc-flip-btn" @click="flipCamera">
+					<text class="cc-flip-icon">↺</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- ═══ 缩略图横条（超过1张时） ═══ -->
+		<view class="cc-thumb-bar" v-if="capturedList.length > 1">
 			<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">
@@ -94,12 +119,13 @@
 			},
 			deletePhoto(idx) {
 				this.capturedList.splice(idx, 1)
+				// 删完如果为0，缩略图自动隐藏
 			},
 			goBack() {
 				if (this.capturedList.length > 0) {
 					uni.showModal({
 						title: '提示',
-						content: '确定取消拍照吗？已拍照片将丢失',
+						content: '确定退出拍照？已拍照片将丢失',
 						success: function(res) {
 							if (res.confirm) { uni.navigateBack() }
 						}
@@ -125,105 +151,189 @@
 </script>
 
 <style>
+	/* ─── 页面容器 ─── */
 	.cc-page {
 		flex: 1;
 		background-color: #000000;
 	}
-	/* 顶部 */
+
+	/* ─── 顶部栏 ─── */
 	.cc-topbar {
 		position: absolute;
 		top: 0; left: 0; right: 0;
-		height: 100px;
+		height: 110px;
+		padding-top: 50px;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
-		padding-left: 30rpx;
-		padding-right: 30rpx;
+		padding-left: 20rpx;
+		padding-right: 20rpx;
 		z-index: 8;
-		background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
+		background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
+	}
+	.cc-topbar-left {
+		width: 90rpx;
+	}
+	.cc-topbar-back {
+		width: 56rpx; height: 56rpx;
+		border-radius: 56rpx;
+		background-color: rgba(0,0,0,0.3);
+		align-items: center; justify-content: center;
+	}
+	.cc-back-icon {
+		color: #ffffff;
+		font-size: 32rpx;
+		line-height: 56rpx;
+		text-align: center;
+	}
+	.cc-topbar-center {
+		flex: 1;
+		align-items: center;
 	}
 	.cc-topbar-title {
 		color: #ffffff;
-		font-size: 32rpx;
-		font-weight: bold;
+		font-size: 30rpx;
+		font-weight: 500;
+	}
+	.cc-topbar-right {
+		width: 120rpx;
+		align-items: flex-end;
 	}
 	.cc-topbar-confirm {
 		color: #409eff;
 		font-size: 28rpx;
 		font-weight: bold;
-		padding-left: 24rpx;
-		padding-right: 24rpx;
-		padding-top: 10rpx;
-		padding-bottom: 10rpx;
+		padding-left: 24rpx; padding-right: 24rpx;
+		padding-top: 10rpx; padding-bottom: 10rpx;
 		border-radius: 32rpx;
 		background-color: rgba(64,158,255,0.15);
 	}
-	/* 底部 */
+
+	/* ─── 底部操作栏 ─── */
 	.cc-footer {
 		position: absolute;
 		bottom: 0; left: 0; right: 0;
-		height: 180rpx;
+		height: 220rpx;
+		padding-bottom: 40rpx;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
 		padding-left: 40rpx;
 		padding-right: 40rpx;
 		z-index: 8;
-		background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
+		background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
 	}
-	.cc-footer-cancel {
-		color: #ffffff;
-		font-size: 28rpx;
+	.cc-footer-left {
+		width: 100rpx;
+		align-items: flex-start;
+	}
+	.cc-footer-center {
+		flex: 1;
+		align-items: center;
+		justify-content: center;
+	}
+	.cc-footer-right {
+		width: 100rpx;
+		align-items: flex-end;
+	}
+
+	/* ─── 拍照按钮 ─── */
+	.cc-capture-outer {
+		width: 90rpx; height: 90rpx;
+		border-radius: 90rpx;
+		border-width: 4rpx;
+		border-color: rgba(255,255,255,0.6);
+		border-style: solid;
+		align-items: center; justify-content: center;
 	}
 	.cc-capture-btn {
 		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: 60rpx; height: 60rpx;
-		border-radius: 60rpx;
 		background-color: #ffffff;
 	}
+	.cc-capture-btn:active {
+		background-color: #dddddd;
+	}
+
+	/* ─── 翻转按钮 ─── */
 	.cc-flip-btn {
-		width: 64rpx; height: 64rpx;
-		border-radius: 64rpx;
-		border-width: 2rpx; border-color: rgba(255,255,255,0.4); border-style: solid;
+		width: 72rpx; height: 72rpx;
+		border-radius: 72rpx;
+		border-width: 2rpx;
+		border-color: rgba(255,255,255,0.35);
+		border-style: solid;
 		align-items: center; justify-content: center;
+		background-color: rgba(255,255,255,0.08);
 	}
 	.cc-flip-icon {
 		color: #ffffff;
-		font-size: 32rpx;
+		font-size: 34rpx;
+		line-height: 72rpx;
+		text-align: center;
 	}
-	/* 缩略图 */
+
+	/* ─── 缩略图预览（最新一张） ─── */
+	.cc-thumb-preview {
+		width: 72rpx; height: 72rpx;
+		border-radius: 8rpx;
+		overflow: hidden;
+		position: relative;
+		border-width: 2rpx;
+		border-color: rgba(255,255,255,0.3);
+		border-style: solid;
+	}
+	.cc-thumb-last {
+		width: 72rpx; height: 72rpx;
+	}
+	.cc-thumb-badge {
+		position: absolute;
+		top: -6rpx; right: -6rpx;
+		min-width: 28rpx; height: 28rpx;
+		border-radius: 28rpx;
+		background-color: #409eff;
+		color: #ffffff;
+		font-size: 18rpx;
+		text-align: center;
+		line-height: 28rpx;
+		padding-left: 4rpx;
+		padding-right: 4rpx;
+	}
+
+	/* ─── 缩略图横条 ─── */
 	.cc-thumb-bar {
 		position: absolute;
-		bottom: 190rpx; left: 0; right: 0;
-		padding-left: 20rpx; padding-right: 20rpx; padding-top: 10rpx; padding-bottom: 10rpx;
+		bottom: 240rpx; left: 0; right: 0;
+		padding-left: 24rpx; padding-right: 24rpx;
+		padding-top: 10rpx; padding-bottom: 10rpx;
 		z-index: 8;
 	}
 	.cc-thumb-item {
-		width: 100rpx; height: 100rpx;
-		border-radius: 8rpx; overflow: hidden;
+		width: 110rpx; height: 110rpx;
+		border-radius: 8rpx;
+		overflow: hidden;
 		position: relative;
-		border-width: 2rpx; border-color: rgba(255,255,255,0.3); border-style: solid;
-		margin-right: 12rpx;
+		border-width: 2rpx;
+		border-color: rgba(255,255,255,0.3);
+		border-style: solid;
+		margin-right: 14rpx;
 		background-color: #333333;
 	}
 	.cc-thumb-img {
-		width: 100rpx; height: 100rpx;
+		width: 110rpx; height: 110rpx;
 	}
 	.cc-thumb-del {
 		position: absolute;
-		top: -6rpx; right: -6rpx;
-		width: 32rpx; height: 32rpx;
-		border-radius: 32rpx;
-		background-color: rgba(0,0,0,0.6);
+		top: -8rpx; right: -8rpx;
+		width: 36rpx; height: 36rpx;
+		border-radius: 36rpx;
+		background-color: rgba(0,0,0,0.55);
 		align-items: center; justify-content: center;
+		border-width: 2rpx;
+		border-color: rgba(255,255,255,0.3);
+		border-style: solid;
 	}
 	.cc-del-icon {
 		color: #ffffff;
-		font-size: 18rpx;
+		font-size: 20rpx;
 	}
 </style>