登录页面验证码登录、密码登录位置互换

front-vue/src/views/login.vue

@@ -17,30 +17,20 @@
                                 <img class="zap-2dcode__img" src="../assets/images/code1_2.gif" alt="" @click="scanningLogin=true">
                             </div>
                             <el-tabs v-model="activeName" class="zap-tabs" @tab-click="changeLoginType">
-                                <el-tab-pane label="密码登录" name="login_password">
+                                <el-tab-pane label="验证码登录" name="login_shortMessage">
                                     <el-form-item prop="username">
-                                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+                                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="手机号">
                                             <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
                                         </el-input>
                                     </el-form-item>
-                                    <el-form-item prop="password">
-                                        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
-                                            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-                                        </el-input>
-                                    </el-form-item>
-                                     <el-form-item prop="code">
-                                        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 53%;" @keyup.enter.native="handleLogin">
+                                    <el-form-item prop="cade">
+                                        <el-input v-model="loginForm.shortMessageCode" type="text"  maxlength="" auto-complete="off" placeholder="请输入验证码" id="" onkeydown="enterHandler(event)">
                                             <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+                                            <el-button class="zap-code-button" slot="suffix" @click="sendMessage" :disabled="sendShortMessageBtn">{{codeBtnWord}}</el-button>
                                         </el-input>
-                                        <div class="login-code">
-                                            <img :src="codeUrl" @click="getCode" class="login-code-img" />
-                                        </div>
                                     </el-form-item>
-                                    <el-form-item style="width:100%;margin-bottom: 0;">
-                                        <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
-                                     </el-form-item>
                                     <el-form-item style="width:100%;">
-                                        <el-button :loading="loading" class="zap-button" size="medium" type="primary" @click.native.prevent="handleLogin">
+                                        <el-button :loading="loading"  class="zap-button" size="medium" type="primary" @click.native.prevent="handleLogin">
                                             <span v-if="!loading">登 录</span>
                                             <span v-else>登 录 中...</span>
                                         </el-button>
@@ -54,25 +44,31 @@
                                             </div>
                                         </div>
                                     </el-form-item>
-                                    <!-- <el-divider class="divider_left"><span style="font-size:10px;word-break: keep-all;">第三方快捷登录</span></el-divider>
-                                    <el-form-item style="width:100%;">
-                                        <img :src="wxSrc" @mouseover="changeImg" @mouseleave="returnImg" @click="getWeChatImg" style="width:30px;margin-left: 77px;">
-                                    </el-form-item> -->
                                 </el-tab-pane>
-                                <el-tab-pane label="验证码登录" name="login_shortMessage">
+                                <el-tab-pane label="密码登录" name="login_password">
                                     <el-form-item prop="username">
-                                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="手机号">
+                                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
                                             <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
                                         </el-input>
                                     </el-form-item>
-                                    <el-form-item prop="cade">
-                                        <el-input v-model="loginForm.shortMessageCode" type="text"  maxlength="" auto-complete="off" placeholder="请输入验证码" id="" onkeydown="enterHandler(event)">
+                                    <el-form-item prop="password">
+                                        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
+                                            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+                                        </el-input>
+                                    </el-form-item>
+                                     <el-form-item prop="code">
+                                        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 53%;" @keyup.enter.native="handleLogin">
                                             <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-                                            <el-button class="zap-code-button" slot="suffix" @click="sendMessage" :disabled="sendShortMessageBtn">{{codeBtnWord}}</el-button>
                                         </el-input>
+                                        <div class="login-code">
+                                            <img :src="codeUrl" @click="getCode" class="login-code-img" />
+                                        </div>
                                     </el-form-item>
+                                    <el-form-item style="width:100%;margin-bottom: 0;">
+                                        <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
+                                     </el-form-item>
                                     <el-form-item style="width:100%;">
-                                        <el-button :loading="loading"  class="zap-button" size="medium" type="primary" @click.native.prevent="handleLogin">
+                                        <el-button :loading="loading" class="zap-button" size="medium" type="primary" @click.native.prevent="handleLogin">
                                             <span v-if="!loading">登 录</span>
                                             <span v-else>登 录 中...</span>
                                         </el-button>
@@ -86,6 +82,10 @@
                                             </div>
                                         </div>
                                     </el-form-item>
+                                    <!-- <el-divider class="divider_left"><span style="font-size:10px;word-break: keep-all;">第三方快捷登录</span></el-divider>
+                                    <el-form-item style="width:100%;">
+                                        <img :src="wxSrc" @mouseover="changeImg" @mouseleave="returnImg" @click="getWeChatImg" style="width:30px;margin-left: 77px;">
+                                    </el-form-item> -->
                                 </el-tab-pane>
                             </el-tabs>
                         </template>
@@ -168,7 +168,7 @@ export default {
     data() {
         return {
             //默认背景图
-            activeName: "login_password",
+            activeName: "login_shortMessage",
             baseImg: require('../assets/images/login_img.png'),
             BackgroundImg : require('../assets/images/login_img.png'),
             scanningLogin: false, // 是否扫码登陆