Login.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  8. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  9. <meta http-equiv="pragma" content="no-cache">
  10. <meta http-equiv="Cache" content="no-cache">
  11. <meta http-equiv="cache-control" content="no-cache, must-revalidate">
  12. <meta http-equiv="expires" content="0">
  13. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  14. <link rel="stylesheet" href="./css/style.css">
  15. <link rel="stylesheet" type="text/css" href="./css/element.css"/>
  16. <script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  17. <script src="./js/yz/init.js" type="text/javascript" charset="utf-8"></script>
  18. <script src="./js/crypto-js.min.js" type="text/javascript" charset="utf-8"></script>
  19. <script src="./js/yz/cmtWs.js" type="text/javascript" charset="utf-8"></script>
  20. </head>
  21. <style type="text/css">
  22. *{
  23. margin: 0;
  24. padding: 0;
  25. box-sizing: border-box;
  26. }
  27. body{
  28. height: 100vh;
  29. background-color: #1B2A46;
  30. overflow: hidden;
  31. }
  32. .logo_box{
  33. position: absolute;
  34. top: 50%;
  35. left: 50%;
  36. text-align: center;
  37. transform: translate(-50%,-50%);
  38. }
  39. .logo_box .logo_info{
  40. width: 300px;
  41. padding: 20px;
  42. border-radius: 6px;
  43. background-color: #fff;
  44. box-shadow: 0 0 6px 2px rgba(255,255,255,0.6);
  45. }
  46. button{
  47. width: 100%;
  48. height: 34px;
  49. border-radius: 4px;
  50. }
  51. .logo_info>div{
  52. display: flex;
  53. align-items: center;
  54. width: 100%;
  55. overflow: hidden;
  56. border-radius: 4px;
  57. }
  58. .logo_info>div img{
  59. width: 20px;
  60. }
  61. .logo_info>div input{
  62. padding: 10px 6px;
  63. width: calc(100% - 40px);
  64. border-left: 1px solid #d4d4d4;
  65. }
  66. .broder-t{
  67. border: 1px solid #d4d4d4;
  68. }
  69. .btnds{
  70. background-color:rgba(0, 115, 223, 0.7) !important;
  71. }
  72. @-webkit-keyframes rotation{
  73. from { -webkit-transform: rotate(0deg);}
  74. to { -webkit-transform: rotate(360deg); }
  75. }
  76. .logBtn i{
  77. display: none;
  78. -webkit- transform: rotate (360deg);
  79. animation: rotation 2s linear infinite;
  80. - moz -animation: rotation 2s linear infinite;
  81. -webkit - animation: rotation 2s linear infinite ;
  82. -o-animation: rotation 2s linear infinite;
  83. }
  84. </style>
  85. <body>
  86. <div class="logo_box">
  87. <div class="logo_info">
  88. <div class="text-bold text-xl text-black justify-center" style="margin-bottom: 40px;">瑞高船舶智能监控系统</div>
  89. <div class="broder-t margin-tb-lg">
  90. <div style="width: 40px;"><img src="./imgs/usericon.png" alt=""></div>
  91. <input type="text" name="user" placeholder="用户名" value="admin">
  92. </div>
  93. <div class="broder-t">
  94. <div style="width: 40px;"><img src="./imgs/pwdicon.png" alt=""></div>
  95. <input type="password" name="pwd" placeholder="密码" value="Yzkj@2022.">
  96. </div>
  97. <div class="margin-top-lg justify-between">
  98. <div class="broder-t flex align-center" style="width: calc(100% - 110px);">
  99. <div style="width: 40px;"><img src="./imgs/code.png" alt=""></div>
  100. <input type="text" name="codepwd" placeholder="验证码">
  101. </div>
  102. <img src="" alt="" id="codeImg" style="width: 100px;">
  103. </div>
  104. <!-- <div class="margin-top-lg justify-between">
  105. <div class="broder-t flex align-center" style="width: calc(100% - 110px);">
  106. <div style="width: 40px;"><img src="./imgs/code.png" alt=""></div>
  107. <input type="text" name="yzcodepwd" placeholder="验证码">
  108. </div>
  109. <img src="" alt="" id="yzcodeImg" style="width: 100px;">
  110. </div> -->
  111. <button type="button" class="bg-blue logBtn" style="margin-top: 30px;">
  112. <i class="iconfont icon-jiazai"></i>
  113. <span>登录</span>
  114. </button>
  115. </div>
  116. </div>
  117. </body>
  118. <script type="text/javascript">
  119. document.write('<script src="./js/login.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  120. </script>
  121. </html>