|
@@ -51,6 +51,8 @@
|
|
|
<view class="no-live-title">暂无直播</view>
|
|
<view class="no-live-title">暂无直播</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
+ <!-- 主要内容区域 -->
|
|
|
|
|
+
|
|
|
<view class="content" :class="{ 'horizontal-content': isFocus==1, 'trailer-content': liveItem.status==1 }">
|
|
<view class="content" :class="{ 'horizontal-content': isFocus==1, 'trailer-content': liveItem.status==1 }">
|
|
|
<!-- 顶部信息栏 -->
|
|
<!-- 顶部信息栏 -->
|
|
|
<view class="top-info-bar" v-if="!isFullscreen" :class="liveItem.showType == 1 ? 'horizontal-top' : ''">
|
|
<view class="top-info-bar" v-if="!isFullscreen" :class="liveItem.showType == 1 ? 'horizontal-top' : ''">
|
|
@@ -70,13 +72,27 @@
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 观众头像列表 -->
|
|
<!-- 观众头像列表 -->
|
|
|
|
|
+ <!-- @click="toggleViewerList" -->
|
|
|
<view v-if="Array.isArray(filteredViewers)" class="viewers-section">
|
|
<view v-if="Array.isArray(filteredViewers)" class="viewers-section">
|
|
|
<view v-for="(item, index) in (filteredViewers ||[])" :key="index">
|
|
<view v-for="(item, index) in (filteredViewers ||[])" :key="index">
|
|
|
<image v-if="item" class="viewer-avatar mr4" :src="item" />
|
|
<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>
|
|
|
<view class="viewer-count ">{{formattedWatchCount || 0 }}</view>
|
|
<view class="viewer-count ">{{formattedWatchCount || 0 }}</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 购买提示 -->
|
|
|
|
|
+ <!-- <view class="purchase-prompt"
|
|
|
|
|
+ v-if="showPurchasePrompt && orderUser && orderUser.count && liveItem.status == 2">
|
|
|
|
|
+ <image class="prompt-icon mr8"
|
|
|
|
|
+ src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/shopping.png" />
|
|
|
|
|
+ <text>{{ orderUser.count || 0 }}人正在去购买</text>
|
|
|
|
|
+ </view> -->
|
|
|
|
|
+
|
|
|
<!-- 视频区域 -->
|
|
<!-- 视频区域 -->
|
|
|
<view class="videolist" v-if="liveItem.status == 2">
|
|
<view class="videolist" v-if="liveItem.status == 2">
|
|
|
<view class="video-container" :class="liveItem.showType == 1 ? 'horizontal-layout' : ''">
|
|
<view class="video-container" :class="liveItem.showType == 1 ? 'horizontal-layout' : ''">
|
|
@@ -101,10 +117,10 @@
|
|
|
<text class="exit-text">退出全屏</text>
|
|
<text class="exit-text">退出全屏</text>
|
|
|
</view> -->
|
|
</view> -->
|
|
|
<!-- 全屏按钮 - 只在非全屏状态下显示 -->
|
|
<!-- 全屏按钮 - 只在非全屏状态下显示 -->
|
|
|
- <view v-if="showCustomControls && !isFullscreen" class="custom-controls"
|
|
|
|
|
|
|
+ <!-- <view v-if="showCustomControls && liveItem.showType==1 && !isFullscreen" class="custom-controls"
|
|
|
@click="toggleFullscreen">
|
|
@click="toggleFullscreen">
|
|
|
<image src="/static/images/full_screen.png" class="control-icon" />
|
|
<image src="/static/images/full_screen.png" class="control-icon" />
|
|
|
- </view>
|
|
|
|
|
|
|
+ </view> -->
|
|
|
|
|
|
|
|
<!-- 投诉按钮 -->
|
|
<!-- 投诉按钮 -->
|
|
|
<view v-if="liveItem.showType==2" class="complaint-box"
|
|
<view v-if="liveItem.showType==2" class="complaint-box"
|
|
@@ -226,19 +242,25 @@
|
|
|
<view class="action-buttons" v-if="!isFocus">
|
|
<view class="action-buttons" v-if="!isFocus">
|
|
|
<view class="action-button-group" v-if="!isFocus">
|
|
<view class="action-button-group" v-if="!isFocus">
|
|
|
<view
|
|
<view
|
|
|
- :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','icon-button','mr20']"
|
|
|
|
|
|
|
+ :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','icon-button','mr40']"
|
|
|
@click="isMore=true,shopping=false">
|
|
@click="isMore=true,shopping=false">
|
|
|
|
|
+ <!-- <image
|
|
|
|
|
+ src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/more-icon.png"
|
|
|
|
|
+ class="action-icon" /> -->
|
|
|
|
|
+
|
|
|
<image :src="liveItem.showType == 1
|
|
<image :src="liveItem.showType == 1
|
|
|
? '/static/images/more2.png'
|
|
? '/static/images/more2.png'
|
|
|
:'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/more-icon.png'"
|
|
:'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/more-icon.png'"
|
|
|
class="action-icon" />
|
|
class="action-icon" />
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+
|
|
|
<view class="icon-button mr20" @tap="openCart()">
|
|
<view class="icon-button mr20" @tap="openCart()">
|
|
|
<image
|
|
<image
|
|
|
src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/shopping.png"
|
|
src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/shopping.png"
|
|
|
class="cart-icon" />
|
|
class="cart-icon" />
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -268,6 +290,7 @@
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
+ <!-- :show="userlogo" -->
|
|
|
<u-popup :show="userlogo" mode="bottom" round='12'>
|
|
<u-popup :show="userlogo" mode="bottom" round='12'>
|
|
|
<view class="userlogo column">
|
|
<view class="userlogo column">
|
|
|
<view class="bold fs36 ml20">授权你的昵称信息</view>
|
|
<view class="bold fs36 ml20">授权你的昵称信息</view>
|
|
@@ -516,11 +539,11 @@
|
|
|
<!-- 更多操作弹窗 -->
|
|
<!-- 更多操作弹窗 -->
|
|
|
<u-popup :show="isMore" @close="closeMore" round="20rpx" bgColor="#f3f5f9" zIndex="10076">
|
|
<u-popup :show="isMore" @close="closeMore" round="20rpx" bgColor="#f3f5f9" zIndex="10076">
|
|
|
<view class="more-actions-popup">
|
|
<view class="more-actions-popup">
|
|
|
- <view class="more-action-item" @click="navgetTo('/pages_shopping/live/integral'), (isMore = false)">
|
|
|
|
|
|
|
+ <!-- <view class="more-action-item" @click="navgetTo('/pages_shopping/live/integral'), (isMore = false)">
|
|
|
<image class="action-icon"
|
|
<image class="action-icon"
|
|
|
src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/order.png" />
|
|
src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/order.png" />
|
|
|
<view class="action-label">积分</view>
|
|
<view class="action-label">积分</view>
|
|
|
- </view>
|
|
|
|
|
|
|
+ </view> -->
|
|
|
<view class="more-action-item"
|
|
<view class="more-action-item"
|
|
|
@click="navgetTo('/pages_shopping/live/storeOrderRefundList?liveId=' + liveId), (isMore = false)">
|
|
@click="navgetTo('/pages_shopping/live/storeOrderRefundList?liveId=' + liveId), (isMore = false)">
|
|
|
<image class="action-icon"
|
|
<image class="action-icon"
|
|
@@ -622,15 +645,7 @@
|
|
|
</view>
|
|
</view>
|
|
|
<view v-if="liveItem.status == 1" class="ash_bg"></view>
|
|
<view v-if="liveItem.status == 1" class="ash_bg"></view>
|
|
|
</view>
|
|
</view>
|
|
|
- <!-- v-if="isFullscreen" -->
|
|
|
|
|
- <view class="global-exit-overlay" @click="exitFullscreen">
|
|
|
|
|
- <view class="global-exit-btn">
|
|
|
|
|
- <image src="/static/images/half_screen.png" class="exit-fullscreen-icon" />
|
|
|
|
|
- <text class="exit-text">退出全屏</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
</view>
|
|
</view>
|
|
|
-
|
|
|
|
|
</template>
|
|
</template>
|
|
|
<script>
|
|
<script>
|
|
|
import LikeButton from '@/pages_course/components/like.vue';
|
|
import LikeButton from '@/pages_course/components/like.vue';
|
|
@@ -864,6 +879,7 @@
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
async onLoad(options) {
|
|
async onLoad(options) {
|
|
|
|
|
+ this.toggleFullscreen()
|
|
|
this.initTime()
|
|
this.initTime()
|
|
|
this.getLocationByIP();
|
|
this.getLocationByIP();
|
|
|
if (options.liveId) {
|
|
if (options.liveId) {
|
|
@@ -970,6 +986,20 @@
|
|
|
this.getliving(this.liveId);
|
|
this.getliving(this.liveId);
|
|
|
},
|
|
},
|
|
|
mounted() {
|
|
mounted() {
|
|
|
|
|
+ // 获取 video 上下文
|
|
|
|
|
+ // 监听视频全屏事件
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ this.videoContext = uni.createVideoContext(`myVideo_${this.liveId}`, this);
|
|
|
|
|
+
|
|
|
|
|
+ // 添加全屏状态变化监听(更可靠的方式)
|
|
|
|
|
+ if (this.videoContext) {
|
|
|
|
|
+ // 使用 uni.onUserCaptureScreen 作为备选方案
|
|
|
|
|
+ uni.onUserCaptureScreen(() => {
|
|
|
|
|
+ console.log('用户截屏,可能是全屏状态');
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ }, 1000);
|
|
|
|
|
+
|
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
|
this.isIOS = systemInfo.platform === 'ios';
|
|
this.isIOS = systemInfo.platform === 'ios';
|
|
|
},
|
|
},
|
|
@@ -1066,8 +1096,8 @@
|
|
|
console.log('videoContext 初始化完成:', this.videoContext);
|
|
console.log('videoContext 初始化完成:', this.videoContext);
|
|
|
}, 1000);
|
|
}, 1000);
|
|
|
});
|
|
});
|
|
|
- // 添加屏幕方向变化监听
|
|
|
|
|
- this.addOrientationChangeListener();
|
|
|
|
|
|
|
+ // 初始化横屏支持
|
|
|
|
|
+ // this.initFullscreenSupport();
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
@@ -1245,30 +1275,11 @@
|
|
|
// 清理大数据和状态
|
|
// 清理大数据和状态
|
|
|
this.clearBigData();
|
|
this.clearBigData();
|
|
|
this.resetAllStates();
|
|
this.resetAllStates();
|
|
|
|
|
+ // 清理屏幕方向锁定
|
|
|
|
|
+ this.unlockOrientation();
|
|
|
|
|
|
|
|
// 移除屏幕方向监听
|
|
// 移除屏幕方向监听
|
|
|
this.removeOrientationChangeListener();
|
|
this.removeOrientationChangeListener();
|
|
|
-
|
|
|
|
|
- // 清理 videoContext
|
|
|
|
|
- if (this.videoContext) {
|
|
|
|
|
- try {
|
|
|
|
|
- // 退出全屏
|
|
|
|
|
- if (this.isFullscreen) {
|
|
|
|
|
- this.videoContext.exitFullScreen();
|
|
|
|
|
- }
|
|
|
|
|
- // 暂停视频
|
|
|
|
|
- this.videoContext.pause();
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- console.warn('清理 videoContext 时出错:', error);
|
|
|
|
|
- }
|
|
|
|
|
- this.videoContext = null;
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- // 在合适的地方只创建一次
|
|
|
|
|
- async created() {
|
|
|
|
|
- // 等待必要的参数准备就绪
|
|
|
|
|
- await this.$nextTick();
|
|
|
|
|
- this.initVideoContext();
|
|
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
mounted() {
|
|
mounted() {
|
|
@@ -1315,153 +1326,218 @@
|
|
|
immediate: true
|
|
immediate: true
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- methods: {
|
|
|
|
|
- initVideoContext() {
|
|
|
|
|
- if (this.liveId && !this.videoContext) {
|
|
|
|
|
- try {
|
|
|
|
|
- this.videoContext = uni.createVideoContext(`myVideo_${this.liveId}`, this);
|
|
|
|
|
- console.log('videoContext 初始化成功');
|
|
|
|
|
-
|
|
|
|
|
- // 确保 videoContext 可用
|
|
|
|
|
- if (this.videoContext) {
|
|
|
|
|
- this.bindVideoEvents();
|
|
|
|
|
- }
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- console.error('初始化 videoContext 失败:', error);
|
|
|
|
|
- // 延迟重试
|
|
|
|
|
- setTimeout(() => this.initVideoContext(), 500);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- bindVideoEvents() {
|
|
|
|
|
- // 可以在这里绑定一些视频事件
|
|
|
|
|
- console.log('视频事件绑定完成');
|
|
|
|
|
- },
|
|
|
|
|
- // 退出全屏
|
|
|
|
|
|
|
+ methods: { // 退出全屏
|
|
|
exitFullscreen() {
|
|
exitFullscreen() {
|
|
|
- console.log('退出全屏按钮被点击');
|
|
|
|
|
-
|
|
|
|
|
- // 确保 videoContext 存在
|
|
|
|
|
- if (!this.videoContext && this.liveId) {
|
|
|
|
|
- this.initVideoContext();
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- if (!this.videoContext) {
|
|
|
|
|
- console.error('videoContext 不可用');
|
|
|
|
|
- return;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // 无论当前是否全屏,都尝试退出全屏
|
|
|
|
|
- console.log('强制退出全屏');
|
|
|
|
|
- this.isFullscreen = false;
|
|
|
|
|
- this.showCustomControls = true;
|
|
|
|
|
-
|
|
|
|
|
- try {
|
|
|
|
|
- this.videoContext.exitFullScreen();
|
|
|
|
|
- console.log('退出全屏指令已发送');
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- console.error('退出全屏失败:', error);
|
|
|
|
|
- // 即使失败也更新状态
|
|
|
|
|
- this.isFullscreen = false;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- this.$forceUpdate();
|
|
|
|
|
|
|
+ console.log('退出全屏按钮被点击');
|
|
|
|
|
+
|
|
|
|
|
+ if (!this.videoContext) {
|
|
|
|
|
+ console.log('创建 videoContext');
|
|
|
|
|
+ this.videoContext = uni.createVideoContext(`myVideo_${this.liveId}`, this);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (!this.videoContext) {
|
|
|
|
|
+ console.error('videoContext 创建失败');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (this.isFullscreen) {
|
|
|
|
|
+ console.log('执行退出全屏操作');
|
|
|
|
|
+ this.videoContext.exitFullScreen();
|
|
|
|
|
+ } else {
|
|
|
|
|
+ console.log('当前不是全屏状态,无需退出');
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ // 添加屏幕方向变化监听
|
|
|
|
|
+ addOrientationChangeListener() {
|
|
|
|
|
+ if (window.addEventListener) {
|
|
|
|
|
+ window.addEventListener('orientationchange', this.handleOrientationChange);
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 移除屏幕方向变化监听
|
|
|
|
|
+ removeOrientationChangeListener() {
|
|
|
|
|
+ if (window.removeEventListener) {
|
|
|
|
|
+ window.removeEventListener('orientationchange', this.handleOrientationChange);
|
|
|
|
|
+ }
|
|
|
|
|
+ }, // 处理屏幕方向变化
|
|
|
|
|
+ handleOrientationChange() {
|
|
|
|
|
+ const orientation = window.orientation;
|
|
|
|
|
+ console.log('屏幕方向变化:', orientation);
|
|
|
|
|
+
|
|
|
|
|
+ // 0: 竖屏
|
|
|
|
|
+ // 90: 横屏(向左转)
|
|
|
|
|
+ // -90: 横屏(向右转)
|
|
|
|
|
+ // 180: 倒置(很少用)
|
|
|
|
|
+
|
|
|
|
|
+ if (this.isFullscreen && Math.abs(orientation) !== 90) {
|
|
|
|
|
+ // 全屏状态下,如果不是横屏,尝试退出全屏
|
|
|
|
|
+ console.log('全屏状态下屏幕方向不正确,尝试退出全屏');
|
|
|
|
|
+ if (this.videoContext) {
|
|
|
|
|
+ this.videoContext.exitFullScreen();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
|
|
+ // 强制横屏全屏(备用方案)
|
|
|
|
|
+ forceLandscapeFullscreen() {
|
|
|
|
|
+ // 尝试多种全屏方式
|
|
|
|
|
+ try {
|
|
|
|
|
+ // 方案1: 使用video的requestFullScreen
|
|
|
|
|
+ if (this.videoContext) {
|
|
|
|
|
+ this.videoContext.requestFullScreen({
|
|
|
|
|
+ direction: 90
|
|
|
|
|
+ });
|
|
|
|
|
+ return true;
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ console.log('方案1失败:', e);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ try {
|
|
|
|
|
+ // 方案2: 尝试DOM全屏API
|
|
|
|
|
+ const videoElement = document.getElementById(`myVideo_${this.liveId}`);
|
|
|
|
|
+ if (videoElement && videoElement.requestFullscreen) {
|
|
|
|
|
+ videoElement.requestFullscreen();
|
|
|
|
|
+ return true;
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ console.log('方案2失败:', e);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ try {
|
|
|
|
|
+ // 方案3: 使用Web API全屏
|
|
|
|
|
+ if (document.documentElement.requestFullscreen) {
|
|
|
|
|
+ document.documentElement.requestFullscreen();
|
|
|
|
|
+ return true;
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ console.log('方案3失败:', e);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ console.log('所有全屏方案都失败了');
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '无法全屏播放,请尝试手动横屏',
|
|
|
|
|
+ icon: 'none'
|
|
|
|
|
+ });
|
|
|
|
|
+ return false;
|
|
|
|
|
+ },
|
|
|
|
|
+ // 初始化全屏支持
|
|
|
|
|
+ // initFullscreenSupport() {
|
|
|
|
|
+ // // 检测是否支持全屏API
|
|
|
|
|
+ // if (document.fullscreenEnabled) {
|
|
|
|
|
+ // console.log('浏览器支持全屏API');
|
|
|
|
|
+ // } else {
|
|
|
|
|
+ // console.log('浏览器不支持全屏API,使用备用方案');
|
|
|
|
|
+ // }
|
|
|
|
|
+ // },
|
|
|
|
|
+ // 切换全屏
|
|
|
// 切换全屏
|
|
// 切换全屏
|
|
|
toggleFullscreen() {
|
|
toggleFullscreen() {
|
|
|
- console.log('全屏按钮被点击');
|
|
|
|
|
-
|
|
|
|
|
- // 确保 videoContext 存在,但不要重复创建
|
|
|
|
|
- if (!this.videoContext && this.liveId) {
|
|
|
|
|
- console.log('videoContext 不存在,尝试初始化');
|
|
|
|
|
- this.initVideoContext();
|
|
|
|
|
-
|
|
|
|
|
- // 如果初始化失败,直接返回
|
|
|
|
|
- if (!this.videoContext) {
|
|
|
|
|
- console.error('videoContext 初始化失败');
|
|
|
|
|
- return;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- if (!this.videoContext) {
|
|
|
|
|
- console.error('videoContext 不可用');
|
|
|
|
|
- return;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- if (this.isFullscreen) {
|
|
|
|
|
- console.log('执行退出全屏操作');
|
|
|
|
|
- // 先更新状态,再执行退出
|
|
|
|
|
- this.isFullscreen = false;
|
|
|
|
|
- this.showCustomControls = true;
|
|
|
|
|
-
|
|
|
|
|
- // 使用 Promise 确保操作顺序
|
|
|
|
|
- Promise.resolve().then(() => {
|
|
|
|
|
- try {
|
|
|
|
|
- this.videoContext.exitFullScreen();
|
|
|
|
|
- console.log('已发送退出全屏指令');
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- console.error('退出全屏失败:', error);
|
|
|
|
|
- // 强制更新状态
|
|
|
|
|
- this.isFullscreen = false;
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- } else {
|
|
|
|
|
- console.log('请求全屏');
|
|
|
|
|
- // 先设置状态为全屏
|
|
|
|
|
- this.isFullscreen = true;
|
|
|
|
|
- this.showCustomControls = false;
|
|
|
|
|
-
|
|
|
|
|
- // 根据直播类型决定方向
|
|
|
|
|
- let direction = 0; // 默认竖屏
|
|
|
|
|
-
|
|
|
|
|
- if (this.liveItem && this.liveItem.showType == 1) {
|
|
|
|
|
- direction = 90; // 横屏
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- Promise.resolve().then(() => {
|
|
|
|
|
- try {
|
|
|
|
|
- this.videoContext.requestFullScreen({
|
|
|
|
|
- direction: direction
|
|
|
|
|
- });
|
|
|
|
|
- console.log('已发送全屏请求');
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- console.error('请求全屏失败:', error);
|
|
|
|
|
- // 失败时恢复状态
|
|
|
|
|
- this.isFullscreen = false;
|
|
|
|
|
- this.showCustomControls = true;
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- this.$forceUpdate();
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ console.log('全屏按钮被点击');
|
|
|
|
|
+
|
|
|
|
|
+ // 确保 videoContext 存在
|
|
|
|
|
+ if (!this.videoContext) {
|
|
|
|
|
+ console.log('创建 videoContext');
|
|
|
|
|
+ this.videoContext = uni.createVideoContext(`myVideo_${this.liveId}`, this);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (!this.videoContext) {
|
|
|
|
|
+ console.error('videoContext 创建失败');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
|
|
+ if (this.isFullscreen) {
|
|
|
|
|
+ this.exitFullscreen();
|
|
|
|
|
+ } else {
|
|
|
|
|
+ console.log('请求全屏(横屏模式)');
|
|
|
|
|
+ this.videoContext.requestFullScreen({
|
|
|
|
|
+ direction: 90 // 90表示横屏,0是竖屏
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
// 全屏状态变化监听
|
|
// 全屏状态变化监听
|
|
|
// 加强 onFullscreenChange 方法
|
|
// 加强 onFullscreenChange 方法
|
|
|
- onFullscreenChange(e) {
|
|
|
|
|
- console.log('全屏状态变化事件:', e);
|
|
|
|
|
-
|
|
|
|
|
- // 确保正确获取状态
|
|
|
|
|
- const isFullScreen = e.detail && e.detail.fullScreen;
|
|
|
|
|
- console.log('全屏状态:', isFullScreen);
|
|
|
|
|
-
|
|
|
|
|
- // 直接使用事件中的状态,避免状态不同步
|
|
|
|
|
- this.isFullscreen = !!isFullScreen;
|
|
|
|
|
-
|
|
|
|
|
- // 全屏时隐藏自定义控制条,非全屏时显示
|
|
|
|
|
- this.showCustomControls = !this.isFullscreen;
|
|
|
|
|
-
|
|
|
|
|
- // 如果全屏状态变化,确保 videoContext 存在
|
|
|
|
|
- if (!this.videoContext && this.liveId) {
|
|
|
|
|
- this.initVideoContext();
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- console.log('状态更新完成 - isFullscreen:', this.isFullscreen, 'showCustomControls:', this.showCustomControls);
|
|
|
|
|
-
|
|
|
|
|
- this.$forceUpdate();
|
|
|
|
|
|
|
+ // onFullscreenChange(e) {
|
|
|
|
|
+ // console.log('全屏状态变化事件:', e);
|
|
|
|
|
+
|
|
|
|
|
+ // // 确保正确获取状态
|
|
|
|
|
+ // const isFullScreen = e.detail && e.detail.fullScreen;
|
|
|
|
|
+ // console.log('全屏状态:', isFullScreen);
|
|
|
|
|
+
|
|
|
|
|
+ // this.isFullscreen = isFullScreen;
|
|
|
|
|
+
|
|
|
|
|
+ // // 全屏时隐藏自定义控制条
|
|
|
|
|
+ // this.showCustomControls = !this.isFullscreen;
|
|
|
|
|
+
|
|
|
|
|
+ // // 强制更新UI
|
|
|
|
|
+ // this.$forceUpdate();
|
|
|
|
|
+
|
|
|
|
|
+ // // 调试输出
|
|
|
|
|
+ // console.log('isFullscreen:', this.isFullscreen);
|
|
|
|
|
+ // console.log('showCustomControls:', this.showCustomControls);
|
|
|
|
|
+ // },
|
|
|
|
|
+ onFullscreenChange(e) {
|
|
|
|
|
+ const videoContainer = e.target.parentNode; // 获取视频父容器
|
|
|
|
|
+ const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
|
|
|
|
|
+
|
|
|
|
|
+ if (isFullscreen) {
|
|
|
|
|
+ // 进入全屏:让图标容器也进入全屏,确保层级
|
|
|
|
|
+ if (videoContainer.requestFullscreen) {
|
|
|
|
|
+ videoContainer.requestFullscreen();
|
|
|
|
|
+ } else if (videoContainer.webkitRequestFullscreen) {
|
|
|
|
|
+ videoContainer.webkitRequestFullscreen();
|
|
|
|
|
+ } else if (videoContainer.msRequestFullscreen) {
|
|
|
|
|
+ videoContainer.msRequestFullscreen();
|
|
|
|
|
+ }
|
|
|
|
|
+ // 适配x5内核(微信等)
|
|
|
|
|
+ document.documentElement.style.webkitTouchCallout = 'none';
|
|
|
|
|
+ document.documentElement.style.webkitUserSelect = 'none';
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 退出全屏:退出容器的全屏
|
|
|
|
|
+ if (document.exitFullscreen) {
|
|
|
|
|
+ document.exitFullscreen();
|
|
|
|
|
+ } else if (document.webkitExitFullscreen) {
|
|
|
|
|
+ document.webkitExitFullscreen();
|
|
|
|
|
+ } else if (document.msExitFullscreen) {
|
|
|
|
|
+ document.msExitFullscreen();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ // 锁定屏幕方向为横屏
|
|
|
|
|
+ lockOrientation() {
|
|
|
|
|
+ // 设置屏幕方向为横屏
|
|
|
|
|
+ try {
|
|
|
|
|
+ // 尝试锁定横屏
|
|
|
|
|
+ plus.screen.lockOrientation('landscape-primary');
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ console.log('锁定屏幕方向失败:', e);
|
|
|
|
|
+ // 备用方案
|
|
|
|
|
+ try {
|
|
|
|
|
+ // 使用 Web API(如果支持)
|
|
|
|
|
+ if (screen.orientation && screen.orientation.lock) {
|
|
|
|
|
+ screen.orientation.lock('landscape');
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (err) {
|
|
|
|
|
+ console.log('备用方案也失败了:', err);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }, // 解锁屏幕方向
|
|
|
|
|
+ unlockOrientation() {
|
|
|
|
|
+ try {
|
|
|
|
|
+ plus.screen.unlockOrientation();
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ console.log('解锁屏幕方向失败:', e);
|
|
|
|
|
+ // 备用方案
|
|
|
|
|
+ try {
|
|
|
|
|
+ if (screen.orientation && screen.orientation.unlock) {
|
|
|
|
|
+ screen.orientation.unlock();
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (err) {
|
|
|
|
|
+ console.log('备用解锁方案也失败了:', err);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
|
|
+
|
|
|
shouquan() {
|
|
shouquan() {
|
|
|
if (this.user.nickname == '') {
|
|
if (this.user.nickname == '') {
|
|
|
uni.showToast({
|
|
uni.showToast({
|
|
@@ -4439,55 +4515,24 @@
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
- .swiper-wrapper .container .content .videolist .video-container {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- z-index: 10;
|
|
|
|
|
- /* 降低视频容器的z-index */
|
|
|
|
|
-
|
|
|
|
|
- .custom-controls {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- bottom: 42rpx;
|
|
|
|
|
- right: 20rpx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- z-index: 999999;
|
|
|
|
|
- /* 提高自定义控制条的z-index */
|
|
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
|
|
- border-radius: 40rpx;
|
|
|
|
|
- padding: 10rpx 20rpx;
|
|
|
|
|
- transition: all 0.3s ease;
|
|
|
|
|
-
|
|
|
|
|
- /* 根据全屏状态显示/隐藏 */
|
|
|
|
|
- display: flex;
|
|
|
|
|
-
|
|
|
|
|
- /* 全屏时隐藏 */
|
|
|
|
|
- .is-fullscreen & {
|
|
|
|
|
- display: none;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .control-icon {
|
|
|
|
|
- width: 46rpx;
|
|
|
|
|
- height: 46rpx;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // 添加全局退出按钮样式
|
|
|
|
|
- .global-exit-btn {
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- bottom: 140rpx;
|
|
|
|
|
|
|
+ .fullscreen-exit-btn {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ bottom: 120rpx;
|
|
|
right: 40rpx;
|
|
right: 40rpx;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
- z-index: 1000100; // 非常高的z-index
|
|
|
|
|
|
|
+ z-index: 99999;
|
|
|
background: rgba(0, 0, 0, 0.6);
|
|
background: rgba(0, 0, 0, 0.6);
|
|
|
border-radius: 40rpx;
|
|
border-radius: 40rpx;
|
|
|
padding: 20rpx 24rpx;
|
|
padding: 20rpx 24rpx;
|
|
|
- position: fixed !important;
|
|
|
|
|
- z-index: 999999 !important;
|
|
|
|
|
- pointer-events: auto !important;
|
|
|
|
|
|
|
+ transition: all 0.3s ease;
|
|
|
|
|
+
|
|
|
|
|
+ &:active {
|
|
|
|
|
+ transform: scale(0.95);
|
|
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
.exit-fullscreen-icon {
|
|
.exit-fullscreen-icon {
|
|
|
width: 40rpx;
|
|
width: 40rpx;
|
|
@@ -4502,20 +4547,8 @@
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- // 确保全屏时视频容器有正确的样式
|
|
|
|
|
- .is-fullscreen {
|
|
|
|
|
- .video-container {
|
|
|
|
|
- position: fixed !important;
|
|
|
|
|
- top: 0 !important;
|
|
|
|
|
- left: 0 !important;
|
|
|
|
|
- width: 100vw !important;
|
|
|
|
|
- height: 100vh !important;
|
|
|
|
|
- z-index: 999999 !important;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // 全屏退出按钮 - 确保在全屏时显示
|
|
|
|
|
- .video-container.is-fullscreen {
|
|
|
|
|
|
|
+ // 全屏时的样式调整
|
|
|
|
|
+ .video-container.fullscreen-mode {
|
|
|
position: fixed;
|
|
position: fixed;
|
|
|
top: 0;
|
|
top: 0;
|
|
|
left: 0;
|
|
left: 0;
|
|
@@ -4529,103 +4562,37 @@
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- // 确保全屏时退出按钮显示
|
|
|
|
|
- .fullscreen-exit-btn {
|
|
|
|
|
|
|
+ .custom-controls {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ bottom: 42rpx;
|
|
|
|
|
+ right: 20rpx;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- opacity: 1;
|
|
|
|
|
- visibility: visible;
|
|
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ z-index: 9999;
|
|
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
|
|
+ border-radius: 40rpx;
|
|
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
|
|
+ transition: all 0.3s ease;
|
|
|
|
|
+
|
|
|
|
|
+ // 全屏状态下的样式调整
|
|
|
|
|
+ .fullscreen-mode & {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:active {
|
|
|
|
|
+ transform: scale(0.95);
|
|
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
|
|
+ opacity: 0.8;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- // 全屏时隐藏其他元素
|
|
|
|
|
- .custom-controls,
|
|
|
|
|
|
|
+ // 全屏时其他元素隐藏
|
|
|
.complaint-box,
|
|
.complaint-box,
|
|
|
.replay-label {
|
|
.replay-label {
|
|
|
- display: none !important;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // 确保非全屏时退出按钮隐藏
|
|
|
|
|
- .video-container:not(.is-fullscreen) {
|
|
|
|
|
- .fullscreen-exit-btn {
|
|
|
|
|
display: none;
|
|
display: none;
|
|
|
- opacity: 0;
|
|
|
|
|
- visibility: hidden;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // 增强退出按钮样式,确保可见
|
|
|
|
|
- .fullscreen-exit-btn {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- bottom: 120rpx;
|
|
|
|
|
- right: 40rpx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- z-index: 999999; // 提高z-index确保在最上层
|
|
|
|
|
- background: rgba(0, 0, 0, 0.6);
|
|
|
|
|
- border-radius: 40rpx;
|
|
|
|
|
- padding: 20rpx 24rpx;
|
|
|
|
|
- transition: all 0.3s ease;
|
|
|
|
|
- opacity: 0.9;
|
|
|
|
|
-
|
|
|
|
|
- // 确保按钮在所有设备上可见
|
|
|
|
|
- pointer-events: auto;
|
|
|
|
|
-
|
|
|
|
|
- &:hover,
|
|
|
|
|
- &:active {
|
|
|
|
|
- transform: scale(0.95);
|
|
|
|
|
- background: rgba(0, 0, 0, 0.8);
|
|
|
|
|
- opacity: 1;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .exit-fullscreen-icon {
|
|
|
|
|
- width: 40rpx;
|
|
|
|
|
- height: 40rpx;
|
|
|
|
|
- margin-bottom: 10rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .exit-text {
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- font-size: 22rpx;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .fullscreen-exit-btn {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- bottom: 120rpx;
|
|
|
|
|
- right: 40rpx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- z-index: 99999;
|
|
|
|
|
- background: rgba(0, 0, 0, 0.6);
|
|
|
|
|
- border-radius: 40rpx;
|
|
|
|
|
- padding: 20rpx 24rpx;
|
|
|
|
|
- transition: all 0.3s ease;
|
|
|
|
|
-
|
|
|
|
|
- &:active {
|
|
|
|
|
- transform: scale(0.95);
|
|
|
|
|
- background: rgba(0, 0, 0, 0.8);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .exit-fullscreen-icon {
|
|
|
|
|
- width: 40rpx;
|
|
|
|
|
- height: 40rpx;
|
|
|
|
|
- margin-bottom: 10rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .exit-text {
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- font-size: 22rpx;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- // 全屏时的样式调整
|
|
|
|
|
.video-container {
|
|
.video-container {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -4641,52 +4608,22 @@
|
|
|
.custom-controls {
|
|
.custom-controls {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
bottom: 42rpx;
|
|
bottom: 42rpx;
|
|
|
|
|
+ /* 调整位置,避免被其他元素覆盖 */
|
|
|
right: 20rpx;
|
|
right: 20rpx;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
z-index: 9999;
|
|
z-index: 9999;
|
|
|
|
|
+ /* 确保在最上层 */
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
border-radius: 40rpx;
|
|
border-radius: 40rpx;
|
|
|
padding: 10rpx 20rpx;
|
|
padding: 10rpx 20rpx;
|
|
|
- transition: all 0.3s ease;
|
|
|
|
|
-
|
|
|
|
|
- // 只在非全屏且视频播放时显示
|
|
|
|
|
- &:not(.fullscreen-mode) {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // 全屏时隐藏
|
|
|
|
|
- .is-fullscreen & {
|
|
|
|
|
- display: flex !important;
|
|
|
|
|
- opacity: 1 !important;
|
|
|
|
|
- visibility: visible !important;
|
|
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- // 添加全屏状态类
|
|
|
|
|
- /* 全屏时的特殊处理 */
|
|
|
|
|
- .is-fullscreen {
|
|
|
|
|
- .video-container {
|
|
|
|
|
- position: fixed !important;
|
|
|
|
|
- top: 0 !important;
|
|
|
|
|
- left: 0 !important;
|
|
|
|
|
- width: 100vw !important;
|
|
|
|
|
- height: 100vh !important;
|
|
|
|
|
- z-index: 999999 !important;
|
|
|
|
|
- background-color: #000;
|
|
|
|
|
-
|
|
|
|
|
- .video-player {
|
|
|
|
|
- width: 100% !important;
|
|
|
|
|
- height: 100% !important;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /* 全屏时隐藏视频容器内的其他元素 */
|
|
|
|
|
- .custom-controls,
|
|
|
|
|
- .complaint-box,
|
|
|
|
|
- .replay-label {
|
|
|
|
|
- display: none !important;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ /* 优化全屏按钮样式 */
|
|
|
|
|
+ .custom-controls:active {
|
|
|
|
|
+ transform: scale(0.95);
|
|
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
|
|
+ opacity: 0.8;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.control-icon {
|
|
.control-icon {
|
|
@@ -4694,23 +4631,12 @@
|
|
|
height: 46rpx;
|
|
height: 46rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
|
|
|
|
|
@media screen and (orientation: landscape) {
|
|
@media screen and (orientation: landscape) {
|
|
|
.video-container.horizontal-layout {
|
|
.video-container.horizontal-layout {
|
|
|
- // 当直播是横屏模式时,视频容器需要特殊处理
|
|
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
-
|
|
|
|
|
- @media screen and (orientation: landscape) {
|
|
|
|
|
- .swiper-wrapper .container .content .videolist {
|
|
|
|
|
- height: 100vh;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .video-player {
|
|
|
|
|
- object-fit: contain; // 确保视频比例正确
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.video-player {
|
|
.video-player {
|
|
@@ -4785,46 +4711,6 @@
|
|
|
background: var(--bg-color);
|
|
background: var(--bg-color);
|
|
|
color: var(--text-color);
|
|
color: var(--text-color);
|
|
|
|
|
|
|
|
- // 全局退出按钮样式
|
|
|
|
|
- .global-exit-overlay {
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- width: 100vw;
|
|
|
|
|
- height: 100vh;
|
|
|
|
|
- z-index: 10001000;
|
|
|
|
|
- pointer-events: none;
|
|
|
|
|
-
|
|
|
|
|
- .global-exit-btn {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- bottom: 140rpx;
|
|
|
|
|
- right: 40rpx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- z-index: 10001001;
|
|
|
|
|
- /* 非常高的z-index */
|
|
|
|
|
- background: rgba(0, 0, 0, 0.6);
|
|
|
|
|
- border-radius: 40rpx;
|
|
|
|
|
- padding: 20rpx 24rpx;
|
|
|
|
|
- pointer-events: auto;
|
|
|
|
|
-
|
|
|
|
|
- .exit-fullscreen-icon {
|
|
|
|
|
- width: 40rpx;
|
|
|
|
|
- height: 40rpx;
|
|
|
|
|
- margin-bottom: 10rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .exit-text {
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- font-size: 22rpx;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
.container {
|
|
.container {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 100%;
|
|
height: 100%;
|