优化

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

@@ -17,18 +17,20 @@ li{list-style:none}
  .loginForm{width:400px;padding:0px 24px;font-size:14px;position:relative;height: 100%;box-sizing: border-box;margin: 0 auto;}
  .loginForm h2{color:#FF5B00;font-size:24px;font-weight:bold;line-height:30px;text-align: center;}
  .loginForm h2.dep{color:#977fb9;}
- .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{ width: 100%;height: 66px;box-sizing: border-box;padding: 21px 48px;float: left;margin-bottom: 10px;}
+ .loginForm .formLine-tabs .tabs-item{ width: 50%;height: 24px;box-sizing: border-box;font-weight: bold;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{color: #ff5b00;}
  .loginForm .formLine-tabs .tabs-item.current:before{background: #E15621;}
+ .loginForm .formLine-tabs .tabs-item.dep.current{color: #977fb9;}
+ .loginForm .formLine-tabs .tabs-item.dep.current:before{background: #977fb9;}
  .loginForm form{margin-top:10px;}
  .loginForm .formLine{width: 100%; height:70px;padding:0;float: left;position: relative;}
  .loginForm .formLine.smscode{width:100%;}
- .loginForm .formLine .code-btn{width: 130px;height: 48px;line-height: 48px;text-align: center;background: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);font-size: 14px;color: #FFFFFF;position: absolute;right: 0;top: 0;border-radius: 0 30px 30px 0;}
+ .loginForm .formLine .code-btn{width: 130px;height: 48px;line-height: 48px;text-align: center;font-size: 14px;color: #FF5B00;position: absolute;right: 0;top: 0;border-radius: 0 30px 30px 0;}
  .loginForm .formLine .code-btn.disabled{background: rgba(225,86,33,0.7);}
- .loginForm .formLine .code-btn.dep{ background: linear-gradient(90deg, #977fb9 0%, #1c1c1c 100%); }
- .loginForm input{height:48px;line-height:48px;}
+ .loginForm .formLine .code-btn.dep{ color: #977fb9; }
+ .loginForm input{height:48px;line-height:48px;background-color: #f3f6f8;border: none;border-radius: 8px;}
  .loginForm input.smscode{padding-right: 96px;box-sizing: border-box;}
  .loginForm .checked{top:14px;}
  .loginForm .forget{width: 100%;float: left; text-align:right;color:#4a4f58;font-size:14px;line-height:30px;margin:0 0 10px 0;}
@@ -36,7 +38,7 @@ li{list-style:none}
  .loginForm .forget.dep .btn{float: left;color: #977fb9;}
  .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:48px;line-height:48px;background-color:#ffe6dc;border-radius:24px;border:solid 1px #FF5B00;text-align:center;color:#FF5B00;font-size:14px;cursor:pointer}
+ .loginForm .submit .btn{display:inline-block;box-sizing:border-box;width:100%;height:48px;line-height:48px;background-color:#ffe6dc;border-radius:8px;border:none;text-align:center;color:#FF5B00;font-size:14px;cursor:pointer}
  .loginForm .submit button.btn{background:linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);color:#FFF}
  .loginForm .submit button.btn.dep{background:linear-gradient(90deg, #977fb9 0%, #1c1c1c 100%);color:#FFF;border-color:#977fb9;}
  .loginForm .submit button.disabled{background:#E1E1E1 !important;color:#F7F7F7;border-color:#E1E1E1 !important;}
@@ -79,11 +81,11 @@ li{list-style:none}
  .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;border-radius: 23px;}
- .verify-wrap .drag-btn{left:2px;top: 2px;height: 40px;border-radius:24px;border:1px solid #b8bfca;}
- .verify-wrap .fix-tips, .verify-msg{line-height: 44px;border-radius: 22px;}
- .verify-wrap .drag-progress{ top: 2px;border-radius: 22px 0 0 22px;}
- .verify-wrap .suc-drag-btn{ border-radius: 50px; }
+ .verify-wrap{margin-top: 0;float: left;height: 46px;border-radius: 8px;}
+ .verify-wrap .drag-btn{left:2px;top: 2px;height: 40px;border-radius:8px;border:1px solid #b8bfca;}
+ .verify-wrap .fix-tips, .verify-msg{line-height: 44px;border-radius: 8px;}
+ .verify-wrap .drag-progress{ top: 2px;border-radius: 8px 0 0 8px;}
+ .verify-wrap .suc-drag-btn{ border-radius: 8px; }
 
 }
 
@@ -93,26 +95,28 @@ li{list-style:none}
 @media screen and (max-width:768px){
  body{background:#FFF}
  footer{display:none}
- .baseHeadCenter.account.dep{background: #1c1c1c;height: 21.4vw;}
- .baseHeadCenter.account .wrap.dep .logo{height: 19.2vw;}
+ .baseHeadCenter.account{ display: none; }
  .baseHeadCenter .logo img{ width: 100%;height: 100%;display: block; }
  .loginForm .showPwd{display:none;}
  .login-image{display: none;}
- .loginForm{text-align:center;}
+ .loginForm{text-align:center;margin:40vw auto 0}
  .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;display: none;}
+ .loginForm h2{font-size:3.1vw;font-weight:normal;line-height:5.4vw;color:#627386;}
+ .loginForm .title h2{font-size: 5vw;font-weight: bold;line-height: 20vw;color: #FF5B00;}
  .loginForm h2.dep{color:#977fb9;}
- .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{ width: 100%;height: 12vw;box-sizing: border-box;padding: 2vw 10vw;margin-bottom: 2vw;}
+ .loginForm .formLine-tabs .tabs-item{ width: 50%;height: 24px;box-sizing: border-box;float: left;display: block;font-weight: bold;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{color: #ff5b00;}
  .loginForm .formLine-tabs .tabs-item.current:before{background: #E15621;}
- .loginForm form{width:100%;box-sizing: border-box;padding: 0 8vw; margin:50vw auto 0}
+ .loginForm .formLine-tabs .tabs-item.dep.current{color: #977fb9;}
+ .loginForm .formLine-tabs .tabs-item.dep.current:before{background: #977fb9;}
+ .loginForm form{width:100%;box-sizing: border-box;padding: 0 8vw;}
  .loginForm .formLine{height:16.4vw;padding:0;position: relative;}
  .loginForm .formLine.smscode{width: 100%;}
- .loginForm input{height:12vw;line-height:8vw;padding: 2vw 0;box-sizing: border-box;border-radius: 6vw;}
- .loginForm .formLine .code-btn{width: 24.8vw;height:12vw;line-height: 12vw;text-align: center;background: linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);font-size:3.4vw;color: #FFFFFF;position: absolute;right: 0;top: 0;border-radius: 0 6vw 6vw 0;}
- .loginForm .formLine .code-btn.dep{ background: linear-gradient(90deg, #977fb9 0%, #1c1c1c 100%); }
+ .loginForm input{height:12vw;line-height:8vw;padding: 2vw 0;box-sizing: border-box;border-radius: 2vw;}
+ .loginForm .formLine .code-btn{width: 24.8vw;height:12vw;line-height: 12vw;text-align: center;font-size:3.4vw;color: #FF5B00;position: absolute;right: 0;top: 0;border-radius: 0 6vw 6vw 0;}
+ .loginForm .formLine .code-btn.dep{ color: #977fb9; }
  .loginForm .formLine .code-btn.disabled{background: rgba(225,86,33,0.7);}
  .loginForm input.smscode{box-sizing: border-box;}
  .loginForm .checked{top:3.6vw;right:3.6vw;}
@@ -120,7 +124,7 @@ li{list-style:none}
  .loginForm .forget .btn{float: left;color: #E15621;}
  .loginForm .forget.dep .btn{float: left;color: #977fb9;}
  .loginForm .submit{line-height:11.2vw;font-size:3.4vw;text-align:center;color:#22272e;margin-top: 3vw;}
- .loginForm .submit .btn{display:inline-block;box-sizing:border-box;width:100%;height:12vw;border-radius: 6vw;margin-bottom:4.8vw;line-height: 12vw;font-size: 3.4vw;}
+ .loginForm .submit .btn{display:inline-block;box-sizing:border-box;width:100%;height:12vw;border-radius: 2vw;margin-bottom:4.8vw;line-height: 12vw;font-size: 3.4vw;}
  .loginForm .submit button.btn{background:linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);color:#FFF;}
  .loginForm .submit button.btn.dep{background:linear-gradient(90deg, #977fb9 0%, #1c1c1c 100%);color:#FFF;border-color:#977fb9; }
  .loginForm .submit button.disabled{background:#E1E1E1 !important;color:#F7F7F7;border-color:#E1E1E1 !important; }
@@ -142,9 +146,9 @@ li{list-style:none}
  @keyframes slidetounlock { 0% {background-position: -100px 0;} 100% {background-position: 100px 0;} }
  .foot{display: none;}
  /*极验*/
- .verify-wrap{width: 100% !important;margin-top: 0;float: left;height: 46px;margin-bottom: 4vw;border-radius: 23px;}
- .verify-wrap .drag-btn{left:2px;top: 2px;height: 40px;border-radius:24px;border:1px solid #b8bfca;}
- .verify-wrap .fix-tips, .verify-msg{line-height: 44px;border-radius: 22px;}
- .verify-wrap .drag-progress{ top: 2px;border-radius: 22px 0 0 22px;}
- .verify-wrap .suc-drag-btn{ border-radius: 50px; }
+ .verify-wrap{width: 100% !important;margin-top: 0;float: left;height: 46px;margin-bottom: 4vw;border-radius: 8px;}
+ .verify-wrap .drag-btn{left:2px;top: 2px;height: 40px;border-radius:8px;border:1px solid #b8bfca;}
+ .verify-wrap .fix-tips, .verify-msg{line-height: 44px;border-radius: 8px;}
+ .verify-wrap .drag-progress{ top: 2px;border-radius: 8px 0 0 8px;}
+ .verify-wrap .suc-drag-btn{ border-radius: 8px; }
 }

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

@@ -23,9 +23,9 @@
                 <h2 class="dep">唯美正品采购商城</h2>
             </div>
             <form v-show="!qrCodeLogin">
-                <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 class="formLine-tabs dep">
+                    <a class="tabs-item dep" :class="{ current: loginTabs === 0 }" href="javascript:void(0);" @click="handleTabsClick(0)">验证码登录</a>
+                    <a class="tabs-item dep" :class="{ current: loginTabs === 1 }" href="javascript:void(0);" @click="handleTabsClick(1)">密码登录</a>
                 </div>
                 <div v-show="loginTabs === 0">
                     <div class="formLine" >