From de08f14fcfa54fed5c141b34df0f150048944682 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=88=AA?= <icho.yang@scai-global.com>
Date: Mon, 1 Dec 2025 15:43:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/sparring/detail.vue | 76 +++++++++++++++++++++--------------
 1 file changed, 46 insertions(+), 30 deletions(-)

diff --git a/src/pages/sparring/detail.vue b/src/pages/sparring/detail.vue
index e9786c73..4813bfe8 100644
--- a/src/pages/sparring/detail.vue
+++ b/src/pages/sparring/detail.vue
@@ -1,14 +1,15 @@
 <template>
 	<view class="sparring-detail max_page">
-		<view class="sparring-detail-body">
-			<view class="top-box">
-				<view class="top-title">
-					<view class="back-icon" @click="common.navigateBack()"></view>
-					<!-- <uv-icon class="arrow-icon" name="arrow-left" @click="common.switchTab('/pages/index/index')" /> -->
-					陪练详情
-				</view>
-				<ImagePreview class="img-box" :src="detailInfo.ossAddr" :isCache="true" width="704" height="350" />
+	<view class="sparring-detail-scroll">
+		<view class="top-box">
+			<view class="top-title">
+				<view class="back-icon" @click="common.navigateBack()"></view>
+				<!-- <uv-icon class="arrow-icon" name="arrow-left" @click="common.switchTab('/pages/index/index')" /> -->
+				陪练详情
 			</view>
+			<ImagePreview class="img-box" :src="detailInfo.ossAddr" :isCache="true" width="704" height="350" />
+		</view>
+		<view class="sparring-detail-body">
 
 			<view class="body-top">
 				<view class="body-top-title">
@@ -70,6 +71,7 @@
 			</view>
 		</view>
 	</view>
+	</view>
 </template>
 
 <script setup>
@@ -136,43 +138,44 @@
 </script>
 
 <style lang="scss" scoped>
+	$body-top-height: 220rpx;
+	$top-height: 436rpx - $body-top-height;
 	.sparring-detail {
-		position: relative;
 		overflow-x: hidden;
-		overflow-y: auto;
-
-		.sparring-detail-body {
-			position: absolute;
+		overflow-y: hidden;
+		padding-top: $top-height;
+		position: relative;
+		.sparring-detail-scroll{
+			height: calc(100vh - 436rpx + $top-height);
+			width: 100vw;
 			overflow-x: hidden;
-			overflow-y: hidden;
-			left: 0;
-			top: 0;
-			min-height: 100%;
-			width: 100%;
-			box-sizing: border-box;
-			background-color: #f6f8ff;
-			z-index: 1;
-			padding: calc(var(--status-bar-height) + 336rpx) 23rpx 180rpx;
-
+			overflow-y: auto;
+			bottom: 0;
+			position: absolute;
+		}
 			.top-box {
 				background-image: url(@/static/images/sparring/top-bg.png);
 				background-repeat: no-repeat;
 				background-size: cover;
 				height: calc(var(--status-bar-height) + 436rpx);
-				clip-path: ellipse(650rpx 327rpx at 375rpx calc(var(--status-bar-height) + 109rpx));
+				// clip-path: ellipse(650rpx 327rpx at 375rpx calc(var(--status-bar-height) + 109rpx));
 				width: 100%;
 				position: fixed;
 				padding-top: var(--status-bar-height);
 				top: 0;
 				left: 0;
-				z-index: 2;
+				z-index:3;
 
 				.img-box {
-					width: 704rpx;
-					height: 350rpx;
+					width: 100%;
+					height: 100%;
 					margin: 0 auto;
-					border-radius: 23rpx;
+					// border-radius: 23rpx;
+					position: absolute;
+					left: 0;
+					top: 0;
 					overflow: hidden;
+					z-index: 3;
 				}
 
 				.top-title {
@@ -186,7 +189,7 @@
 					font-weight: 500;
 					color: #fff;
 					position: relative;
-
+					z-index: 10;
 					// margin-bottom: 23rpx;
 					.arrow-icon {
 						position: absolute;
@@ -224,10 +227,23 @@
 				}
 			}
 
+		.sparring-detail-body {
+			position: absolute;
+			overflow-x: hidden;
+			overflow-y: hidden;
+			left: 0;
+			top: 20rpx;
+			min-height: 100%;
+			width: 100%;
+			box-sizing: border-box;
+			background: linear-gradient(180deg, #ffffff00 0%, #ffffff00 calc($top-height - 20rpx),  #f6f8ff calc($top-height - 20rpx),  #f6f8ff 100% );
+			z-index: 5;
+			padding: $top-height 23rpx 180rpx;
+
 			.body-top {
 				background-color: #fff;
 				border-radius: 23rpx;
-				padding: 120rpx 28rpx 20rpx;
+				padding: 20rpx 28rpx 20rpx;
 				margin-bottom: 30rpx;
 
 				&-title {