短息验证码登录

src/main/resources/static/css/account/login.css

@@ -6,33 +6,44 @@ li{list-style:none}
  */
 @media screen and (min-width:768px){
  footer .footTop{display:none;}
- .loginWrap{width:950px;height:400px;overflow:hidden;background:#FFF url(/img/account/login.png) no-repeat 30px center;margin:95px auto;box-sizing:border-box;box-shadow:0 10px 20px 0 rgba(255,180,150,0.17);border-radius:2px}
- .loginForm{float:right;width:400px;padding:20px 24px;font-size:14px;position:relative;height: 100%;box-sizing: border-box;}
- .loginForm h1{color:#22272e;font-size:24px;font-weight:bold;line-height:30px}
- .loginForm h2{color:#22272e;font-size:16px;font-weight:normal;line-height:24px}
+ .loginWrap{width:1200px;height:600px;overflow:hidden;margin:80px auto;box-sizing:border-box;background: #FFFFFF; box-shadow:0 10px 20px 0 rgba(255,180,150,0.17);border-radius:2px;padding: 40px 88px;}
+ .login-image{ width: 460px;height: 348px;float: left;margin-top: 60px; }
+ .login-image img{ width: 460px;height: 348px;display: block; }
+ .loginForm{float:right;width:400px;padding:0px 24px;font-size:14px;position:relative;height: 100%;box-sizing: border-box;}
+ .loginForm h1{color:#22272e;font-size:14px;font-weight:normal;line-height:24px;}
+ .loginForm h2{color:#E15616;font-size:24px;font-weight:bold;line-height:30px;}
+ .loginForm .formLine-tabs{ width: 100%;height: 66px;box-sizing: border-box;padding: 21px 0;float: left;margin-bottom: 10px;}
+ .loginForm .formLine-tabs .tabs-item{ width: 50%;height: 24px;box-sizing: border-box;float: left;display: block;line-height: 24px;font-size: 18px;color: #22272E;position: relative;text-align: center;}
+ .loginForm .formLine-tabs .tabs-item:before{content: '';width: 24px;height: 4px;background: #FFFFFF;position: absolute;bottom: -5px;left: 50%;margin-left: -12px;}
+ .loginForm .formLine-tabs .tabs-item.current{font-weight: bold;}
+ .loginForm .formLine-tabs .tabs-item.current:before{background: #E15621;}
  .loginForm form{margin-top:10px;}
- .loginForm .formLine{height:70px;padding:0;}
+ .loginForm .formLine{width: 100%; height:70px;padding:0;float: left;position: relative;}
+ .loginForm .formLine .code-btn{width: 96px;height: 48px;line-height: 48px;text-align: center;background: #E15621;font-size: 14px;color: #FFFFFF;position: absolute;right: 0;top: 0;}
  .loginForm input{height:48px;line-height:48px;}
+ .loginForm input.smscode{padding-right: 96px;box-sizing: border-box;}
  .loginForm .checked{top:14px;}
- .loginForm .forget{text-align:right;color:#4a4f58;font-size:14px;line-height:30px;margin-top:0px;}
+ .loginForm .forget{width: 100%;float: left; text-align:right;color:#4a4f58;font-size:14px;line-height:30px;margin:0 0 10px 0;}
  .loginForm .forget .btn{float: left;color: #E15621;}
- .loginForm .submit{height:44px;line-height:0;font-size:0;text-align:justify;margin-top:20px}
+ .loginForm .submit{height:44px;line-height:0;font-size:0;text-align:justify;margin-top:10px;width: 100%;float: left;}
  .loginForm .submit:after{content:'';display:inline-block;width:100%}
  .loginForm .submit .btn{display:inline-block;box-sizing:border-box;width:100%;height:44px;line-height:44px;background-color:#ffe6dc;border-radius:2px;border:solid 1px #e15616;text-align:center;color:#e15616;font-size:14px;cursor:pointer}
  .loginForm .submit button.btn{background-color:#e15616;color:#FFF}
  .loginForm .submit button.disabled{background-color:#E1E1E1;color:#F7F7F7;border-color:#E1E1E1;}
+ .loginForm .login-line{width: 100%;height: 1px;background: #E2E2E2;margin-top: 10px;float: left;position: relative;}
+ .loginForm .login-line span{display: block;line-height: 24px;padding: 0 5px;text-align: center;font-size: 12px;color: #999999;position: absolute;background: #FFFFFF;left: 50%;top: -12px;margin-left: -30px;}
  /*.loginForm .submit .btn:hover{opacity:.8}*/
- .loginForm .codeBtn{position:absolute;right:0;top:0;width:90px;height:90px;}
- .loginForm .codeBtn:before{width:90px;height:90px;background-position:-138px -146px}
- .loginForm .qrCodeBox{text-align:center}
+ .loginForm .from-wechat{width: 100%;height: 40px;margin-top: 10px;float: left;}
+ .loginForm .codeBtn{width:40px;height:40px;display: block;margin: 0 auto;}
+ .loginForm .codeBtn:before{width:40px;height:40px;background-position:0 -26px;}
+ .loginForm .qrCodeBox{text-align:center;margin-top: 70px;}
  .loginForm .qrCode{width:168px;height:168px;border-radius:2px;border:solid 1px #ffb496;margin:27px auto 0 auto}
  .loginForm .qrInfo{text-align:center;height:44px;line-height:44px;font-size:16px;color:#93979f}
- .loginForm .changeBtn{display:inline-block;height:24px;line-height:24px;color:#e15616;font-size:16px;position:absolute;right:24px;top:20px}
+ .loginForm .changeBtn{display:inline-block;height:24px;line-height:24px;color:#e15616;font-size:16px;position:absolute;right:-70px;top:0;}
  .loginForm .changeBtn:before{width:24px;height:24px;background-position:-175px -251px;vertical-align:top;margin-right:6px}
  .loginForm .showPwd{position:absolute;right:22px;top:16px;width:22px;height:16px;cursor:pointer}
  .loginForm .showPwd:before{width:22px;height:20px;background-position:-240px -299px}
  .loginForm .showPwd.on:before{width:22px;height:20px;background-position:-205px -299px}
- .verify-wrap{margin-top: 0;}
  .fix-tips {background: -webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: slidetounlock 3s infinite;color: #787878 !important;}
  @keyframes slidetounlock { 0% {background-position: -100px 0;} 100% {background-position: 100px 0;} }
  #qrCodeWrap{position:relative}
@@ -50,6 +61,18 @@ li{list-style:none}
  .bg .bg-content .text-conten .status{color: #333333;font-size: 16px;line-height: 26px;margin-bottom: 30px;text-align: center;}
  .bg .bg-content .text-conten .tip-p{text-align: center;color:#e15616;font-size: 14px;line-height: 26px }
  .bg .bg-content .text-conten div{cursor: pointer;text-align: center;background: #e15616;width: 128px;height: 32px;line-height: 32px;color: #fff;margin: auto;border-radius: 2px;margin-top: 20px}
+ .foot{width:100%;height:96px;background:#262626;margin-top:80px}
+ .footer{width:1185px;margin:0 auto;text-align:center;height: 96px;box-sizing: border-box;padding: 20px 0;}
+ .footer p{line-height: 30px;color: #FFFFFF;}
+ .footer p span{margin:0 5px}
+ .footer p span a{color: #FFFFFF;}
+ .footer p span a:hover{color: #E15621;}
+ .footer p span img.icp{width: 18px;height: 18px;display: inline-block;}
+ /*极验*/
+ .verify-wrap{margin-top: 0;float: left;height: 46px;}
+ .verify-wrap .drag-btn{top: 0;height: 43px;}
+ .verify-wrap .fix-tips, .verify-msg{line-height: 44px;}
+
 }
 
 /**
@@ -59,12 +82,20 @@ li{list-style:none}
  body{background:#FFF}
  footer{display:none}
  .loginForm .showPwd{display:none;}
+ .login-image{display: none;}
  .loginForm{padding-top:4vw;text-align:center;background:#FFF url(/img/account/login_m.png) no-repeat center 25vw;background-size:57vw 43.2vw}
  .loginForm h1{color:#22272e;font-size:6.4vw;font-weight:bold;line-height:10vw}
  .loginForm h2{font-size:3.1vw;font-weight:normal;line-height:5.4vw;color:#627386}
+ .loginForm .formLine-tabs{ width: 100%;height: 12vw;box-sizing: border-box;padding: 2vw 0;margin-bottom: 2vw;}
+ .loginForm .formLine-tabs .tabs-item{ width: 50%;height: 24px;box-sizing: border-box;float: left;display: block;line-height: 24px;font-size: 18px;color: #22272E;position: relative;text-align: center;}
+ .loginForm .formLine-tabs .tabs-item:before{content: '';width: 24px;height: 4px;background: #FFFFFF;position: absolute;bottom: -5px;left: 50%;margin-left: -12px;}
+ .loginForm .formLine-tabs .tabs-item.current{font-weight: bold;}
+ .loginForm .formLine-tabs .tabs-item.current:before{background: #E15621;}
  .loginForm form{width:93.4vw;margin:54vw auto 0}
- .loginForm .formLine{height:16.4vw;padding:0;}
+ .loginForm .formLine{height:16.4vw;padding:0;position: relative;}
  .loginForm input{height:11.2vw;line-height:6vw;padding: 2.6vw 0;box-sizing: border-box;}
+ .loginForm .formLine .code-btn{width: 24.8vw;height:11.2vw;line-height: 11.2vw;text-align: center;background: #E15621;font-size:3.4vw;color: #FFFFFF;position: absolute;right: 0;top: 0;}
+ .loginForm input.smscode{padding-right: 24.8vw;box-sizing: border-box;}
  .loginForm .checked{top:3.6vw;right:3.6vw;}
  .loginForm .forget{text-align:right;color:#4a4f58;font-size:3.4vw;line-height:3.4vw;margin-bottom:4.8vw}
  .loginForm .forget .btn{float: left;color: #E15621;}
@@ -72,7 +103,9 @@ li{list-style:none}
  .loginForm .submit .btn{display:inline-block;box-sizing:border-box;width:100%;height:11.2vw;border:solid 1px #b8bfca;border-radius:2px;margin-bottom:4.8vw}
  .loginForm .submit button.btn{border-color:#e15616;background:#e15616;color:#FFF;}
  .loginForm .submit button.disabled{background-color:#E1E1E1;color:#F7F7F7;border-color:#E1E1E1;}
- .loginForm .submit .weChat{display:block;margin:6vw auto;width:50vw;color:#627386;line-height:8vw}
+ .loginForm .login-line{width: 100%;height: 1px;background: #E2E2E2;margin-top: 10px;float: left;position: relative;}
+ .loginForm .login-line span{display: block;line-height: 24px;padding: 0 5px;text-align: center;font-size: 12px;color: #999999;position: absolute;background: #FFFFFF;left: 50%;top: -12px;margin-left: -30px;}
+ .loginForm .submit .weChat{display:block;margin:10vw auto;width:50vw;color:#627386;line-height:8vw}
  .loginForm .submit .weChat span{display:inline-block;width:100%}
  .loginForm .submit .weChat .mIcon:before{width:12vw;height:12vw;background-position:0 -77.8vw}
  .bg{width: 100%;height: 100%;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 99999999;font-family: inherit;overflow: hidden;background-color: #4444444f;opacity: 0}
@@ -84,7 +117,11 @@ li{list-style:none}
  .bg .bg-content .text-conten .status{color: #333333;font-size: 3.4vw;line-height: 5.4vw;margin-bottom: 5vw;text-align: center}
  .bg .bg-content .text-conten .tip-p{text-align: center;color:#e15616;font-size: 3vw;line-height: 7vw }
  .bg .bg-content .text-conten div{cursor: pointer;text-align: center;background: #e15616;width: 66.6vw;height: 9.9vw;line-height: 9.9vw;color: #fff;margin: auto;border-radius: .54vw;margin-top: 5vw}
- .verify-wrap{margin-top: 0;width: 93.4vw !important;}
  .fix-tips {background: -webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: slidetounlock 3s infinite;color: #787878 !important;}
  @keyframes slidetounlock { 0% {background-position: -100px 0;} 100% {background-position: 100px 0;} }
+ .foot{display: none;}
+ /*极验*/
+ .verify-wrap{width: 93.4vw !important;margin-top: 0;float: left;height: 46px;margin-bottom: 4vw;}
+ .verify-wrap .drag-btn{top: 0;height: 43px;}
+ .verify-wrap .fix-tips, .verify-msg{line-height: 44px;}
 }

src/main/resources/static/js/account/login.js

@@ -8,7 +8,9 @@ var loginPage = new Vue({
         loginPassword: '',
         rule:{
             account: "(^([\\w-\\.]+)@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.)|(([\\w-]+\\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\\]?)$)|(^\\d{6,12}$)",
-            password: "^[^\\u4e00-\\u9fa5]{6,30}$"
+            password: "^[^\\u4e00-\\u9fa5]{6,30}$",
+            phone: '^\\d{6,12}$',
+            code: '^\\d{6}$',
         },
         userData: {
             account: '',
@@ -33,12 +35,27 @@ var loginPage = new Vue({
         text:'',
         stautsfalse:false,
         infofalse:false,
-        isSlideFinishState:true
+        isSlideFinishState:true,
+        loginTabs:0,
+        mobilCount:0,
+        mobileCodeText:'获取验证码',
+        mobilTime:null,
+        isMobileDisabled:false,
+        codeParams:{
+            mobile:'',
+            smsCode:''
+        }
     },
     computed: {
 
     },
     methods: {
+        getMobileImage(){
+
+        },
+        handleTabsClick(index){
+            this.loginTabs = index;
+        },
         hideBg:function(){
             this.stautsfalse=false;
         },

src/main/resources/templates/account/login.html

@@ -15,40 +15,75 @@
 <!-- 二级页面 -->
 <div id="loginPage">
     <div class="loginWrap clear">
+        <div class="login-image">
+            <img src="/img/account/login.png" alt="">
+        </div>
         <div class="loginForm">
             <div class="title">
-                <h1>欢迎登录</h1>
+                <h1>欢迎登录~</h1>
                 <h2>生美 / 医美采购服务平台</h2>
             </div>
             <form v-show="!qrCodeLogin">
-                <div class="forget">
-                    <a class="btn" href="/register.html" rel="nofollow" onclick="_czc.push(['_trackEvent','登录页面','注册','点击','','Um_Event_Regirster'])">免费注册</a>
-                    <a href="/forget.html" style="z-index: 99999">忘记密码？</a>
-                </div>
-                <div class="formLine">
-                    <input type="text" v-model.trim="loginAccount" placeholder="请输入邮箱或手机号" :rule="rule.account" maxlength="30" @blur="blurHandle($event)" needverify>
-                    <i class="checked icon mIcon"></i>
-                    <span class="errTips icon mIcon" tips="请提供正确的邮箱或手机号码"></span>
-                </div>
-                <div class="formLine">
-                    <input type="password" v-model.trim="loginPassword" placeholder="请输入密码" :rule="rule.password" maxlength="30" @blur="blurHandle($event)" needverify>
-                    <i class="checked icon mIcon"></i>
-                    <span class="errTips icon mIcon" tips="请输入正确的密码"></span>
-                    <i class="icon showPwd" @click="showPassword($event)"></i>
+                <div class="formLine-tabs">
+                    <a class="tabs-item" :class="{ current: loginTabs === 0 }" href="javascript:void(0);" @click="handleTabsClick(0)">密码登录</a>
+                    <a class="tabs-item" :class="{ current: loginTabs === 1 }" href="javascript:void(0);" @click="handleTabsClick(1)">验证码登录</a>
                 </div>
+                <template v-if="loginTabs === 0">
+                    <div class="formLine">
+                        <input type="text" v-model.trim="loginAccount" placeholder="请输入邮箱或手机号" :rule="rule.account" maxlength="30" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请提供正确的邮箱或手机号码"></span>
+                    </div>
+                    <div class="formLine">
+                        <input type="password" v-model.trim="loginPassword" placeholder="请输入密码" :rule="rule.password" maxlength="30" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入正确的密码"></span>
+                        <i class="icon showPwd" @click="showPassword($event)"></i>
+                    </div>
+                </template>
+                <template v-if="loginTabs === 1">
+                    <div class="formLine" >
+                        <input  class="massageBtn"  type="text" v-model.trim="codeParams.mobile" placeholder="请输入手机号码" :rule="rule.phone" maxlength="11" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请提供正确的邮箱或手机号码"></span>
+                    </div>
+                    <div class="formLine">
+                        <input type="text" class="smscode" v-model.trim="codeParams.smsCode" autocomplete="off" placeholder="请输入短信验证码" :rule="rule.code"  maxlength="6" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请提供正确的邮箱或手机号码"></span>
+                        <a class="code-btn" href="javascript:void(0);" @click="getMobileImage" :class="[isMobileDisabled  ? 'disabled' : '']">{{ mobileCodeText }}</a>
+                    </div>
+                </template>
                 <!-- 滑动验证 -->
                 <div class="verify-wrap" id="verify-wrap"></div>
                 <div class="submit clear">
                     <button class="btn" type="button" @click="loginSubmit()" :disabled="isSlideFinishState" :class="[isSlideFinishState ?'disabled':'']">登录</button>
-<!--                    <a v-if="!isPC" class="btn" href="/register.html" rel="nofollow">免费注册</a>-->
-                    <a v-if="!isPC && isWeChat" class="weChat" @click="weChatLogin()" href="javascript:void(0);">
-                        <span>微信授权登录</span><i class="mIcon"></i>
-                    </a>
                 </div>
-                <a v-if="isPC" href="javascript:void(0);" class="codeBtn icon" @click="toQrCodeLogin()"></a>
+                <div class="forget">
+                    <a class="btn" href="/register.html" rel="nofollow" onclick="_czc.push(['_trackEvent','登录页面','注册','点击','','Um_Event_Regirster'])">免费注册</a>
+                    <a href="/forget.html" v-if="loginTabs === 0" style="z-index: 99999">忘记密码？</a>
+                </div>
+                <template  v-if="!isPC && isWeChat" >
+                    <div class="login-line">
+                        <span>第三方登录</span>
+                    </div>
+                    <div class="submit clear">
+                        <a class="weChat" @click="weChatLogin" href="javascript:void(0);">
+                            <i class="mIcon"></i>
+                        </a>
+                    </div>
+                </template>
+                <template  v-if="isPC" >
+                    <div class="login-line">
+                        <span>第三方登录</span>
+                    </div>
+                    <div class="from-wechat">
+                        <a href="javascript:void(0);" class="codeBtn WEB-icon" @click="toQrCodeLogin"></a>
+                    </div>
+                </template>
             </form>
             <div v-if="isPC" v-show="qrCodeLogin" class="qrCodeBox">
-                <a href="javascript:void(0);" class="changeBtn icon" @click="toNormalLogin()">账号登录</a>
+                <a href="javascript:void(0);" class="changeBtn icon" @click="toNormalLogin">账号登录</a>
                 <div id="qrCodeWrap">
                     <div class="qrCode"><img src="" alt=""></div>
                     <div class="qrInfo">请使用微信扫描二维码登录“采美365网”</div>
@@ -70,7 +105,7 @@
 </div>
 
 <!-- 引入底部 -->
-<template th:replace="components/footer"></template>
+<template th:replace="article/components/article-footer"></template>
 <template th:replace="components/foot-link"></template>
 <script charset="utf-8" type="text/javascript" src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/lib/slideVerify.js(v=${version})}"></script>