No Description

login.html 10KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
  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. <script src="Script/Common/huayi.load.js"></script>
  11. <script src="Script/Common/huayi.config.js"></script>
  12. <link rel="shortcut icon" href="img/32.ico" />
  13. <link href="./css/bootstrap.min.css" rel="stylesheet">
  14. <link href="./css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
  15. <link href="./css/animate.min.css" rel="stylesheet">
  16. <link href="./css/style.min.css" rel="stylesheet">
  17. <!--<link href="./css/login.min.css" rel="stylesheet">-->
  18. <link rel="stylesheet" href="css/initialize.css" />
  19. <script src="./js/jquery.md5.js"></script>
  20. <style>
  21. body{
  22. height: 100%;
  23. }
  24. .head,.foot{
  25. background: #fff;
  26. width: 100%;
  27. height: 10%;
  28. box-sizing: border-box;
  29. }
  30. .foot{
  31. text-align: center;
  32. }
  33. .headCon,.mainCon,.footCon{
  34. width: 1200px;
  35. margin: 0 auto;
  36. }
  37. .headCon{
  38. box-sizing: border-box;
  39. height: 100%;
  40. }
  41. .wrap{
  42. height: 500px;
  43. background: #030819;
  44. width: 100%;
  45. height: 80%;
  46. }
  47. .footCon{
  48. /*padding: 54px 0 32px 0;*/
  49. }
  50. .footCon ul li{
  51. float: left;
  52. text-align: center;
  53. color: #243747;
  54. padding: 0 5px;
  55. }
  56. .footCon ul li a{
  57. display: block;
  58. color: #243747;
  59. }
  60. .Copy{
  61. color: #243747;
  62. text-align: center;
  63. }
  64. .center{
  65. display: inline-block;
  66. height: 100%;
  67. vertical-align: middle;
  68. }
  69. .mainCon,.mainCon_left,.mainCon_right,.img_box{
  70. height: 100%;
  71. }
  72. .mainCon_right{
  73. text-align: center;
  74. }
  75. .tab_box{
  76. background: #fff;
  77. height: 346px;
  78. display: inline-block;
  79. width: 375px;
  80. vertical-align: middle;
  81. }
  82. .tab_box ul li {
  83. width: 50%;
  84. float: left;
  85. width: 50%;
  86. float: left;
  87. padding: 20px 0;
  88. text-align: center;
  89. color: #243747;
  90. font-size: 16px;
  91. }
  92. .tab_box ul{
  93. border-bottom: 1px solid #cdcdcd;
  94. }
  95. .tab_content div p {
  96. width: 300px;
  97. margin: 0 auto;
  98. height: 36px;
  99. border: 1px solid #ebebed;
  100. border-radius: 5px;
  101. margin-bottom: 25px;
  102. line-height: 36px;
  103. padding-left: 10px;
  104. text-align: initial;
  105. }
  106. .tab_content div p input {
  107. width: 200px;
  108. border: 0;
  109. font-size: 14px;
  110. outline: none;
  111. color: #323232;
  112. }
  113. .login_icon {
  114. display: inline-block;
  115. width: 25px;
  116. height: 19px;
  117. vertical-align: sub;
  118. margin-right: 15px;
  119. border-right: 1px solid #cdcdcd;
  120. }
  121. .tab_content .login_go {
  122. text-align: center;
  123. padding: 0!important;
  124. font-size: 16px!important;
  125. letter-spacing: 16px;
  126. color: #fff;
  127. background: #1ab394;
  128. height: 49px!important;
  129. line-height: 49px!important;
  130. cursor: pointer;
  131. }
  132. .login_icon_user {
  133. background: url(img/user-icon.png) no-repeat;
  134. }
  135. .login_icon_hua {
  136. background: url(img/fj-icon.png) no-repeat;
  137. }
  138. .login_icon_lock {
  139. background: url(img/psw-icon.png) no-repeat;
  140. }
  141. .error {
  142. width: 16px;
  143. height: 16px;
  144. background: url(img/xx-error.png) no-repeat;
  145. display: none;
  146. border: 0;
  147. }
  148. .errorShow {
  149. display: inline-block;
  150. }
  151. .active{
  152. position: relative;
  153. }
  154. .active:after{
  155. display: block;
  156. content: "";
  157. position: absolute;
  158. height: 2px;
  159. width: 45%;
  160. background: #00b194;
  161. margin: 0 auto;
  162. bottom: -1px;
  163. right: 0;
  164. left: 0;
  165. top: auto;
  166. }
  167. .tab_content>div{
  168. padding-top: 24px;
  169. }
  170. .tab_content{
  171. border: 1px solid transparent
  172. }
  173. </style>
  174. </head>
  175. <body class="signin">
  176. <div class="head">
  177. <div class="headCon">
  178. <img src="img/logo.png" alt="" style="vertical-align: middle;" />
  179. <span class="center"></span>
  180. </div>
  181. </div>
  182. <div class="wrap">
  183. <div class="mainCon row">
  184. <div class="mainCon_left col-sm-7">
  185. <div class="img_box">
  186. <img src="img/xx_bg_03.png" alt="" style="vertical-align: middle;display: inline-block; width: 95%;" />
  187. <span class="center"></span>
  188. </div>
  189. </div>
  190. <div class="mainCon_right col-sm-5">
  191. <div class="tab_box">
  192. <ul class="clearfix tab_ul">
  193. <li class="active">坐席登录</li>
  194. <li>用户登录</li>
  195. </ul>
  196. <div class="tab_content">
  197. <div class="tab_one">
  198. <p>
  199. <i class="login_icon login_icon_user "></i>
  200. <input class="zx_user" type="text" placeholder="请输入您的管理账号" />
  201. <i class="login_icon error error_zx error_zx_user"></i>
  202. </p>
  203. <p>
  204. <i class="login_icon login_icon_hua "></i>
  205. <input class="zx_fj" type="text" placeholder="请输入分机号" />
  206. <i class="login_icon error error_zx error_zx_fj"></i>
  207. </p>
  208. <p>
  209. <i class="login_icon login_icon_lock "></i>
  210. <input class="zx_psw" type="password" placeholder="请输入您的密码" />
  211. <i class="login_icon error error_zx error_zx_psw"></i>
  212. </p>
  213. <p class="login_go login_zx">登录</p>
  214. </div>
  215. <div class="tab_two" style="display: none;">
  216. <p>
  217. <i class="login_icon login_icon_user "></i>
  218. <input class="gl_user" type="text" placeholder="请输入您的管理账号" />
  219. <i class="login_icon error error_gl error_gl_user"></i>
  220. </p>
  221. <p>
  222. <i class="login_icon login_icon_lock"></i>
  223. <input class="gl_psw" type="password" placeholder="请输入您的密码" />
  224. <i class="login_icon error error_gl error_gl_psw"></i>
  225. </p>
  226. <p class="login_go login_gl">登录</p>
  227. </div>
  228. </div>
  229. </div>
  230. <span class="center"></span>
  231. </div>
  232. </div>
  233. </div>
  234. <div class="foot">
  235. <div class="footCon" style="display: inline-block; vertical-align: middle;">
  236. <!--<ul class="clearFix" style=" text-align:center; margin: 0 auto;">
  237. <li><a href="ExeWork/LeCallCenterSetup.exe">下载客户端</a></li>
  238. <li>|</li>
  239. <li><a href="ExeWork/Microsoft.NET4.0.exe">下载安装环境</a></li>
  240. <li>|</li>
  241. <li><a href="ExeWork/vcredist_x86.exe">安装异常补充包</a></li>
  242. <li>|</li>
  243. <li>技术服务热线:400-637-1311</li>
  244. </ul>-->
  245. <div style="vertical-align: middle;">
  246. <a href="ExeWork/LeCallCenterSetup.exe">下载客户端</a> |
  247. <a href="ExeWork/Microsoft.NET4.0.exe">下载安装环境</a> |
  248. <a href="ExeWork/vcredist_x86.exe">安装异常补充包</a> |
  249. 技术服务热线:400-637-1311</div>
  250. <p class="Copy" style="margin-top: 13px;">Copyright©2010-2020 华谊科技 版权所有</p>
  251. </div>
  252. <span class="center"></span>
  253. </div>
  254. <script>
  255. $(function() {
  256. var a=0;
  257. $('.tab_ul li').click(function() {
  258. $(this).addClass("active").siblings().removeClass("active");
  259. var index = $(this).index();
  260. a=index;
  261. $('.tab_content').children('div').eq(index).show().siblings().hide();
  262. })
  263. /*cook存储数据*/
  264. if($.cookie("username")) {
  265. //取值如果存在则赋值
  266. console.log($.cookie("username"))
  267. $(".gl_user").val($.cookie("user")); //用户名
  268. $("zx_fj").val($.cookie("fj"));
  269. $(".zx_user").val($.cookie("user"));
  270. }
  271. //键盘登录事件
  272. $('input').bind('keypress', function(event) {
  273. if(event.keyCode == "13") {
  274. console.log(a);
  275. if(a == 0) {
  276. $('.login_zx').trigger("click");
  277. } else {
  278. $(".login_gl").trigger("click");
  279. }
  280. }
  281. });
  282. //坐席登录
  283. $('.login_zx').click(function(){
  284. console.log("坐席")
  285. var zx_user = $(".zx_user").val();
  286. var zx_fj = $(".zx_fj").val();
  287. var zx_psw = $(".zx_psw").val();
  288. if(zx_user == "" || zx_fj == "" || zx_psw == "") {
  289. $(".error_zx").addClass('errorShow');
  290. if($(".zx_user").val() == "") {
  291. $(".zx_user").focus(function() {
  292. $(".error_zx").removeClass('errorShow');
  293. });
  294. } else {
  295. $(".error_zx_user").removeClass('errorShow');
  296. }
  297. }else {
  298. /*请求后台*/
  299. $.cookie("extno",zx_fj);
  300. $.cookie("zx_user",zx_user);
  301. $.ajax({
  302. type: "post",
  303. url: huayi.config.callcenter_url + "/Login/login",
  304. dataType: 'json',
  305. async: true,
  306. data: {
  307. username: zx_user,
  308. extensionphone: zx_fj,
  309. password: zx_psw //$.md5
  310. },
  311. success: function(data) {
  312. /*验证请求*/
  313. if(data.state == "success") {
  314. $.cookie("token", data.data.token, {
  315. expires: 7
  316. });
  317. $.cookie("extno", zx_fj, {
  318. expires: 7
  319. });
  320. $.cookie("zx_user", zx_user, {
  321. expires: 7
  322. });
  323. window.location.href = "index.html";
  324. }else{
  325. $(".zx_user").val('');
  326. $(".zx_fj").val('');
  327. $(".zx_psw").val('');
  328. console.log(data);
  329. }
  330. }
  331. });
  332. }
  333. })
  334. //用户登录
  335. $('.login_gl').click(function() {
  336. console.log("用户")
  337. var gl_user = $(".gl_user").val();
  338. var gl_psw = $(".gl_psw").val();
  339. if(gl_user == "" || gl_psw == "") {
  340. $(".error_gl").addClass('errorShow');
  341. if($(".gl_user").val() == "") {
  342. $(".gl_user").focus(function() {
  343. $(".error_gl").removeClass('errorShow');
  344. });
  345. } else {
  346. $(".error_gl_user").removeClass('errorShow');
  347. }
  348. } else {
  349. /*请求后台*/
  350. $.ajax({
  351. type: "post",
  352. url: huayi.config.callcenter_url + "/Login/login",
  353. dataType: 'json',
  354. async: true,
  355. data: {
  356. username: gl_user,
  357. password: gl_psw //$.md5
  358. },
  359. success: function(data) {
  360. /*验证请求*/
  361. if(data.state == "success") {
  362. $.cookie("token", data.data.token, {
  363. expires: 7
  364. });
  365. window.location.href = "index.html";
  366. }else{
  367. $(".gl_user").val('');
  368. $(".gl_psw").val('');
  369. console.log(data.state);
  370. }
  371. }
  372. });
  373. }
  374. })
  375. })
  376. </script>
  377. </body>
  378. </html>