From a34059e688e947a2ea079a0646872f1a21089940 Mon Sep 17 00:00:00 2001 From: huanghongfeng <huanghongfeng@hnkhzn.com> Date: 星期一, 22 九月 2025 14:47:00 +0800 Subject: [PATCH] 1 --- 项目代码/DP/src/views/home.vue | 89 +++++++++++++++++++++++++++++++++----------- 1 files changed, 67 insertions(+), 22 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..7d24101 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 --> @@ -26,14 +23,14 @@ <span class="title-text">杞鍘嬭鏅鸿兘閫夐厤绯荤粺</span> </div> </div> - <div class="timers"> + <!-- <div class="timers"> {{ dateYear }} {{ dateWeek }} {{ dateDay }} <i class="blq-icon-shezhi02" style="margin-left: 10px" @click="showSetting" ></i> - </div> + </div> --> </div> <!-- 澶撮儴 e--> <!-- 鍐呭 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: { @@ -70,33 +67,81 @@ computed: {}, created() {}, mounted() { - this.timeFn(); + //this.timeFn(); this.cancelLoading(); + + // 鐩戝惉鍏ㄥ睆鍙樺寲 + document.addEventListener('fullscreenchange', this.handleFullscreenChange); }, beforeDestroy() { clearInterval(this.timing); + document.removeEventListener('fullscreenchange', this.handleFullscreenChange); }, methods: { showSetting() { this.$refs.setting.init(); }, - timeFn() { - this.timing = setInterval(() => { - this.dateDay = formatTime(new Date(), "HH: mm: ss"); - this.dateYear = formatTime(new Date(), "yyyy-MM-dd"); - this.dateWeek = this.weekday[new Date().getDay()]; - }, 1000); - }, + // timeFn() { + // this.timing = setInterval(() => { + // this.dateDay = formatTime(new Date(), "HH: mm: ss"); + // this.dateYear = formatTime(new Date(), "yyyy-MM-dd"); + // this.dateWeek = this.weekday[new Date().getDay()]; + // }, 1000); + // }, 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