部分样式修改优化

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

@@ -5,11 +5,12 @@ li{list-style:none}
  * PC端
  */
 @media screen and (min-width:768px){
+ #loginPage{min-height: 540px;}
  footer .footTop{display:none;}
- .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:16px;padding: 40px 88px;}
- .login-image{ width: 460px;height: 348px;float: left;margin-top: 60px; }
+ .loginWrap{width:1000px;height:540px;overflow:hidden;margin:50px auto;box-sizing:border-box;background: #FFFFFF; border-radius:16px;padding: 40px 88px;}
+ .login-image{ width: 460px;height: 348px;float: left;margin-top: 60px; display: none;}
  .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{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 .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;}
@@ -62,18 +63,19 @@ 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:#FF5B00;font-size: 14px;line-height: 26px }
  .bg .bg-content .text-conten div{cursor: pointer;text-align: center;background: #FF5B00;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}
+ .foot{width:100%;height:96px;background:#F5F5F5;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{line-height: 30px;color: #666666;}
  .footer p span{margin:0 5px}
- .footer p span a{color: #FFFFFF;}
+ .footer p span a{color: #666666;}
  .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{top: 0;height: 43px;border-radius: 24px;}
+ .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; }
 
 }
 
@@ -85,7 +87,7 @@ li{list-style:none}
  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 8vw;background-size:57vw 43.2vw}
+ .loginForm{text-align:center;}
  .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 .formLine-tabs{ width: 100%;height: 12vw;box-sizing: border-box;padding: 2vw 0;margin-bottom: 2vw;}
@@ -93,7 +95,7 @@ li{list-style:none}
  .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 form{width:93.4vw;margin:50vw auto 0}
  .loginForm .formLine{height:16.4vw;padding:0;position: relative;}
  .loginForm .formLine.smscode{width: 100%;}
  .loginForm input{height:11.2vw;line-height:6vw;padding: 2.6vw 0;box-sizing: border-box;border-radius: 5.5vw;}
@@ -126,7 +128,8 @@ li{list-style:none}
  .foot{display: none;}
  /*极验*/
  .verify-wrap{width: 93.4vw !important;margin-top: 0;float: left;height: 46px;margin-bottom: 4vw;border-radius: 23px;}
- .verify-wrap .drag-btn{top: 0;height: 43px;border-radius: 24px;}
+ .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; }
 }

src/main/resources/static/css/base/base.h5.css

@@ -34,22 +34,22 @@
 /*短信图形验证弹窗统一样式*/
 .content-model{width: 100%;height: 100%;background: rgba(0,0,0,.3);position: fixed;top: 0;left: 0;display: none;z-index: 999;}
 .content-model.active{display: block;}
-.content-model .model-main{width: 63.8vw;height: 63.5vw;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 0.2vw;background: #FFFFFF;-webkit-box-shadow: 0 0.2vw 0.6vw rgba(0,0,0,0.2);box-shadow: 0 0.2vw 0.6vw rgba(0,0,0,0.2);}
+.content-model .model-main{width: 63.8vw;height: 63.5vw;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 4vw;background: #FFFFFF;overflow: hidden;}
 .content-model .model-title{width: 100%;box-sizing: border-box;height: 10.9vw;padding: 0 2.7vw;border: solid 1px #efefef;position: relative;}
 .content-model .model-title p{width: 100%;line-height: 10.9vw;font-size: 3.4vw;color: #333333;text-align: center;}
 .content-model .model-title .mIcon{display: block;width: 5vw;height: 5vw;position: absolute;right: 2.5vw;top: 2.5vw;z-index: 999;cursor: pointer;}
 .content-model .model-title .mIcon:before{width: 5vw;height: 5vw;background-position:-84.5vw -53.5vw;}
 .content-model .model-content{width: 100%;height: 52.4vw;box-sizing: border-box;padding:2.7vw;}
 .content-model .model-content .model-form{width: 100%;height:auto;float: left;position: relative;}
-.content-model .model-content .model-form .input{box-sizing: border-box;width: 58.4vw;height: 9.6vw;line-height: 6vw; outline: none;float: left;border: 1px solid #b8bfca;border-radius: 0.2vw;padding:1.8vw 1vw;font-size: 3.4vw;margin-bottom: 4vw;}
-.content-model .model-content .model-form .image{width: 30.7vw;height: 10.7vw;float: left;border-radius: 0.2vw;margin-top: 4.3vw;}
-.content-model .model-content .model-form .image img{width: 100%;height:10.7vw;display: block;border-radius: 0.2vw;}
+.content-model .model-content .model-form .input{box-sizing: border-box;width: 58.4vw;height: 9.6vw;line-height: 6vw; outline: none;float: left;border: 1px solid #b8bfca;border-radius: 5vw;padding:1.8vw 3vw;font-size: 3.4vw;margin-bottom: 1vw;}
+.content-model .model-content .model-form .image{width: 30.7vw;height: 10vw;float: left;border-radius: 5vw;margin-top: 4.3vw;}
+.content-model .model-content .model-form .image img{width: 100%;height:10vw;display: block;border-radius: 5vw;}
 .content-model .model-content .model-form .refresh{height:10.7vw;float: left;margin-top: 4.3vw;}
 .content-model .model-content .model-form .refresh .mIcon{display: block;width: 4vw;height: 4vw;float: left;margin: 3.3vw 2vw 0 4vw;cursor: pointer;}
-.content-model .model-content .model-form .refresh .mIcon:before{width: 4vw;height: 4vw;background-position:-1.2vw -62.5vw;}
+.content-model .model-content .model-form .refresh .mIcon:before{width: 4vw;height: 4vw;background-position:-0.4vw -61.5vw;}
 .content-model .model-content .model-form .refresh span{width:auto;height:10.7vw;display: block;float: left;line-height: 10.7vw;font-size: 3.4vw;margin-left: 2vw;}
 .content-model .model-content .model-button{width: 100%;height: 9.9vw;float: left;margin-top: 7vw;}
-.content-model .model-content .model-button .button{width: 100%;height: 9.9vw;border-radius: .2vw;background-color: #FF5B00;text-align: center;line-height:9.9vw;font-size: 3.4vw;color: #FFFFFF;cursor: pointer;}
+.content-model .model-content .model-button .button{width: 100%;height: 9.9vw;border-radius: 5.2vw;background-color: #FF5B00;text-align: center;line-height:9.9vw;font-size: 3.4vw;color: #FFFFFF;cursor: pointer;}
 /* 头部 */
 .baseHeadCenter{box-sizing:border-box;width:100%;height:26.8vw;padding:0 2vw;position:relative;background:#FFF}
 .baseHeadCenter .logo,.classifyBox .logo{width:33.8vw;height:11.2vw;padding:1.2vw 0;position:absolute;top:0;left:50%;margin-left:-16.9vw;}

src/main/resources/static/css/base/base.pc.css

@@ -40,19 +40,19 @@ iframe{width:320px !important;height: 280px !important}
 /*短信图形验证弹窗统一样式*/
 .content-model{width: 100%;height: 100%;background: rgba(0,0,0,.3);position: fixed;top: 0;left: 0;display: none;}
 .content-model.active{display: block;}
-.content-model .model-main{width: 338px;height: 194px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 3px;background: #FFFFFF;-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.2);box-shadow: 0 2px 6px rgba(0,0,0,0.2);}
+.content-model .model-main{width: 338px;height: 194px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 8px;background: #FFFFFF;overflow: hidden;}
 .content-model .model-title{width: 100%;box-sizing: border-box;height: 42px;padding: 0 16px;border: solid 1px #efefef;position: relative;}
 .content-model .model-title p{width: 100%;line-height: 42px;font-size: 14px;color: #333333;text-align: center;}
 .content-model .model-title .icon{display: block;width: 16px;height: 16px;position: absolute;right: 13px;top: 13px;z-index: 999;cursor: pointer;}
 .content-model .model-title .icon:before{width: 16px;height: 16px;background-position:-315px -2px;}
 .content-model .model-content{width: 100%;height: 128px;box-sizing: border-box;padding: 16px 12px;}
 .content-model .model-content .model-form{width: 100%;height: 48px;float: left;position: relative;}
-.content-model .model-content .model-form .input{width: 134px;height: 46px;outline: none;float: left;border: 1px solid #b8bfca;border-radius: 2px;padding: 0 10px;font-size: 14px;}
-.content-model .model-content .model-form .image{width: 120px;height: 48px;float: left;margin-left: 10px;border-radius: 2px;}
-.content-model .model-content .model-form .image img{width: 100%;height: 47px;display: block;border-radius: 2px;}
+.content-model .model-content .model-form .input{width: 134px;height: 46px;outline: none;float: left;border: 1px solid #b8bfca;border-radius: 23px;padding: 0 10px;font-size: 14px;}
+.content-model .model-content .model-form .image{width: 120px;height: 46px;float: left;margin-left: 10px;border-radius: 24px;}
+.content-model .model-content .model-form .image img{width: 100%;height: 44px;display: block;border-radius: 24px;}
 .content-model .model-content .model-form .refresh{width: 16px;height: 47px;float: left;}
 .content-model .model-content .model-form .refresh .icon{display: block;width: 16px;height: 16px;float: left;margin: 17px 0 0 10px;cursor: pointer;}
-.content-model .model-content .model-form .refresh .icon:before{width: 16px;height: 16px;background-position:-210px -375px;}
+.content-model .model-content .model-form .refresh .icon:before{width: 16px;height: 16px;background-position:-200px -372px;}
 .content-model .model-content .model-form .refresh span{display: none;}
 .content-model .model-content .model-button{width: 100%;height: 32px;float: left;margin-top: 32px;}
 .content-model .model-content .model-button .button{width: 120px;height: 32px;border-radius: 16px;background-color: #FF5B00;text-align: center;line-height: 32px;font-size: 14px;float: right;color: #FFFFFF;cursor: pointer;}
@@ -193,8 +193,6 @@ iframe{width:320px !important;height: 280px !important}
 .baseHeadCenter .wechat_qrcode .q_item_icon img{width: 48px;height: 48px;display: block;border-radius: 2px;}
 .baseHeadCenter .wechat_qrcode .q_item_code img{width: 128px;height: 128px;display: block;border-radius: 2px;}
 
-.baseHeadCenter.account{border-bottom:1px solid #FF5B00}
-.baseHeadCenter.account .wrap{padding-top:20px}
 .baseHeadCenter.account .accountLogin{font-size:20px;float:right;line-height:44px}
 .baseHeadCenter.account .accountLogin a{color:#FF5B00;margin-left:10px}
 .baseHeadCenter.account .accountLogin a:hover{text-decoration:underline}

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

@@ -41,7 +41,8 @@ var loginPage = new Vue({
         mobileCodeText:'获取验证码',
         mobilTime:null,
         isMobileDisabled:false,
-        slideVerify:null
+        slideVerify:null,
+        isLoading:false
     },
     computed: {
 
@@ -288,15 +289,30 @@ var loginPage = new Vue({
                     }
                 });
             })
-        }
+        },
+        openFullScreen1() {
+            const _self = this
+            const userAgent = navigator.userAgent.toLowerCase();
+            this.isWeChat = userAgent.match(/MicroMessenger/i);
+            const loading = this.$loading({
+                lock: true,
+                text: '',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.2)'
+            });
+            setTimeout(() => {
+                _self.isLoading = true;
+                _self.initSlideVerify();
+                loading.close();
+            }, 250);
+        },
     },
-    created: function () {
-        const userAgent = navigator.userAgent.toLowerCase();
-        this.isWeChat = userAgent.match(/MicroMessenger/i);
-        this.initSlideVerify();
+    created () {
+
     },
-    mounted: function () {
+    mounted () {
         const _self = this;
+        this.openFullScreen1()
         $('body').on("focus",'[needverify]:visible',function(){
             $(this).siblings('.errTips').removeClass("show").siblings('.checked').removeClass("show");
         });

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

@@ -14,7 +14,7 @@
 
 <!-- 二级页面 -->
 <div id="loginPage">
-    <div class="loginWrap clear" v-cloak>
+    <div class="loginWrap clear" v-cloak v-if="isLoading">
         <div class="login-image">
             <img src="/img/account/login.png" alt="">
         </div>