From 5ffc36a1db18d3112a9b50a9cf3953d7fcf21bae Mon Sep 17 00:00:00 2001 From: huanghongfeng <huanghongfeng@hnkhzn.com> Date: 星期二, 19 八月 2025 16:37:24 +0800 Subject: [PATCH] 更新 --- 项目代码/DP/src/views/home.vue | 69 ++++++++++++++++++++++++++++------ 1 files changed, 57 insertions(+), 12 deletions(-) diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/home.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/home.vue" index 9a71980..595a084 100644 --- "a/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/home.vue" +++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/DP/src/views/home.vue" @@ -1,12 +1,4 @@ -<!-- - * @Author: daidai - * @Date: 2022-01-12 14:23:32 - * @LastEditors: Please set LastEditors - * @LastEditTime: 2022-09-09 14:47:24 - * @FilePath: \web-pc\src\pages\big-screen\view\home.vue ---> <template> - <!-- <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: isScale }"> --> <ScaleScreen :width="1920" :height="1080" @@ -14,6 +6,11 @@ :selfAdaption="$store.state.setting.isScale" > <div class="bg"> + <!-- 鍏ㄥ睆閬僵灞� --> + <div v-if="showMask" class="fullscreen-mask" @click="enterFullscreen"> + <button class="fullscreen-button">鐐瑰嚮鍏ㄥ睆鏄剧ず</button> + </div> + <dv-loading v-if="loading">Loading...</dv-loading> <div v-else class="host-body"> <!-- 澶撮儴 s --> @@ -43,7 +40,6 @@ </div> <Setting ref="setting" /> </ScaleScreen> - <!-- </div> --> </template> <script> @@ -60,6 +56,7 @@ dateYear: null, dateWeek: null, weekday: ["鍛ㄦ棩", "鍛ㄤ竴", "鍛ㄤ簩", "鍛ㄤ笁", "鍛ㄥ洓", "鍛ㄤ簲", "鍛ㄥ叚"], + showMask: true // 鎺у埗閬僵灞傛樉绀� }; }, filters: { @@ -72,9 +69,13 @@ mounted() { this.timeFn(); this.cancelLoading(); + + // 鐩戝惉鍏ㄥ睆鍙樺寲 + document.addEventListener('fullscreenchange', this.handleFullscreenChange); }, beforeDestroy() { clearInterval(this.timing); + document.removeEventListener('fullscreenchange', this.handleFullscreenChange); }, methods: { showSetting() { @@ -90,13 +91,57 @@ cancelLoading() { let timer = setTimeout(() => { this.loading = false; - clearTimeout(timer); - }, 1500); + }, 100); }, + // 杩涘叆鍏ㄥ睆 + enterFullscreen() { + const element = document.documentElement; + if (element.requestFullscreen) { + element.requestFullscreen(); + } else if (element.webkitRequestFullscreen) { + element.webkitRequestFullscreen(); + } else if (element.msRequestFullscreen) { + element.msRequestFullscreen(); + } + }, + // 澶勭悊鍏ㄥ睆鍙樺寲 + handleFullscreenChange() { + this.showMask = !document.fullscreenElement; + } }, }; </script> <style lang="scss"> @import "./home.scss"; -</style> + +.fullscreen-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + display: flex; + justify-content: center; + align-items: center; + z-index: 9999; + cursor: pointer; +} + +.fullscreen-button { + padding: 15px 30px; + font-size: 18px; + background-color: #1a5cd7; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + transition: all 0.3s; + + &:hover { + background-color: #0d4bc2; + transform: scale(1.05); + } +} +</style> \ No newline at end of file -- Gitblit v1.9.3