home.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  7. <title>琴澳儿童健康生活科普馆</title>
  8. </head>
  9. <style>
  10. * {
  11. margin: 0;
  12. padding: 0;
  13. }
  14. body {
  15. width: 100vw;
  16. height: 100vh;
  17. }
  18. .main {
  19. width: 100%;
  20. height: 100%;
  21. overflow-y: auto;
  22. max-width: 500px;
  23. margin: 0 auto;
  24. }
  25. .top {
  26. width: 100%;
  27. height: auto;
  28. }
  29. .tit {
  30. padding: 5px 35px;
  31. font-size: 24px;
  32. }
  33. .txt {
  34. width: calc(100% - 70px);
  35. margin: 0 auto 15px;
  36. padding: 12px 0;
  37. font-size: 24px;
  38. font-weight: 700;
  39. color: #7dbe2b;
  40. background: rgba(125, 190, 43, 0.1);
  41. border-radius: 5px;
  42. border: 2px solid #7dbe2b;
  43. }
  44. .txt p {
  45. text-align: center;
  46. }
  47. .txt2 {
  48. color: #0d79d9;
  49. border-color: #0d79d9;
  50. background: rgba(13, 121, 217, 0.1);
  51. }
  52. .txt3 {
  53. color: #f18101;
  54. background: rgba(241, 129, 1, 0.1);
  55. border-radius: 5px 5px 5px 5px;
  56. border: 2px solid #f18101;
  57. }
  58. </style>
  59. <body>
  60. <div class="main">
  61. <img class="top" src="./home/bg2.png" alt="" />
  62. <div class="tit">请选择预约项目</div>
  63. <div class="txt" id="url1">
  64. <p>琴澳儿童健康生活</p>
  65. <p>展厅预约</p>
  66. </div>
  67. <div class="txt txt2" id="url2">
  68. <p>琴澳儿童健康生活教育</p>
  69. <p>课堂预约</p>
  70. </div>
  71. <div class="txt txt3" id="url3">
  72. <p>交通指南</p>
  73. </div>
  74. <br />
  75. <br />
  76. </div>
  77. </body>
  78. <script>
  79. const url1Dom = document.querySelector('#url1')
  80. url1Dom.onclick = () => {
  81. window.location.href = '/web/#/exhi'
  82. }
  83. const url2Dom = document.querySelector('#url2')
  84. url2Dom.onclick = () => {
  85. window.location.href = '/web/#/'
  86. }
  87. const url3Dom = document.querySelector('#url3')
  88. url3Dom.onclick = () => {
  89. window.location.href = '/web/#/map'
  90. }
  91. </script>
  92. </html>