Signed-off-by: 李妹妹 <1639016684@qq.com>

pages_course/living.vue

@@ -57,7 +57,8 @@
 				:class="{ 'horizontal-content': isFocus==1, 'trailer-content': liveItem.status==1,  'fullscreen-mode': isFullscreen   }">
 				<!-- 顶部信息栏 -->
 				<view class="top-info-bar" v-if="!isFullscreen"
-					:class="{'horizontal-top': liveItem.showType == 1,'hidden-on-fullscreen': isFullscreen}">
+					:class="{'horizontal-top': liveItem.showType == 1,'hidden-on-fullscreen': isFullscreen}"
+					:style="{marginTop: menuButtonInfo.top}">
 					<view class="user-info-section">
 						<image v-if="!scene&&liveItem.showType==2" @click="goBack" class="back-icon mr4"
 							src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/return3.png" />
@@ -76,14 +77,17 @@
 					<!-- 观众头像列表 -->
 					<!-- @click="toggleViewerList" -->
 					<view v-if="Array.isArray(filteredViewers)" class="viewers-section">
-						<view v-for="(item, index) in (filteredViewers ||[])" :key="index">
-							<image v-if="item" class="viewer-avatar mr4" :src="item" />
-							<!-- <view v-else class="viewer-avatar-placeholder mr4"
-								:style="{ backgroundColor: getUserRandomColor(item.userId) }">
-								<text class="avatar-initial">{{ getNicknameInitial(item.nickName) }}</text>
-							</view> -->
+						<view style="display: flex;align-items: center;">
+							<view v-for="(item, index) in (filteredViewers ||[])" :key="index">
+								<image v-if="item" class="viewer-avatar mr4" :src="item" />
+								<!-- <view v-else class="viewer-avatar-placeholder mr4"
+									:style="{ backgroundColor: getUserRandomColor(item.userId) }">
+									<text class="avatar-initial">{{ getNicknameInitial(item.nickName) }}</text>
+								</view> -->
+							</view>
+							<view class="viewer-count ">{{formattedWatchCount || 0 }}</view>
 						</view>
-						<view class="viewer-count ">{{formattedWatchCount || 0 }}</view>
+					
 					</view>
 				</view>
 
@@ -149,7 +153,9 @@
 						</view>
 
 						<!-- 回放标签 -->
-						<view v-if="isPlayback" class="replay-label" :class="isFullscreen ? 'replay-full' : ''">回放
+						<view v-if="isPlayback" class="replay-label" 
+						:style="{top:liveItem.showType === 2 ?'16%':'10%'}"
+						:class="isFullscreen? 'replay-full' : ''">回放
 						</view>
 					</view>
 				</view>
@@ -457,16 +463,16 @@
 			</u-popup>
 
 			<!-- 消息弹窗 -->
-			<u-popup :show="isShowPopMsg" round="20rpx" mode="center" zIndex="10076">
-				<view class="message-popup">
-					<image class="message-close-icon"
-						src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/del2.png"
-						@click="isShowPopMsg = false" />
-					<view class="message-title">消息通知</view>
-					<view class="message-content">{{popMsg}}</view>
-					<view class="message-confirm-button" @click="isShowPopMsg = false">确认</view>
-				</view>
-			</u-popup>
+			<u-popup  :show="isShowPopMsg" round="20rpx" mode="center" zIndex="10076">
+							<view class="message-popup">
+								<image class="message-close-icon"
+									src="/static/images/message_icon.png"/>
+								<view class="message-title">消息通知</view>
+								<view class="message-content">{{popMsg}}</view>
+								<view class="message-confirm-button" @click="isShowPopMsg = false">确认</view>
+								<image src="/static/images/close_white_icon.png" class="close" @click="isShowPopMsg = false"></image>
+							</view>
+						</u-popup>
 
 
 			<!-- 中奖和未中奖 -->
@@ -729,6 +735,7 @@
 		},
 		data() {
 			return {
+				menuButtonInfo:{},// 胶囊按钮布局信息
 				isFullscreen: false,
 				isVideoRotated: false,
 				showNonVideoElementsFlag: true,
@@ -905,7 +912,7 @@
 			};
 		},
 		async onLoad(options) {
-
+            this.getMenuButtonInfo(); // 初始化获取胶囊信息
 			this.initTime()
 			this.getLocationByIP();
 			if (options.liveId) {
@@ -1363,7 +1370,21 @@
 				immediate: true
 			}
 		},
-		methods: { // 退出全屏
+		methods: { 
+			// 获取胶囊按钮布局参数
+			    getMenuButtonInfo() {
+			      // 微信小程序API（Uniapp可直接用uni.getMenuButtonBoundingClientRect）
+			      const menuBtn = uni.getMenuButtonBoundingClientRect();
+			      if (menuBtn) {
+					  
+			        this.menuButtonInfo = {
+			          top: menuBtn.top + 'px', // 胶囊顶部距离
+			          height: menuBtn.height + 'px', // 胶囊高度
+			          centerY: (menuBtn.top + menuBtn.height / 2) + 'px', // 胶囊垂直居中Y坐标
+			          right: menuBtn.right + 'px' // 胶囊右侧距离
+			        };
+			      }
+			    },
 			// 退出全屏
 			exitFullscreen() {
 				console.log('执行退出全屏');
@@ -4671,7 +4692,7 @@
 	/* 全屏按钮样式优化 */
 	.custom-controls {
 		position: absolute;
-		bottom: 60rpx;
+		bottom: 10%;
 		right: 40rpx;
 		z-index: 9999;
 		background: rgba(0, 0, 0, 0.6);
@@ -4916,13 +4937,13 @@
 					width: 100%;
 					padding: 0 24rpx;
 					box-sizing: border-box;
-					margin-top: 48rpx;
+					// margin-top:calc(var(--status-bar-height) + 10rpx);
 					display: flex;
 					justify-content: space-between;
-
+                    flex-direction: column;
 					&.horizontal-top {
 						position: static;
-						margin-bottom: 50rpx;
+						margin-bottom: 30rpx;
 
 					}
 
@@ -4951,8 +4972,9 @@
 
 					.viewers-section {
 						display: flex;
+						justify-content:flex-end;
 						align-items: center;
-						margin-top: 120rpx;
+						margin-top: 30rpx;
 
 						.viewer-avatar {
 							width: 52rpx;
@@ -5085,7 +5107,7 @@
 
 						.replay-label {
 							position: absolute;
-							top: 15%;
+							top: 10%;
 							right: 24rpx;
 							background-color: rgba(57, 57, 57, 0.6);
 							width: 100rpx;
@@ -5098,6 +5120,7 @@
 
 							&.replay-full {
 								left: 82vh;
+								top: 16%!important;
 							}
 						}
 					}
@@ -5948,44 +5971,57 @@
 
 			// 消息弹窗
 			.message-popup {
-				display: flex;
-				flex-direction: column;
-				position: relative;
-				align-items: center;
-				padding: 40rpx 20rpx 0 20rpx;
-				width: 420rpx;
-				box-sizing: border-box;
-
-				.message-close-icon {
-					position: absolute;
-					z-index: 9;
-					top: 14rpx;
-					right: 14rpx;
-					width: 50rpx;
-					height: 50rpx;
-				}
-
-				.message-title {
-					font-weight: 500;
-					font-size: 42rpx;
-					margin: 40rpx 0;
-				}
-
-				.message-content {
-					margin-bottom: 60rpx;
-				}
-
-				.message-confirm-button {
-					width: 55%;
-					border-radius: 50rpx;
-					height: 100rpx;
-					line-height: 100rpx;
-					font-weight: 600;
-					font-size: 32rpx;
-					text-align: center;
-					background-color: #dfdfdf;
-				}
-			}
+							display: flex;
+							flex-direction: column;
+							position: relative;
+							align-items: center;
+							padding: 126rpx 48rpx 0;
+							width: 554rpx;
+							box-sizing: border-box;
+							background: linear-gradient( 180deg, #E2FCEF 0%, rgba(226,252,239,0) 100%);
+							border-radius: 62rpx 62rpx 0rpx 0rpx;
+			
+							.message-close-icon {
+								position: absolute;
+								z-index: 9;
+								top: -74rpx;
+								width: 176rpx;
+								height: 176rpx;
+							}
+			
+							.message-title {
+								font-weight: 600;
+								font-size: 36rpx;
+								color: #333333;
+								margin: 24rpx 0 28rpx;
+							}
+			
+							.message-content {
+								margin-bottom: 52rpx;
+								font-weight: 400;
+								font-size: 28rpx;
+								color: #333333;
+							}
+			
+							.message-confirm-button {
+								width: 358rpx;
+								height: 88rpx;
+								line-height: 88rpx;
+								background: linear-gradient( 136deg, #38D97D 0%, #02B176 100%);
+								border-radius: 44rpx 44rpx 44rpx 44rpx;
+								font-weight: 600;
+								font-size: 32rpx;
+								text-align: center;
+								color: #FFFFFF;
+							}
+							.close{
+								position: absolute;
+								z-index: 9;
+								bottom: -168rpx;
+								width: 64rpx;
+								height: 64rpx;
+							}
+						}
 
 			// 中奖弹窗
 			.prize-popup {