|
|
@@ -0,0 +1,224 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>开平碉楼建筑群</title>
|
|
|
+</head>
|
|
|
+<style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ min-width: 1600px;
|
|
|
+ min-height: 800px;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-image: url('./img/bg.jpg');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ position: absolute;
|
|
|
+ top: 6%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 18%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rowBox {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ height: 72%;
|
|
|
+ width: 58%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row {
|
|
|
+ width: auto;
|
|
|
+ height: 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row:hover {
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .row img {
|
|
|
+ width: 1auto;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rowTxt {
|
|
|
+ position: absolute;
|
|
|
+ top: 10%;
|
|
|
+ left: 12%;
|
|
|
+ width: 20px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #FCE9AC;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .rowTxt img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rowTxt p {
|
|
|
+ position: relative;
|
|
|
+ left: -12%;
|
|
|
+ top: 5px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ writing-mode: vertical-rl;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .openBox {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ transition: all 0.3s;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .openBox img {
|
|
|
+ position: absolute;
|
|
|
+ top: 38px;
|
|
|
+ left: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ height: 51px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .openBox iframe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lodingBox {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 20;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ letter-spacing: 4px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 24px;
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="main">
|
|
|
+ <!-- logo -->
|
|
|
+ <img class="logo" src="./img/logo.png" alt="">
|
|
|
+
|
|
|
+ <!-- 3个图标 -->
|
|
|
+ <div class="rowBox">
|
|
|
+ <div class="row" key="https://sit-kpbwg.4dage.com/web/index.html#/">
|
|
|
+ <img src="./img/web.png" alt="">
|
|
|
+ <div class="rowTxt">
|
|
|
+ <img src="./img/1.png" alt="">
|
|
|
+ <p>WEB</p>端入口
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row" key="xxxxx">
|
|
|
+ <img src="./img/diaolou.png" alt="">
|
|
|
+ <div class="rowTxt">
|
|
|
+ <img src="./img/1.png" alt="">
|
|
|
+ 碉楼模型入口
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row" key="22222">
|
|
|
+ <img src="./img/goujian.png" alt="">
|
|
|
+ <div class="rowTxt">
|
|
|
+ <img src="./img/1.png" alt="">
|
|
|
+ 构建模型入口
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="lodingBox">加载中...</div>
|
|
|
+
|
|
|
+ <div class="openBox">
|
|
|
+ <img src="./img/icon_home.png" alt="">
|
|
|
+ <!-- <iframe src="#" frameborder="0"></iframe> -->
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+
|
|
|
+<script>
|
|
|
+ const rowDoms = document.querySelectorAll('.row')
|
|
|
+
|
|
|
+ const openBoxDom = document.querySelector('.openBox')
|
|
|
+
|
|
|
+ const lodingBoxDom = document.querySelector('.lodingBox')
|
|
|
+
|
|
|
+ const mainDom = document.querySelector('.main')
|
|
|
+
|
|
|
+ rowDoms.forEach(v => {
|
|
|
+ v.onclick = () => {
|
|
|
+
|
|
|
+ mainDom.style.opacity = '0'
|
|
|
+
|
|
|
+ lodingBoxDom.style.opacity = '1'
|
|
|
+
|
|
|
+ const url = v.getAttribute('key')
|
|
|
+ const iframeDom = document.createElement('iframe')
|
|
|
+ iframeDom.src = url
|
|
|
+ iframeDom.frameBorder = '0'
|
|
|
+
|
|
|
+ openBoxDom.appendChild(iframeDom)
|
|
|
+ iframeDom.onload = () => {
|
|
|
+ setTimeout(() => {
|
|
|
+ lodingBoxDom.style.opacity = '0'
|
|
|
+ openBoxDom.style.opacity = '1'
|
|
|
+ openBoxDom.style.pointerEvents = 'auto'
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const homeDom = document.querySelector('.openBox img')
|
|
|
+
|
|
|
+ homeDom.onclick = () => {
|
|
|
+ mainDom.style.opacity = '1'
|
|
|
+ openBoxDom.style.opacity = '0'
|
|
|
+ openBoxDom.style.pointerEvents = 'none'
|
|
|
+ const iframeDom = document.querySelector('.openBox iframe')
|
|
|
+ iframeDom.remove()
|
|
|
+ }
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+</html>
|
