coder-xiaomo/epp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee

门禁端网页独立出来，全屏功能修好

Browse Source
This commit is contained in:
小墨
2023-03-21 22:39:44 +08:00
parent 23dfc8288c
commit 5f4e20af66
15 changed files with 353 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
client-entrance-guard/html/index.css
View File

@@ -2,64 +2,14 @@
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
color: white;
overflow: hidden;
}
.container {
iframe {
width: 100%;
height: 100%;
background-color: #0556c6;
display: grid;
grid-template-columns: 3fr 4fr;
/* align-items: center; */
place-items: center;
/* justify-items: center; */
/* place-content: center; */
}
.left-container {
text-shadow: 2px 2px 2px #00000066;
}
h1 {
margin-bottom: 30px;
font-size: 4vw;
}
h3 {
margin-bottom: 10px;
margin-top: 22px;
font-size: 2vw;
}
p {
font-size: 1.4vw;
line-height: 1.5em;
}
.right-container {
}
#qrcode {
box-shadow: 0px 0px 17px 12px rgb(0 0 0 / 50%);
border-radius: 50%;
display: block;
width: min(40vw, 68vh);
height: min(40vw, 68vh);
}
#refreshTimeCountDown {
text-align: center;
margin-top: 30px;
font-size: 2em;
color: #ffffff9c;
}
/* #fullscreen-button {
position: absolute;
right: 0;
top: 0;
} */

24
client-entrance-guard/html/index.html
View File

@@ -5,33 +5,13 @@
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src *; img-src *; connect-src *;">
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src *; img-src *; connect-src *;">
<title>社区疫情防控系统 - 门禁端</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container">
<div class="left-container">
<h1>进出社区请扫码</h1>
<h3>社区居民</h3>
<p>1. 打开 微信 > 扫一扫，扫描右侧小程序码</p>
<p>2. 点击确认进入，门即开启</p>
<h3>外来访客</h3>
<p>1. 打开 微信 > 扫一扫，扫描右侧小程序码</p>
<p>2. 填写进入申请表</p>
<h3>长期租客</h3>
<p>1. 请联系管理员为你添加进出权限</p>
</div>
<div class="right-container">
<img id="qrcode" src="">
<p id="refreshTimeCountDown"></p>
</div>
</div>
<!-- <button id="fullscreen-button">全屏</button> -->
<iframe src="https://epp.only4.work/access/index.html?inElectron=true" frameborder="0"></iframe>
<script src="./renderer.js" type="module"></script>
</body>

25
client-entrance-guard/html/renderer.js
View File

@@ -1,25 +0,0 @@
const url = "https://epp.only4.work/access/wechat/getUnlimitedQRCode";
const page = "pages/index/index"; // "pages/scan/entrance";
const envVersion = "develop"; // 正式版为 "release"，体验版为 "trial"，开发版为 "develop"
const autoColor = true;
const isHyaline = false;
const width = 500;
const image = document.getElementById('qrcode');
const refreshTimeCountDown = document.getElementById('refreshTimeCountDown');
let i = 0, refreshTime = 10 + 1;
function updateQRCode() {
if (i % refreshTime == 0) {
let scene = encodeURIComponent(`guard&${Date.now()}`);
image.src = `${url}?page=${page}&scene=${scene}&envVersion=${envVersion}&width=${width}&autoColor=${autoColor}&isHyaline=${isHyaline}`;
console.log(image.src);
refreshTimeCountDown.innerHTML = `&nbsp;`
} else {
refreshTimeCountDown.textContent = `${refreshTime - i}秒后刷新`
}
i = i % refreshTime + 1;
}
updateQRCode();
setInterval(updateQRCode, 1000);