样式

pages_course/living.vue

@@ -155,7 +155,6 @@
 					</view>
 				</view>
 				<!-- 直播结束状态 -->
-				<!-- v-if="liveItem.status == 3" -->
 				<view class="videolist" v-if="liveItem.status == 3">
 					<view class="video-container"
 						:class="{'horizontal-layout': liveItem.showType == 1, 'fullscreen-mode': isFullscreen}">
@@ -257,7 +256,8 @@
 								:class="{ 'input-focused': isFocus }" @focus="inputFocus" @blur="inputBlur"
 								cursor-spacing="100" :adjust-position="false" :disabled="isEnd" />
 							<!-- v-if="isFocus&&!isIOS" -->
-							<view class="send-button" v-if="!isIOS" :class="liveItem.showType == 1 ? 'send2' : ''" @click="sendMsg()">
+							<view class="send-button" v-if="!isIOS" :class="liveItem.showType == 1 ? 'send2' : ''"
+								@click="sendMsg()">
 								发送</view>
 						</view>
 						<!--  :class="{ 'action-buttons-hidden': isFocus }" -->
@@ -455,16 +455,16 @@
 					</view>
 				</view>
 			</u-popup>
+			  
 			<!-- 消息弹窗 -->
-			<!-- :show="isShowPopMsg"  -->
-			<u-popup show="true" round="20rpx" mode="center" zIndex="10076">
+			<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" />
+						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>
 
@@ -1383,7 +1383,7 @@
 				this.isVideoRotated = false;
 				this.isFullscreen = false;
 			},
-			
+
 			// 切换全屏
 			toggleFullscreen() {
 				// console.log('自定义全屏按钮被点击');
@@ -1417,7 +1417,7 @@
 			// 显示非videolist元素
 			showNonVideoElements() {
 				this.showNonVideoElementsFlag = true;
-			}, 
+			},
 			// 防止默认全屏事件
 			onFullscreenChange(e) {
 				// 阻止默认全屏行为
@@ -2102,28 +2102,6 @@
 							}, 50);
 						}
 					}).exec();
-
-					// 方案2：同时使用scrollIntoView API
-					// query.select('#msgScroll').scrollIntoView({
-					// 	duration: 0,
-					// 	complete: () => {
-					// 		console.log('scrollIntoView完成');
-					// 	}
-					// }).exec();
-
-					// 方案3：尝试获取最后一个消息元素并滚动到它
-					// if (this.talklist.length > 0) {
-					// 	const lastMessage = this.talklist[this.talklist.length - 1];
-					// 	if (lastMessage && lastMessage.uniqueId) {
-					// 		query.select(`#list_${lastMessage.uniqueId}`).scrollIntoView({
-					// 			duration: 0,
-					// 			complete: () => {
-					// 				console.log('最后消息元素滚动完成');
-					// 			}
-					// 		}).exec();
-					// 	}
-					// }
-
 				} catch (error) {
 					console.error('原生滚动失败:', error);
 				}
@@ -2205,16 +2183,6 @@
 			},
 
 			goMiniProgram() {
-				// uni.navigateToMiniProgram({
-				// 	appId: 'wx45cf09091aead547',
-				// 	path: '/pages/home/index',
-				// 	success: function(res) {
-				// 		console.log('跳转成功', res);
-				// 	},
-				// 	fail: function(err) {
-				// 		console.error('跳转失败', err);
-				// 	}
-				// });
 				uni.showToast({
 					title: '系统升级中，兑换请联系客服！',
 					icon: 'none'
@@ -2259,7 +2227,6 @@
 						this[timer] = null;
 					}
 				});
-
 				// 重置相关状态
 				this.stayTime = 0;
 				this.startTime = 0;
@@ -2268,19 +2235,6 @@
 				this.reconnectCount = 0;
 				this.heartBeatRetryCount = 0;
 			},
-
-
-			// startTrafficCalculation(bitrate) {
-			// 	if (this.trafficTimer) {
-			// 		clearInterval(this.trafficTimer);
-			// 		this.trafficTimer = null;
-			// 	}
-			// 	this.startTime = Date.now();
-			// 	var that = this;
-			// 	this.trafficTimer = setInterval(() => {
-			// 		that.calculateTraffic(bitrate);
-			// 	}, 10000); // 每10秒计算一次
-			// },
 			//直播计算流量
 			startTrafficCalculation() {
 				if (this.trafficTimer) {
@@ -2298,17 +2252,7 @@
 					that.calculateTraffic(bitrate);
 				}, 10000); // 每10秒计算一次
 			},
-			// 计算流量
-			// calculateTraffic(bitrate) {
-			// 	const currentTime = Date.now();
-			// 	const duration = (currentTime - this.startTime) / 1000; // 持续时间（秒）
-			// 	// 流量 = 码率 × 时间
-			// 	// 码率单位: bps, 时间单位: 秒, 流量单位: 比特
-			// 	const trafficBits = bitrate * duration;
-			// 	// 转换为字节
-			// 	this.totalTraffic = trafficBits / 8;
-			// 	this.getLiveInternetTraffic();
-			// },
+		
 			calculateBitrate() {
 				// 如果接口返回了视频文件大小和时长，使用这些数据计算码率
 				if (this.liveItem.videoFileSize && this.liveItem.videoDuration) {
@@ -2941,22 +2885,6 @@
 					videoContext.seek(currentTime);
 				}
 			},
-
-			// onVideoWaiting(e) {
-			// 	// console.log('视频等待加载', e);
-			// 	if (this.liveItem.liveType == 2) {
-			// 		this.startTrafficCalculation(this.bitrate);
-			// 	} else {
-			// 		let that = this;
-			// 		if (this.trafficInterval) {
-			// 			clearInterval(this.trafficInterval);
-			// 			this.trafficInterval = null;
-			// 		}
-			// 		this.trafficInterval = setInterval(function() {
-			// 			that.getInternetTraffic();
-			// 		}, 10000);
-			// 	}
-			// },
 			onVideoWaiting(e) {
 				// console.log('视频等待加载', e);
 				if (this.liveItem.liveType == 2) {
@@ -5827,38 +5755,51 @@
 				flex-direction: column;
 				position: relative;
 				align-items: center;
-				padding: 40rpx 20rpx 0 20rpx;
-				width: 420rpx;
+				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: 14rpx;
-					right: 14rpx;
-					width: 50rpx;
-					height: 50rpx;
+					top: -74rpx;
+					width: 176rpx;
+					height: 176rpx;
 				}
 
 				.message-title {
-					font-weight: 500;
-					font-size: 42rpx;
-					margin: 40rpx 0;
+					font-weight: 600;
+					font-size: 36rpx;
+					color: #333333;
+					margin: 24rpx 0 28rpx;
 				}
 
 				.message-content {
-					margin-bottom: 60rpx;
+					margin-bottom: 52rpx;
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #333333;
 				}
 
 				.message-confirm-button {
-					width: 55%;
-					border-radius: 50rpx;
-					height: 100rpx;
-					line-height: 100rpx;
+					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;
-					background-color: #dfdfdf;
+					color: #FFFFFF;
+				}
+				.close{
+					position: absolute;
+					z-index: 9;
+					bottom: -168rpx;
+					width: 64rpx;
+					height: 64rpx;
 				}
 			}