app.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <!DOCTYPE html>
  2. <html class="">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
  7. <title>配置终端</title>
  8. </head>
  9. <style>
  10. #logo {
  11. margin-top: 25px;
  12. padding: 10px;
  13. border-radius: 2px;
  14. width: 90px;
  15. height: 90px;
  16. background: url(../img/logo.png);
  17. background-size: 100%;
  18. }
  19. .logo-title {
  20. font-size: 18px;
  21. }
  22. .logo-title-2 {
  23. margin-top: 25px;
  24. }
  25. .grid-hero {
  26. margin-top: 1rem;
  27. margin-bottom: 1rem;
  28. }
  29. .section {
  30. color: #fff;
  31. }
  32. .bg-grey {
  33. padding: 1rem;
  34. }
  35. .modal-container {
  36. width: 80%;
  37. }
  38. .input-section {
  39. overflow: hidden;
  40. }
  41. html {
  42. /*可以选其中一种背景色*/
  43. background-blend-mode: multiply;
  44. background-image: linear-gradient(to top, #a3bded 0%, #6991c7 100%);
  45. height: 100%;
  46. }
  47. body {
  48. background: transparent !important;
  49. height: 100%;
  50. position: relative;
  51. }
  52. body .btn.btn-primary {
  53. height: 4rem;
  54. background: rgba(16, 142, 233, 0.92);
  55. border-color: rgba(16, 142, 233, 96);
  56. }
  57. body .btn.btn-primary:hover, body .btn.btn-primary:active {
  58. background: rgba(16, 142, 233, 0.96);
  59. border-color: rgba(16, 142, 233, 1);
  60. }
  61. body .form-input {
  62. border-color: rgba(16, 142, 233, .1);
  63. height: 4rem;
  64. }
  65. body .form-input:focus {
  66. border-color: rgba(16, 142, 233, 1);
  67. }
  68. #connect {
  69. margin-top: 20px;
  70. padding: 0 40px;
  71. }
  72. .tip-model {
  73. position: fixed;
  74. width: 100%;
  75. height: 100%;
  76. top: 0;
  77. background: rgba(0, 0, 0, .5) url('../img/down-tip.png') no-repeat;
  78. background-size: 60%;
  79. background-position: 85% 1%;
  80. }
  81. </style>
  82. <body>
  83. <section class="section bg-grey">
  84. <section class="grid-hero container grid-480">
  85. <header class="text-center">
  86. <div id="logo" style="display: inline-block"></div>
  87. <p class="logo-title">微付乐WIFI配网</p>
  88. <p class="logo-title-2">版本: v1.1.1</p>
  89. </header>
  90. </section>
  91. </section>
  92. <section class="section input-section">
  93. <section class="container grid-480">
  94. <form class="main-form">
  95. <div class="form-group text-center ">
  96. <button type="button" id="connect" class="btn btn-primary ">立即使用</button>
  97. </div>
  98. </form>
  99. </section>
  100. </section>
  101. <div class="tip-model">
  102. </div>
  103. <link href="spectre.min.css" rel="stylesheet"/>
  104. <script src="zepto.min.js"></script>
  105. <script src="qrcode.min.js"></script>
  106. <script>
  107. </script>
  108. </body>
  109. </html>