123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- <!DOCTYPE html>
- <html class="">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport"
- content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
- <title>配置终端</title>
- </head>
- <style>
- #logo {
- margin-top: 25px;
- padding: 10px;
- border-radius: 2px;
- width: 90px;
- height: 90px;
- background: url(../img/logo.png);
- background-size: 100%;
- }
- .logo-title {
- font-size: 18px;
- }
- .logo-title-2 {
- margin-top: 25px;
- }
- .grid-hero {
- margin-top: 1rem;
- margin-bottom: 1rem;
- }
- .section {
- color: #fff;
- }
- .bg-grey {
- padding: 1rem;
- }
- .modal-container {
- width: 80%;
- }
- .input-section {
- overflow: hidden;
- }
- html {
- /*可以选其中一种背景色*/
- background-blend-mode: multiply;
- background-image: linear-gradient(to top, #a3bded 0%, #6991c7 100%);
- height: 100%;
- }
- body {
- background: transparent !important;
- height: 100%;
- position: relative;
- }
- body .btn.btn-primary {
- height: 4rem;
- background: rgba(16, 142, 233, 0.92);
- border-color: rgba(16, 142, 233, 96);
- }
- body .btn.btn-primary:hover, body .btn.btn-primary:active {
- background: rgba(16, 142, 233, 0.96);
- border-color: rgba(16, 142, 233, 1);
- }
- body .form-input {
- border-color: rgba(16, 142, 233, .1);
- height: 4rem;
- }
- body .form-input:focus {
- border-color: rgba(16, 142, 233, 1);
- }
- #connect {
- margin-top: 20px;
- padding: 0 40px;
- }
- .tip-model {
- position: fixed;
- width: 100%;
- height: 100%;
- top: 0;
- background: rgba(0, 0, 0, .5) url('../img/down-tip.png') no-repeat;
- background-size: 60%;
- background-position: 85% 1%;
- }
- </style>
- <body>
- <section class="section bg-grey">
- <section class="grid-hero container grid-480">
- <header class="text-center">
- <div id="logo" style="display: inline-block"></div>
- <p class="logo-title">微付乐WIFI配网</p>
- <p class="logo-title-2">版本: v1.1.1</p>
- </header>
- </section>
- </section>
- <section class="section input-section">
- <section class="container grid-480">
- <form class="main-form">
- <div class="form-group text-center ">
- <button type="button" id="connect" class="btn btn-primary ">立即使用</button>
- </div>
- </form>
- </section>
- </section>
- <div class="tip-model">
- </div>
- <link href="spectre.min.css" rel="stylesheet"/>
- <script src="zepto.min.js"></script>
- <script src="qrcode.min.js"></script>
- <script>
- </script>
- </body>
- </html>
|