shaogen1995
/
HQ_yueYue


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
							<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <title>琴澳儿童健康生活科普馆</title>
  </head>

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      width: 100vw;
      height: 100vh;
    }
    .main {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      max-width: 500px;
      margin: 0 auto;
    }
    .top {
      width: 100%;
      height: auto;
    }
    .tit {
      padding: 5px 35px;
      font-size: 24px;
    }
    .txt {
      width: calc(100% - 70px);
      margin: 0 auto 15px;
      padding: 12px 0;
      font-size: 24px;
      font-weight: 700;
      color: #7dbe2b;
      background: rgba(125, 190, 43, 0.1);
      border-radius: 5px;
      border: 2px solid #7dbe2b;
    }
    .txt p {
      text-align: center;
    }
    .txt2 {
      color: #0d79d9;
      border-color: #0d79d9;
      background: rgba(13, 121, 217, 0.1);
    }
    .txt3 {
      color: #f18101;
      background: rgba(241, 129, 1, 0.1);
      border-radius: 5px 5px 5px 5px;
      border: 2px solid #f18101;
    }
  </style>

  <body>
    <div class="main">
      <img class="top" src="./home/bg2.png" alt="" />

      <div class="tit">请选择预约项目</div>

      <div class="txt" id="url1">
        <p>琴澳儿童健康生活</p>
        <p>展厅预约</p>
      </div>
      <div class="txt txt2" id="url2">
        <p>琴澳儿童健康生活教育</p>
        <p>课堂预约</p>
      </div>
      <div class="txt txt3" id="url3">
        <p>交通指南</p>
      </div>
      <br />
      <br />
    </div>
  </body>
  <script>
    //----- 图片还未加载出来，高度为0，点击按钮错位问题

    // 1.获取屏幕的宽度
    const pageWidth = window.innerWidth >= 500 ? 500 : window.innerWidth

    // 顶部 图片的 宽高比为 1：0.92

    // 计算出图片的高度为
    const imgHeight = Math.round(pageWidth * 0.92)

    document.querySelector('.top').style.height = imgHeight + 'px'

    const url1Dom = document.querySelector('#url1')
    url1Dom.onclick = () => {
      window.location.href = '/web/#/exhi'
    }

    const url2Dom = document.querySelector('#url2')

    url2Dom.onclick = () => {
      window.location.href = '/web/#/'
    }

    const url3Dom = document.querySelector('#url3')

    url3Dom.onclick = () => {
      window.location.href = '/web/#/map'
    }
  </script>
</html>