From c72cb6959cbf43520fbc88f390e2e21da7fbfbf4 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期四, 10 十月 2024 09:09:43 +0800
Subject: [PATCH] ll
---
screen/src/views/PlatformCall.vue | 112 ++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 85 insertions(+), 27 deletions(-)
diff --git a/screen/src/views/PlatformCall.vue b/screen/src/views/PlatformCall.vue
index a3ed50c..dbe977f 100644
--- a/screen/src/views/PlatformCall.vue
+++ b/screen/src/views/PlatformCall.vue
@@ -1,5 +1,5 @@
<script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
import dayjs from 'dayjs'
import UQRCode from 'uqrcodejs'
import { getLargeScreenData } from '@/utils/request'
@@ -22,7 +22,8 @@
if (res.data && res.data.allList) {
contentList.value = res.data.allList.map(item => {
if (item.optTime) {
- item.optTimeTemp = dayjs.duration(item.optTime).format('HH灏忔椂mm鍒�')
+ item.optTimeTemp = dayjs(item.optTime).format('HH:mm')
+ // item.optTimeTemp = dayjs.duration(Math.abs(new Date().getTime() - item.optTime)).format('HH:mm')
}
return item
})
@@ -106,7 +107,7 @@
var qr = new UQRCode()
// 璁剧疆浜岀淮鐮佸唴瀹�
qr.data = qrcode.value
- qr.size = 220
+ qr.size = 210
// 璋冪敤鍒朵綔浜岀淮鐮佹柟娉�
qr.make()
var canvas = document.getElementById("qrcode")
@@ -139,6 +140,51 @@
newDate.value = dayjs().format('YYYY-MM-DD')
newTime.value = dayjs().format('HH:mm')
}, 1000)
+
+const isFullscreen = ref(false);
+const handleFull = () => {
+ if(!isFullscreen.value){
+ handleFullScreen()
+ }else{
+ cancelFullscreen()
+ }
+}
+setTimeout(() => {
+ handleFull()
+}, 1000)
+const handler = () => {
+ isFullscreen.value = document.fullscreenElement !== null;
+ if (!isFullscreen) {
+ // 閫�鍑哄叏灞忔椂鍊欒В闄ょ洃鍚紝涓嶇劧姣忔鐩戝惉閮戒細娣诲姞涓�娆＄粦瀹�
+ document.removeEventListener("fullscreenchange", handler);
+ }
+};
+document.addEventListener("fullscreenchange", handler);
+const handleFullScreen = () => {
+ let elem = document.documentElement
+ // 灏濊瘯鍚敤鍏ㄥ睆妯″紡
+ if (elem.requestFullscreen) {
+ elem.requestFullscreen()
+ } else if (elem.mozRequestFullScreen) { // 鍏煎 Firefox
+ elem.mozRequestFullScreen()
+ } else if (elem.webkitRequestFullscreen) { // 鍏煎 Chrome, Safari 鍜� Opera
+ elem.webkitRequestFullscreen()
+ } else if (elem.msRequestFullscreen) { // 鍏煎 IE/Edge
+ elem.msRequestFullscreen()
+ }
+}
+function cancelFullscreen() {
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.msExitFullscreen) {
+ document.msExitFullscreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen();
+ }
+}
+
</script>
<template>
<div class="main_app">
@@ -203,14 +249,14 @@
</div>
<div class="qrcode_wrap">
<div class="qrcode">
- <canvas id="qrcode" width="220" height="220"></canvas>
+ <canvas id="qrcode" width="210" height="210"></canvas>
</div>
<div class="title">璇锋壂鐮佺鍒�</div>
</div>
</div>
</div>
<div class="main_footer">
- <img src="@/assets/images/call/ic_news@2x.png" class="icon" alt="">
+ <img @click="handleFull" src="@/assets/images/call/ic_news@2x.png" class="icon" alt="">
<div class="title">璇锋牴鎹槦鍒楁彁绀轰俊鎭紝渚濇绛夊�欒繘鍦�</div>
<div class="icon"></div>
</div>
@@ -218,9 +264,10 @@
</template>
<style lang="scss" scoped>
-div{
+div {
box-sizing: border-box;
}
+
.main_app {
color: #fff;
position: fixed;
@@ -231,10 +278,10 @@
overflow: hidden;
background-color: #092030;
position: relative;
- z-index: -2;
display: flex;
flex-direction: column;
justify-content: space-between;
+
.main_header {
width: 100%;
height: 112px;
@@ -243,7 +290,7 @@
align-items: center;
justify-content: space-between;
padding: 0 50px;
-
+ z-index: 11;
.title {
font-weight: 800;
font-size: 48px;
@@ -288,15 +335,18 @@
display: flex;
padding: 30px 20px;
position: relative;
+
.list {
flex: 5;
margin-right: 20px;
display: flex;
flex-direction: column;
+
.line {
display: flex;
align-items: center;
- flex: 1;
+ height: 11.1%;
+
&:nth-of-type(2n) {
background: rgba(255, 255, 255, 0);
}
@@ -311,13 +361,15 @@
align-items: center;
flex-direction: column;
font-weight: 500;
- font-size: 36px;
+ font-size: 30px;
flex: 10;
height: 100%;
- .time_place{
+
+ .time_place {
font-weight: 500;
- font-size: 24px;
+ font-size: 22px;
}
+
.status {
/* padding: 0 28px; */
width: 170px;
@@ -348,8 +400,10 @@
}
.header {
- font-size: bold;
- font-size: 40px;
+ .item {
+ font-size: bold;
+ font-size: 36px;
+ }
background: linear-gradient(180deg, #00B5D1 0%, #003C57 100%) !important;
}
}
@@ -359,13 +413,14 @@
flex: 2;
display: flex;
flex-direction: column;
- border: 1px solid red;
+
.tip_wrap {
margin-bottom: 20px;
width: 100%;
position: relative;
/* flex-shrink: 0; */
flex: 1;
+
.current_plat {
display: flex;
flex-direction: column;
@@ -373,14 +428,14 @@
justify-content: center;
padding: 30px 40px;
color: #FFA000;
-
+ height: 100%;
.id_card {
- font-weight: bold;
+ font-weight: 500;
font-size: 68px;
}
.no {
- margin: 10px 0;
+ margin: 8px 0;
font-weight: 500;
font-size: 52px;
}
@@ -392,24 +447,27 @@
.plat {
color: #fff;
- margin: 0 10px;
+ margin: 0 6px;
}
}
.empty {
- padding: 30px 40px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
font-weight: 500;
- font-size: 30px;
-
+ font-size: 26px;
+ height: 100%;
.title {
text-align: center;
font-weight: bold;
- font-size: 36px;
- margin-bottom: 20px;
+ font-size: 32px;
+ margin-bottom: 16px;
}
.line {
- margin-bottom: 10px;
+ margin-bottom: 8px;
+ padding-left: 32px;
}
}
@@ -446,9 +504,9 @@
}
.title {
- margin-top: 20px;
+ margin-top: 16px;
font-weight: bold;
- font-size: 34px;
+ font-size: 28px;
color: #111111;
}
}
--
Gitblit v1.9.3