74 lines
1.8 KiB
HTML
74 lines
1.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link
|
|
rel="icon"
|
|
type="image/svg+xml"
|
|
href="https://lxx-web-1313840333.cos.ap-chengdu.myqcloud.com/urm/logo.png"
|
|
/>
|
|
<title>灵犀学</title>
|
|
<style>
|
|
body,
|
|
iframe {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.main {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #000;
|
|
}
|
|
|
|
.main .iframe {
|
|
width: 1920px;
|
|
height: 1200px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="main">
|
|
<iframe
|
|
id="iframe"
|
|
class="iframe"
|
|
frameborder="0"
|
|
allowfullscreen="true"
|
|
webkitallowfullscreen="true"
|
|
mozallowfullscreen="true"
|
|
></iframe>
|
|
</div>
|
|
<script>
|
|
const iframeRef = document.querySelector('.iframe')
|
|
function resize() {
|
|
const { innerWidth, innerHeight } = window
|
|
const rate = innerWidth / innerHeight
|
|
const baseRate = 1920 / 1200
|
|
if (rate > baseRate) {
|
|
iframeRef.style.width = (innerHeight * 1920) / 1200 + 'px'
|
|
iframeRef.style.height = innerHeight + 'px'
|
|
} else {
|
|
iframeRef.style.width = innerWidth + 'px'
|
|
iframeRef.style.height = (innerWidth * 1200) / 1920 + 'px'
|
|
}
|
|
}
|
|
resize()
|
|
window.addEventListener('resize', resize)
|
|
const host = 'http://localhost'
|
|
if (location.pathname !== '/') {
|
|
document.getElementById('iframe').src = host + location.pathname + location.search
|
|
} else {
|
|
document.getElementById('iframe').src = host
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|