shaogen1995
/
kaiPingWeb


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
							<!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: 2%;
    left: 6.5%;
    width: 10%;
  }

  .title{
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
  }

  .rowBox {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 72%;
    width: 60%;
    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: 50%;
    transform: translateY(-50%);
    right: 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="">

    <img class="title" src="./img/title.png" alt="">

    <!-- 3个图标 -->
    <div class="rowBox">
      <div class="row" key="https://kaipingdiaolou.cn/web/#/">
        <img src="./img/web.png" alt="">
        <div class="rowTxt">
          <img src="./img/1.png" alt="">
          <p>WEB</p>端入口

        </div>
      </div>
      <div class="row" key="https://4dscene.4dage.com/culturalrelics/KPDL/index.html">
        <img src="./img/diaolou.png" alt="">
        <div class="rowTxt">
          <img src="./img/1.png" alt="">
          碉楼模型入口
        </div>
      </div>
      <div class="row" key="https://4dscene.4dage.com/culturalrelics/KPGJ/index.html">
        <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'
      lodingBoxDom.style.pointerEvents = 'auto'

      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'
          lodingBoxDom.style.pointerEvents = 'none'
          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>