feat:企业登录

src/views/Login.vue

 <template>
   <section class="login">
     <div class="login-div">
-      <h3 class="title">天友设计院-户型查询系统</h3>
-      <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane label="企业登录" name="first">
-          <iframe :src="wxQrCodeUrl" id="iframeTop" style="border: none;">
-
-          </iframe>
-          <!--            <div id="wxQrCode">-->
-
-          <!--            </div>-->
-        </el-tab-pane>
-
-        <el-tab-pane label="用户登录" name="second">
-          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
+        <el-form v-if="!loginStatus" ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
+            <div align="center" style="margin-bottom: 40px">
+                <img :src="require('@assets/img/logo.png')" width="150" alt="">
+            </div>
+            <h4 class="title">户型大数据查询系统</h4>
             <el-form-item prop="username">
         <span class="svg-container">
           <svg-icon icon-class="user" />
         </span>
-              <el-input v-model="loginForm.username" name="username" type="text" auto-complete="on" placeholder="username" />
+                <el-input v-model="loginForm.username" name="username" type="text" auto-complete="on" placeholder="username" />
             </el-form-item>
             <el-form-item prop="password">
         <span class="svg-container">
           <svg-icon icon-class="password" />
         </span>
-              <el-input
-                      :type="pwdType"
-                      v-model="loginForm.password"
-                      name="password"
-                      auto-complete="on"
-                      placeholder="password"
-                      @keyup.enter.native="toLogin" />
-              <span class="show-pwd" @click="showPwd">
+                <el-input
+                        :type="pwdType"
+                        v-model="loginForm.password"
+                        name="password"
+                        auto-complete="on"
+                        placeholder="password"
+                        @keyup.enter.native="toLogin" />
+                <span class="show-pwd" @click="showPwd">
           <svg-icon :icon-class="pwdType === 'password' ? 'eye' : 'eye-open'" />
         </span>
             </el-form-item>
             <el-form-item>
-              <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="toLogin">
-                登 录
-              </el-button>
+                <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="toLogin">
+                    登 录
+                </el-button>
             </el-form-item>
-          </el-form>
-        </el-tab-pane>
-      </el-tabs>
+            <div style="width: 100%;text-align: center;">
+                <el-link @click="loginStatus = !loginStatus" style="color: #eee;font-size: 16px">企业微信登录</el-link>
+            </div>
+        </el-form>
+        <div style="width: 520px;max-width: 100%;height: 64%;margin: 38px auto;" v-if="loginStatus">
+            <div align="center" style="margin-bottom: 40px">
+                <img :src="require('@assets/img/logo.png')" width="150" alt="">
+            </div>
+            <h4 class="title">户型大数据查询系统</h4>
+
+            <iframe :src="wxQrCodeUrl" id="iframeTop" style="border: none;">
+
+                          </iframe>
+
+            <div style="width: 100%;text-align: center;">
+                <el-link @click="loginStatus = !loginStatus" style="color: #eee;font-size: 16px">账号登录</el-link>
+            </div>
+        </div>
+<!--      <h3 class="title">天友设计院-户型查询系统</h3>-->
+<!--      <el-tabs v-model="activeName" @tab-click="handleClick">-->
+<!--        <el-tab-pane label="企业登录" name="first">-->
+<!--          <iframe :src="wxQrCodeUrl" id="iframeTop" style="border: none;">-->
+
+<!--          </iframe>-->
+<!--          &lt;!&ndash;            <div id="wxQrCode">&ndash;&gt;-->
+
+<!--          &lt;!&ndash;            </div>&ndash;&gt;-->
+<!--        </el-tab-pane>-->
+
+<!--        <el-tab-pane label="用户登录" name="second">-->
+<!--          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">-->
+<!--            <el-form-item prop="username">-->
+<!--        <span class="svg-container">-->
+<!--          <svg-icon icon-class="user" />-->
+<!--        </span>-->
+<!--              <el-input v-model="loginForm.username" name="username" type="text" auto-complete="on" placeholder="username" />-->
+<!--            </el-form-item>-->
+<!--            <el-form-item prop="password">-->
+<!--        <span class="svg-container">-->
+<!--          <svg-icon icon-class="password" />-->
+<!--        </span>-->
+<!--              <el-input-->
+<!--                      :type="pwdType"-->
+<!--                      v-model="loginForm.password"-->
+<!--                      name="password"-->
+<!--                      auto-complete="on"-->
+<!--                      placeholder="password"-->
+<!--                      @keyup.enter.native="toLogin" />-->
+<!--              <span class="show-pwd" @click="showPwd">-->
+<!--          <svg-icon :icon-class="pwdType === 'password' ? 'eye' : 'eye-open'" />-->
+<!--        </span>-->
+<!--            </el-form-item>-->
+<!--            <el-form-item>-->
+<!--              <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="toLogin">-->
+<!--                登 录-->
+<!--              </el-button>-->
+<!--            </el-form-item>-->
+<!--          </el-form>-->
+<!--        </el-tab-pane>-->
+<!--      </el-tabs>-->
     </div>
   </section>
 </template>
@@ -84,6 +133,7 @@ export default {
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],
         password: [{ required: true, trigger: 'blur', validator: validatePass }]
       },
+      loginStatus:true,
       loading: false,
       pwdType: 'password',
       redirect: undefined,
@@ -92,7 +142,7 @@ export default {
       errorMsg: this.$route.query.errorMsg,
       authorities: this.$route.query.authorities,
       authentication: this.$route.query.authentication,
-      oAuthHref : "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDE3MHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0NCi5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9DQoud3JwX2NvZGV7bWFyZ2luLXRvcDowcHggIWltcG9ydGFudH0NCi5pbmZve3dpZHRoOiAyODBweCAhaW1wb3J0YW50fQ==",
+      oAuthHref : "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDE3MHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0NCi5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9DQoud3JwX2NvZGV7bWFyZ2luLXRvcDowcHggIWltcG9ydGFudH0NCi5pbmZve3dpZHRoOiAyODBweCAhaW1wb3J0YW50fQ0KI3d4X2RlZmF1bHRfdGlwe2NvbG9yOiByZ2IoMjM4LCAyMzgsIDIzOCk7fQ0KI3d4X2FmdGVyX3NjYW57Y29sb3I6IHJnYigyMzgsIDIzOCwgMjM4KTt9DQojd3hfYWZ0ZXJfY2FuY2Vse2NvbG9yOiByZ2IoMjM4LCAyMzgsIDIzOCk7fQ==",
     };
   },
   created() {
@@ -188,7 +238,7 @@ export default {
       -webkit-appearance: none;
       border-radius: 0px;
       padding: 12px 5px 12px 15px;
-      color: #7e8187;
+      color: light_gray;
       height: 47px;
       &:-webkit-autofill {
         -webkit-box-shadow: 0 0 0px 1000px bg inset !important;
@@ -225,9 +275,9 @@ export default {
   .login-div{
     width: 50%;
     height: 50%;
-    border: 1px solid #F0F3F6;
+    /* border: 1px solid #F0F3F6;
     border-radius: 20px;
-    background-color rgba(240,243,246,1)
+    background-color rgba(240,243,246,1) */
     position: absolute;
     left: 0;
     right: 0;
@@ -265,16 +315,16 @@ export default {
   } */
   .svg-container {
     padding: 6px 5px 6px 15px;
-    color: #7e8187;
+    color: dark_gray;
     vertical-align: middle;
     width: 30px;
     display: inline-block;
-    border-right: 1px solid;
+    /* border-right: 1px solid; */
   }
   .title {
     font-size: 26px;
     font-weight: 400;
-    color: #7E8187;
+    color: light_gray;
     margin: 0px auto 40px auto;
     text-align: center;
     font-weight: bold;
@@ -284,7 +334,7 @@ export default {
     right: 10px;
     top: 7px;
     font-size: 16px;
-    color: #7e8187;
+    color: dark_gray;
     cursor: pointer;
     user-select: none;
   }