123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- <!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>
- 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>
|