登录tab切换以及loading效果

assets/scss/common.scss

@@ -901,3 +901,8 @@ form .questions .el-form-item__content span.question {
     }
   }
 }
+//登录
+.x-login form .el-form-item .el-form-item__content .el-input__inner{
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}

components/common/loading/Loading.vue

@@ -1,9 +1,20 @@
 <template>
   <div class="loading">
-    <img src="/images/all/loading.gif" alt="">
+    <!--<img src="/images/all/loading.gif" alt="">-->
+    <div class="wrap">
+      <div class="outer"></div>
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>
+  @keyframes spin {
+    0%   { transform: rotate(360deg); }
+    100% { transform: rotate(0deg); }
+  }
+  .wrap { width: 64px; height: 64px; position: absolute;left: 50%;top:50%;margin-left:-32px;margin-top: -32px; }
+  .outer {
+    background-repeat: no-repeat;
+    background-size:100%; position: absolute; width: 100%; height: 100%; background-image: url('/images/all/loading.png'); animation: spin 800ms infinite linear; }
   .loading {
     position: fixed;
     top: 0;

components/common/nuxt-loading/Loading.vue

@@ -1,6 +1,8 @@
 <template lang="html">
   <div class="loading" v-if="loading">
-    <img src="/images/all/loading.gif" alt="">
+    <div class="wrap">
+      <div class="outer"></div>
+    </div>
   </div>
 </template>
 <script>
@@ -19,6 +21,14 @@
   }
 </script>
 <style scoped>
+  @keyframes spin {
+    0%   { transform: rotate(360deg); }
+    100% { transform: rotate(0deg); }
+  }
+  .wrap { width: 64px; height: 64px; position: absolute;left: 50%;top:50%;margin-left:-32px;margin-top: -32px; }
+  .outer {
+    background-repeat: no-repeat;
+    background-size:100%; position: absolute; width: 100%; height: 100%; background-image: url('/images/all/loading.png'); animation: spin 800ms infinite linear; }
   .loading {
     position: fixed;
     top: 0;

components/login/Login.vue

@@ -14,6 +14,9 @@
           <a :href="loginStyle ? JSON.parse(loginStyle.returnHomeUrl).url : ''">{{loginStyle ? JSON.parse(loginStyle.returnHomeUrl).name : ''}}</a>
           <a href="http://uas.ubtob.com/serve#/" v-if="!loginStyle || (loginStyle && (JSON.parse(loginStyle.returnHomeUrl).needHelp))">帮助</a>
         </div>
+        <div class="login-tip">
+          为确保您账户的安全及正常使用，依《网络安全法》相关要求，6月1日起会员账户需绑定手机、设置密码保护。感谢您的理解和支持！
+        </div>
       </div>
     </nav>
     <div class="x-container">
@@ -43,83 +46,84 @@
         </div>
       </div>
       <div class="x-login-wrap">
-        <!--用户名短息登录-->
+        <div class="login-tab">
+          <span @click="loginWay = 0" v-bind:class="{'active': loginWay === 0 }">密码登录</span>
+          <span @click="loginWay = 3" v-bind:class="{'active': loginWay === 3 }">短信登录</span>
+          <span @click="getScan">微信登录</span>
+         </div>
+        <!--账号密码登录-->
         <div class="x-login" v-if="loginWay === 0">
           <div id="form-wrap" class="x-login-form">
-            <!--账号密码登录-->
-            <div v-show="activeTab === 0">
-              <el-form :model="login" :rules="rules2" ref="login" class="demo-ruleForm login-form">
-                <div style="opacity: 0; height: 0; overflow: hidden">
-                  <input type="text" name="hideUserName" id="hideUserName">
-                  <input type="password" name="hidePassword" id="hidePassword">
+            <el-form :model="login" :rules="rules2" ref="login" class="demo-ruleForm login-form">
+              <div style="opacity: 0; height: 0; overflow: hidden">
+                <input type="text" name="hideUserName" id="hideUserName">
+                <input type="password" name="hidePassword" id="hidePassword">
+              </div>
+              <el-form-item prop="username">
+                <el-input type="text" v-model="login.username" auto-complete="off" placeholder="手机号/邮箱"></el-input>
+                <i class="fa fa-user"></i>
+              </el-form-item>
+              <el-form-item prop="password">
+                <el-input type="password"
+                          v-model="login.password"
+                          placeholder="密码"
+                          auto-complete="off"
+                          @keyup.enter.native="isLogin(true)"></el-input>
+                <i class="fa fa-lock"></i>
+              </el-form-item>
+              <el-form-item prop="captcha" class="captcha" v-show="showCheckCode">
+                <el-input type="text"
+                          v-model="login.captcha"
+                          auto-complete="off"
+                          class="code-input"
+                          @keyup.enter.native="isLogin(true)"></el-input>
+                <img id="captchaImage" class="code-img" src="/sso/login/checkCode"/>
+                <a class="code-click" @click="getCode">看不清换一张</a>
+              </el-form-item>
+              <el-form-item>
+                <a class="btn login"
+                   @click="isLogin(true)"
+                   :disabled="isLoginDisabled">登录</a>
+              </el-form-item>
+              <el-form-item class="text-position">
+                <div class="page-part" v-if="loginStyle.needRememberPwd">
+                  <el-checkbox v-model="checked">30天免登录</el-checkbox>
                 </div>
-                <el-form-item prop="username">
-                  <el-input type="text" v-model="login.username" auto-complete="off" placeholder="手机号/邮箱"></el-input>
-                  <i class="fa fa-user"></i>
-                </el-form-item>
-                <el-form-item prop="password">
-                  <el-input type="password"
-                            v-model="login.password"
-                            placeholder="密码"
-                            auto-complete="off"
-                            @keyup.enter.native="isLogin(true)"></el-input>
-                  <i class="fa fa-lock"></i>
-                </el-form-item>
-                <el-form-item prop="captcha" class="captcha" v-show="showCheckCode">
-                  <el-input type="text"
-                            v-model="login.captcha"
-                            auto-complete="off"
-                            class="code-input"
-                            @keyup.enter.native="isLogin(true)"></el-input>
-                  <img id="captchaImage" class="code-img" src="/sso/login/checkCode"/>
-                  <a class="code-click" @click="getCode">看不清换一张</a>
-                </el-form-item>
-                <el-form-item class="text-position">
-                  <div class="page-part" v-if="loginStyle.needRememberPwd">
-                    <el-checkbox v-model="checked">30天免登录</el-checkbox>
-                  </div>
-                  <a class="forget" id='forget' @click="goForgetPassword">忘记密码?</a>
-                </el-form-item>
-                <el-form-item>
-                  <a class="btn login"
-                     @click="isLogin(true)"
-                     :disabled="isLoginDisabled">登录</a>
-                </el-form-item>
-              </el-form>
-            </div>
-            <!--短信快捷登录-->
-            <div v-show="activeTab === 1">
-              <el-form :model="fastLogin" :rules="rules3" ref="fastLogin" class="demo-ruleForm login-form loginForm">
-                <el-form-item prop="mobile">
-                  <el-input type="text" v-model="fastLogin.mobile" auto-complete="off" placeholder="请输入手机号"></el-input>
-                </el-form-item>
-                <el-form-item prop="code" class="fastMsg">
-                  <el-input type="text" v-model="fastLogin.code"
-                            auto-complete="off" placeholder="验证码"></el-input>
-                  <el-button type="primary" class="fastCode"
-                             v-show="sendLoginCode"
-                             @click="getCheckCode">获取验证码</el-button>
-                  <el-button type="primary"  v-show="!sendLoginCode" class="fastCode code-send">已发送({{login_time}}s)</el-button>
-                </el-form-item>
-                <el-form-item>
-                  <a class="btn login"
-                     @click="fastToLogin(true)">登录</a>
-                </el-form-item>
-              </el-form>
-            </div>
-            <div class="warn-text-area">
-              为确保您账户的安全及正常使用，依《网络安全法》相关要求，6月1日起会员账户需绑定手机、设置密码保护。感谢您的理解和支持！
-            </div>
+              </el-form-item>
+            </el-form>
             <div class="link-go">
               <a @click="changeManage" class="first">更换管理员</a>
-              <a class='change' @click="activeTab = 1" v-show="activeTab === 0">短信快捷登录</a>
-              <a class='change' @click="activeTab = 0" v-show="activeTab === 1">用户密码登录</a>
-              <a id="register" @click="goRegister" class="second">
-                <i class="fa fa-arrow-circle-o-right"></i>免费注册</a>
+              <span class="line"></span>
+              <a class="forget" id='forget' @click="goForgetPassword">忘记密码?</a>
+              <span class="line"></span>
+              <a id="register" @click="goRegister" class="second">免费注册</a>
             </div>
-            <!--微信-->
-            <div class="scavenging">
-              <div @click="getScan"><img src="/images/logo/weixin.png" alt=""/>微信</div>
+          </div>
+        </div>
+        <!--短信快捷登录-->
+        <div class="x-login" v-if="loginWay === 3">
+          <div id="form-wrap" class="x-login-form">
+            <el-form :model="fastLogin" :rules="rules3" ref="fastLogin" class="demo-ruleForm login-form loginForm">
+              <el-form-item prop="mobile">
+                <el-input type="text" v-model="fastLogin.mobile" auto-complete="off" placeholder="请输入手机号"></el-input>
+              </el-form-item>
+              <el-form-item prop="code" class="fastMsg">
+                <el-input type="text" v-model="fastLogin.code"
+                          auto-complete="off" placeholder="验证码"></el-input>
+                <el-button type="primary" class="fastCode"
+                           v-show="sendLoginCode"
+                           @click="getCheckCode">获取验证码</el-button>
+                <el-button type="primary"  v-show="!sendLoginCode" class="fastCode code-send">已发送({{login_time}}s)</el-button>
+              </el-form-item>
+              <el-form-item>
+                <a class="btn login"
+                   @click="fastToLogin(true)">登录</a>
+              </el-form-item>
+            </el-form>
+            <div class="link-go">
+              <a @click="changeManage" class="first">更换管理员</a>
+              <span class="line"></span>
+              <a id="register" @click="goRegister" class="second">免费注册</a>
             </div>
           </div>
         </div>
@@ -324,9 +328,8 @@
           username: '',
           password: ''
         },
-        activeTab: 0,
         loginWay: 0,
-        checked: false,
+        checked: true,
         isShowLoading: false,
         checkUsername: false,
         checkPassword: false,
@@ -574,10 +577,10 @@
         if (this.$route.query.code) {
           this.wxEnterprise(flag)
         } else {
-          if (this.activeTab === 0) {
+          if (this.loginWay === 0) {
             this.isLogin(flag)
           }
-          if (this.activeTab === 1) {
+          if (this.loginWay === 3) {
             this.fastToLogin(flag)
           }
         }
@@ -903,6 +906,19 @@
     position: relative;
     width: 990px!important;
     height: 80px;
+    .login-tip{
+      padding: 0 20px;
+      position: absolute;
+      top: 57px;
+      left: 145px;
+      font-size: 12px;
+      height: 22px;
+      line-height: 22px;
+      color: #999;
+      background-color: #fef2f2;
+      border: solid 1px #ffb4a8;
+      border-radius: 5px;
+    }
     .navbar-header{
       height: 80px;
       line-height: 80px;
@@ -945,27 +961,32 @@
     position: relative;
     height: 475px;
     div.link-go {
+      position: relative;
       text-align: right;
-      margin-top: 7px;
+      margin-top: 55px;
       a{
-        font-size: 12px;
-        color: #2d8cf0;
+        margin-left: 20px;
+        font-size: 14px;
+        color: #999;
         background: 0 0;
         text-decoration: none;
         outline: 0;
         cursor: pointer;
         transition: color .2s ease;
       }
-      a.first{
-        float: left;
-        margin-top: 2px;
-        font-size: 12px;
-      }
       a.change{
         margin:2px 0 0 50px;
-        float: left;
         font-size: 12px;
       }
+      span.line {
+        position: absolute;
+        top: 1px;
+        display: inline-block;
+        margin: 0 10px;
+        width: 2px;
+        height: 15px;
+        background-color: #dddddd;
+      }
     }
     /*微信登录*/
     .scavenging {
@@ -1060,11 +1081,38 @@
     }
     .x-login-wrap{
       position: absolute;
-      top: 10px;
+      top: 30px;
       right: 50%;
       margin-right: -495px;
       height: 475px;
       z-index: 5;
+      .login-tab {
+        padding: 0 30px;
+        position: relative;
+        top: 40px;
+        margin: 0 auto;
+        width: 346px;
+        height: 55px;
+        line-height: 55px;
+        font-size: 16px;
+        color: #999;
+        text-align: center;
+        background: #fff;
+        border-bottom: 1px solid #dcdcdc;
+        span{
+          margin-right: 42px;
+          width: 64px;
+          cursor: pointer;
+          &:hover, &.active{
+            padding-bottom: 15px;
+            color: #333;
+            border-bottom: 2px solid #282828;
+          }
+        }
+        span:last-child {
+          margin-right: 0;
+        }
+      }
       .x-login {
         position: relative;
         top: 40px;
@@ -1073,7 +1121,7 @@
         overflow: visible;
         z-index: 4;
         .x-login-form, .x-login-qrcode {
-          padding: 20px;
+          padding: 20px 20px 10px;
           .btn{
             background: #5078cb;
             color: #fff;

components/mobile/loginMobile.vue

@@ -289,7 +289,7 @@
                   a += (n + '=' + encodeURIComponent(param[n]) + '&')
                 }
                 let params = a.substr(0, a.length - 1)
-                this.$indicator.open('跳转中...')
+                // this.$indicator.open('跳转中...')
                 if (response.data.content.currentUrl) {
                   this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
                     name: 'successCallback',
@@ -586,7 +586,7 @@
                     a += (n + '=' + encodeURIComponent(param[n]) + '&')
                   }
                   let params = a.substr(0, a.length - 1)
-                  this.$indicator.open('跳转中...')
+                  // this.$indicator.open('跳转中...')
                   if (response.data.content.currentUrl) {
                     this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
                       name: 'successCallback',

nuxt.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const isProdMode = Object.is(process.env.NODE_ENV, 'production')
-const baseUrl = process.env.BASE_URL || (isProdMode ? 'https://sso.ubtob.com/' : 'http://10.1.51.50:8081')
+const baseUrl = process.env.BASE_URL || (isProdMode ? 'https://sso.ubtob.com/' : 'http://192.168.253.6:23232/')
 
 module.exports = {
   router: {

server.js

@@ -3,7 +3,7 @@ const app = require('express')()
 const proxy = require('http-proxy-middleware')
 const cookiejar = require('cookiejar')
 const host = process.env.HOST || '127.0.0.1'
-const port = process.env.PORT || 80
+const port = process.env.PORT || 3001
 process.noDeprecation = true
 
 app.set('port', port)