思念食品 UI

login.html 7.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  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. <link rel="shortcut icon" href="img/32.ico" />
  11. <script src="Script/Common/huayi.load.js"></script>
  12. <script src="Script/Common/huayi.config.js"></script>
  13. <link href="./css/login.css" rel="stylesheet">
  14. <!--[if lt IE 9]>
  15. <meta http-equiv="refresh" content="0;ie.html" />
  16. <![endif]-->
  17. <style>
  18. .signin_left{
  19. position: relative;
  20. }
  21. .left_word{
  22. position: absolute;
  23. height: 100%;
  24. width: 50%;
  25. }
  26. .left_word>div{
  27. position: absolute;
  28. right: 0;
  29. bottom: 23%
  30. }
  31. .left_word>div h2 + p{
  32. margin-top: 22.163%;
  33. margin-bottom: 22.163%;
  34. font-size: 18px;
  35. }
  36. .signin_left h3{
  37. font-size: 24px;
  38. color: #006967;
  39. margin-bottom: 2.5%;
  40. }
  41. .signin_left h3 + p{
  42. line-height: 30px;
  43. font-size: 18px;
  44. }
  45. </style>
  46. </head>
  47. <body class="signin">
  48. <div class="signin_bg row">
  49. <div class="signin_bg_left col-md-5"></div>
  50. <div class="signin_bg_mask"></div>
  51. <div class="left_word">
  52. <!--<div>
  53. <h3>用心做,更出色</h3>
  54. <p>致力于临床实验技术的普及和提高,为人类健康服务</p>
  55. </div>-->
  56. </div>
  57. </div>
  58. <div class="container">
  59. <div class="row clearfix">
  60. <div class="signin_left col-md-5">
  61. <!--<h2>
  62. <i></i>
  63. <span>全客服平台</span>
  64. </h2>-->
  65. <!--<p>欢迎您进入全客服平台,开启智慧客服新篇章!</p>-->
  66. <!--<div class="left_word">
  67. <h3>用心做,更出色</h3>
  68. <p>致力于临床实验技术的普通和提高,为人类健康服务</p>
  69. </div>-->
  70. </div>
  71. <div class="signin_right col-md-5">
  72. <div class="signin_panel">
  73. <div class="logo_title">
  74. <img src="img/snLogo.png" alt=""width="50px" height="50px"/>
  75. <span>思念呼叫中心管理系统</span>
  76. </div>
  77. <!--<h1>思念呼叫中心管理系统</h1>-->
  78. <div class="signin_user">
  79. <i class="signin_icons"></i>
  80. <input class="form-control" type="text" placeholder="请输入您的管理账号" id="user" autofocus autocomplete="off">
  81. <i class="ts user_ts"></i>
  82. </div>
  83. <div class="signin_seat">
  84. <i class="signin_icons"></i>
  85. <input class="form-control" type="text" placeholder="请输入分机号" id="userSeat" autocomplete="off">
  86. </div>
  87. <div class="signin_password">
  88. <i class="signin_icons"></i>
  89. <input class="form-control" type="password" placeholder="请输入您的密码" id="password" autocomplete="off">
  90. <i class="ts password_ts"></i>
  91. </div>
  92. <div class="clearfix singin_rpassword">
  93. <div class="rpassword">
  94. <label for="rpassword">
  95. <input type="checkbox" id="rpassword">
  96. <span class="checkbox_icon"></span>
  97. 记住密码
  98. </label>
  99. </div>
  100. <!--<div class="fpassword">
  101. <a href="#" title="忘记密码">忘记秘密?</a>
  102. </div>-->
  103. </div>
  104. <div class="btns" type="button">登录</div>
  105. <!--<div class="fregister">
  106. <span>还没有账号?</span>
  107. <a href="#" title="立即注册">立即注册&gt;&gt;</a>
  108. </div>-->
  109. <div class="signfooter">
  110. <a href="ExeWork/LeCallCenterSetup.exe">下载客户端|</a>
  111. <a href="ExeWork/Microsoft.NET4.5.2.exe">下载安装环境|</a>
  112. <a href="ExeWork/vc_redist.x86.exe">安装包异常补充包</a>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. <script>
  119. $(function () {
  120. /*输入框样式改变*/
  121. $("#user").focus(function () {
  122. $(this).parent().addClass("_success");
  123. });
  124. $("#user").blur(function () {
  125. $(this).parent().removeClass("_success");
  126. });
  127. $("#password").focus(function () {
  128. $(this).parent().addClass("_success");
  129. });
  130. $("#password").blur(function () {
  131. $(this).parent().removeClass("_success");
  132. });
  133. /*cook存储数据*/
  134. if ($.cookie("username")) {
  135. //取值如果存在则赋值
  136. $("#user").val($.cookie("user"));//用户名
  137. }
  138. $(".btns").click(function () {
  139. login();
  140. });
  141. $('input').bind('keypress', function (event) {
  142. if (event.keyCode == "13") {
  143. $('.btns').trigger("click");
  144. }
  145. });
  146. });
  147. /*点击提交*/
  148. function login() {
  149. var User = $("#user").val();
  150. var Password = $("#password").val();
  151. var userSeat = $("#userSeat").val();
  152. /*保存COOK*/
  153. //$.cookie("user", $("#user").val(),{expires: 7,secure:true});
  154. /*表单验证*/
  155. if (User == "" || Password == "") {
  156. $(".ts").addClass("Yz_error");
  157. if ($("#user").val() == "") {
  158. $("#user").focus(function () {
  159. $(".user_ts").removeClass("Yz_error");
  160. $(".password_ts").removeClass("Yz_error");
  161. $(this).parent().addClass("_success");
  162. });
  163. } else {
  164. $(".user_ts").addClass("Yz_success");
  165. }
  166. } else {
  167. /*请求后台*/
  168. $.ajax({
  169. type: "post",
  170. url: huayi.config.callcenter_url + "/Login/login",
  171. dataType: 'json',
  172. async: true,
  173. data: {
  174. username: User,
  175. extensionphone: userSeat,
  176. password: Password
  177. },
  178. success: function (data) {
  179. /*验证请求*/
  180. if (data.state == "success") {
  181. $.cookie("token", data.data.token, { expires: 7 });
  182. $.cookie("extno", userSeat, { expires: 7 });
  183. window.location.href = "index.html";
  184. } else {
  185. layer.msg("登录失败");
  186. $("#user").val('');
  187. $("#userSeat").val('');
  188. $("#password").val('');
  189. }
  190. }
  191. });
  192. }
  193. }
  194. </script>
  195. </body>
  196. </html>