ZZDianXin_UI - 郑州电信 演示

login.html 6.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  6. <title>登录</title>
  7. <meta name="keywords">
  8. <meta name="description">
  9. <meta name="renderer" content="webkit|ie-comp|ie-stand" />
  10. <meta name="format-detection" content="telephone=no">
  11. <link rel="shortcut icon" href="img/32.ico" />
  12. <script src="Script/Common/huayi.load.js"></script>
  13. <script src="Script/Common/huayi.config.js"></script>
  14. <link href="./css/login.css" rel="stylesheet">
  15. <style>
  16. .signin_left{
  17. position: relative;
  18. }
  19. .left_word{
  20. position: absolute;
  21. height: 100%;
  22. width: 50%;
  23. }
  24. .left_word>div{
  25. position: absolute;
  26. right: 0;
  27. bottom: 23%
  28. }
  29. .left_word>div h2 + p{
  30. margin-top: 22.163%;
  31. margin-bottom: 22.163%;
  32. font-size: 18px;
  33. }
  34. .signin_left h3{
  35. font-size: 24px;
  36. color: #006967;
  37. margin-bottom: 2.5%;
  38. }
  39. .signin_left h3 + p{
  40. line-height: 30px;
  41. font-size: 18px;
  42. }
  43. </style>
  44. </head>
  45. <body class="signin">
  46. <div class="signin_bg row">
  47. <div class="signin_bg_left col-md-5"></div>
  48. <div class="signin_bg_mask"></div>
  49. <div class="left_word"></div>
  50. </div>
  51. <div class="container">
  52. <div class="row clearfix">
  53. <div class="signin_left col-md-5"></div>
  54. <div class="signin_right col-md-5">
  55. <div class="signin_panel">
  56. <div class="logo_title">
  57. <!--<img src="img/snLogo.png" alt=""width="50px" height="50px"/>-->
  58. <span>郑州电信呼叫中心管理系统</span>
  59. </div>
  60. <!--<h1>思念呼叫中心管理系统</h1>-->
  61. <div class="signin_user">
  62. <i class="signin_icons"></i>
  63. <input class="form-control" type="text" placeholder="请输入您的管理账号" id="user" autofocus autocomplete="off">
  64. <i class="ts user_ts"></i>
  65. </div>
  66. <div class="signin_seat">
  67. <i class="signin_icons"></i>
  68. <input class="form-control" type="text" placeholder="请输入分机号" id="userSeat" autocomplete="off">
  69. </div>
  70. <div class="signin_password">
  71. <i class="signin_icons"></i>
  72. <input class="form-control" type="password" placeholder="请输入您的密码" id="password" autocomplete="off">
  73. <i class="ts password_ts"></i>
  74. </div>
  75. <div class="clearfix singin_rpassword">
  76. <div class="rpassword">
  77. <label for="rpassword">
  78. <input type="checkbox" id="rpassword">
  79. <span class="checkbox_icon"></span>
  80. 记住密码
  81. </label>
  82. </div>
  83. </div>
  84. <div class="btns" type="button">登录</div>
  85. <div class="signfooter">
  86. <a href="ExeWork/LeCallCenterSetup.exe">下载客户端|</a>
  87. <a href="ExeWork/Microsoft.NET4.5.2.exe">下载安装环境|</a>
  88. <a href="ExeWork/vc_redist.x86.exe">安装包异常补充包</a>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. <script>
  95. $(function () {
  96. /*输入框样式改变*/
  97. $("#user").focus(function () {
  98. $(this).parent().addClass("_success");
  99. });
  100. $("#user").blur(function () {
  101. $(this).parent().removeClass("_success");
  102. });
  103. $("#password").focus(function () {
  104. $(this).parent().addClass("_success");
  105. });
  106. $("#password").blur(function () {
  107. $(this).parent().removeClass("_success");
  108. });
  109. /*cook存储数据*/
  110. if ($.cookie("username")) {
  111. //取值如果存在则赋值
  112. $("#user").val($.cookie("user"));//用户名
  113. }
  114. $(".btns").click(function () {
  115. login();
  116. });
  117. $('input').bind('keypress', function (event) {
  118. if (event.keyCode == "13") {
  119. $('.btns').trigger("click");
  120. }
  121. });
  122. });
  123. /*点击提交*/
  124. function login() {
  125. var User = $("#user").val();
  126. var Password = $("#password").val();
  127. var userSeat = $("#userSeat").val();
  128. /*保存COOK*/
  129. //$.cookie("user", $("#user").val(),{expires: 7,secure:true});
  130. /*表单验证*/
  131. if (!User|| !Password) {
  132. $(".ts").addClass("Yz_error");
  133. if ($("#user").val() == "") {
  134. $("#user").focus(function () {
  135. $(".user_ts").removeClass("Yz_error");
  136. $(".password_ts").removeClass("Yz_error");
  137. $(this).parent().addClass("_success");
  138. });
  139. } else {
  140. $(".user_ts").addClass("Yz_success");
  141. }
  142. } else {
  143. /*请求后台*/
  144. $.ajax({
  145. type: "post",
  146. url: huayi.config.callcenter_url + "/Login/login",
  147. dataType: 'json',
  148. async: true,
  149. data: {
  150. username: User,
  151. extensionphone: userSeat,
  152. password: Password
  153. },
  154. success: function (data) {
  155. /*验证请求*/
  156. if (data.state == "success") {
  157. $.cookie("token", data.data.token, { expires: 7 });
  158. $.cookie("extno", userSeat, { expires: 7 });
  159. window.location.href = "index.html";
  160. } else {
  161. layer.msg("登录失败");
  162. }
  163. }
  164. });
  165. }
  166. }
  167. </script>
  168. </body>
  169. </html>