avatar

pages.json

@@ -183,7 +183,8 @@
 		{
 			"path": "pages/XingmaLabDetailPage/XingmaLabDetailPage",
 			"style": {
-				"navigationBarTitleText": ""
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom"
 			}
 		},
 		{

pages/XingmaLabDetailPage/XingmaLabDetailPage.less

@@ -3,9 +3,63 @@
     width: 750rpx;
     height: 1842rpx;
     left: 0rpx;
-    top: -160rpx;
+    top: 0rpx;
     position: absolute;
 
+    // 左上角头部区域 - 脱离滚动
+    .xingmalabdetailpageheader {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 750rpx;
+      height: 200rpx;
+      z-index: 100;
+      display: flex;
+      align-items: center;
+      // justify-content: space-between;
+      padding: 80rpx 40rpx 30rpx 40rpx;
+      background-color: #fff;
+      box-sizing: border-box;
+
+      // 返回按钮
+      .xingmalabdetailpagebackbtn {
+        width: 20rpx;
+        height: 33rpx;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        cursor: pointer;
+        z-index: 101;
+        margin-right: 35rpx;
+      }
+
+      // 用户信息
+      .xingmalabdetailpageuserinfo {
+        display: flex;
+        align-items: center;
+        gap: 10rpx;
+
+        // 头像
+        .xingmalabdetailpageavatar {
+          width: 66rpx;
+          height: 66rpx;
+          border-radius: 50%;
+        }
+
+        // 昵称
+        .xingmalabdetailpagenickname {
+          font-size: 28rpx;
+          font-weight: 600;
+          color: #1d1e25;
+          text-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.8);
+          max-width: 300rpx;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
                                                .xingmalabdetailpagebg {
         width: 750rpx;
         height: 1842rpx;

pages/XingmaLabDetailPage/XingmaLabDetailPage.vue

@@ -2,6 +2,21 @@
 	<view class="xingmalabdetailpage modal_center">
 		<span class="xingmalabdetailpagebg"
 			:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.background)})` }"></span>
+		
+		<!-- 左上角头部区域 - 脱离滚动 -->
+		<div class="xingmalabdetailpageheader">
+			<!-- 返回按钮 -->
+			<span class="xingmalabdetailpagebackbtn" 
+				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.backBtn)})` }"
+				@click="handleGoBack"></span>
+			
+			<!-- 用户信息 -->
+			<div class="xingmalabdetailpageuserinfo">
+				<image v-if="detailData.avatar" :src="detailData.avatar" class="xingmalabdetailpageavatar" mode="aspectFill" />
+				<span class="xingmalabdetailpagenickname">{{ detailData.nickname || '星妈用户' }}</span>
+			</div>
+		</div>
+		
 		<span class="xingmalabdetailpagetext">{{
 			detailData.content
 			|| config.texts.title }}</span>
@@ -13,7 +28,7 @@
 		<image v-if="detailData.imgUrl" :src="detailData.imgUrl" class="xingmalabdetailpagepic" mode="aspectFill" />
 		<span class="xingmalabdetailpagenum">{{ config.texts.collectionNumber }}{{ detailData.bizNo || collectionNumber
 		}}</span>
-		<div class="xingmalabdetailpagebottomcon" v-if="detailData.state !== 1">
+		<div class="xingmalabdetailpagebottomcon" v-if="detailData.state === 1">
 			<span class="xingmalabdetailpagebottomconbg"
 				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.bottomConBg)})` }"></span>
 
@@ -187,6 +202,19 @@ const handleShareClick = () => {
 	console.log('分享按钮被点击')
 }
 
+// 返回上一页
+const handleGoBack = () => {
+	uni.navigateBack({
+		delta: 1,
+		fail: () => {
+			// 如果返回失败，跳转到首页
+			uni.switchTab({
+				url: '/pages/index/index'
+			})
+		}
+	})
+}
+
 // 生命周期
 onMounted(async () => {
 	// 调用 home 接口获取登录状态

pages/XingmaLabDetailPage/config.js

@@ -24,7 +24,10 @@ export const xingmaLabDetailConfig = {
     bottomConLikeBtnSel: `XingmaLabDetailPage/${version}/XingmaLabDetailPageBottomConLikeBtnSel.png`,
     
     // 分享按钮
-    bottomConShareBtn: `XingmaLabDetailPage/${version}/XingmaLabDetailPageBottomConShareBtn.png`
+    bottomConShareBtn: `XingmaLabDetailPage/${version}/XingmaLabDetailPageBottomConShareBtn.png`,
+
+    // 返回按钮
+    backBtn: `XingmaLabDetailPage/${version}/XingmaLabDetailPageBackBtn.png`
   },
   
   // 文案配置