From 1ccc74ec2b9adf244e529e66825f8d4cfa9bd701 Mon Sep 17 00:00:00 2001
From: lyt <1105290566@qq.com>
Date: Sun, 27 Dec 2020 14:55:27 +0800
Subject: [PATCH] =?UTF-8?q?'admin-12.27:=E7=BC=96=E5=86=99=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E7=95=8C=E9=9D=A2'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/login/component/account.vue     |  87 +++++++++++++++
 .../src/views/login/component/mobile.vue      |  55 +++++++++
 .../src/views/login/index.vue                 | 105 ++++++------------
 3 files changed, 174 insertions(+), 73 deletions(-)
 create mode 100644 vue-admin-wonderful-next/src/views/login/component/account.vue
 create mode 100644 vue-admin-wonderful-next/src/views/login/component/mobile.vue

diff --git a/vue-admin-wonderful-next/src/views/login/component/account.vue b/vue-admin-wonderful-next/src/views/login/component/account.vue
new file mode 100644
index 0000000..a8d0f23
--- /dev/null
+++ b/vue-admin-wonderful-next/src/views/login/component/account.vue
@@ -0,0 +1,87 @@
+<template>
+  <el-form class="login-content-form">
+    <el-form-item>
+      <el-input type="text" placeholder="用户名 admin 或 test" prefix-icon="el-icon-user" v-model="ruleForm.userName"
+        clearable autocomplete="off">
+      </el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-input type="password" placeholder="密码：123456" prefix-icon="el-icon-lock" v-model="ruleForm.password" clearable
+        autocomplete="off">
+      </el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-row :gutter="15">
+        <el-col :span="16">
+          <el-input type="text" maxlength="4" placeholder="请输入验证码" prefix-icon="el-icon-position"
+            v-model="ruleForm.code" clearable autocomplete="off"></el-input>
+        </el-col>
+        <el-col :span="8">
+          <div class="login-content-code">
+            <span class="login-content-code-img">1234</span>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" class="login-content-submit" round>
+        <span>登 录</span>
+      </el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from "vue";
+export default defineComponent({
+  name: "login",
+  setup() {
+    const state = reactive({
+      ruleForm: {
+        userName: "",
+        password: "",
+        code: "",
+      },
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.login-content-form {
+  margin-top: 20px;
+  .login-content-code {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    .login-content-code-img {
+      width: 100%;
+      height: 40px;
+      background-color: #ffffff;
+      border: 1px solid rgb(220, 223, 230);
+      color: #333;
+      font-size: 16px;
+      font-weight: 700;
+      letter-spacing: 5px;
+      text-indent: 5px;
+      text-align: center;
+      cursor: pointer;
+      transition: all ease 0.2s;
+      border-radius: 4px;
+      &:hover {
+        border-color: #c0c4cc;
+        transition: all ease 0.2s;
+      }
+    }
+  }
+  .login-content-submit {
+    width: 100%;
+    letter-spacing: 2px;
+    font-weight: 300;
+    margin-top: 15px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/src/views/login/component/mobile.vue b/vue-admin-wonderful-next/src/views/login/component/mobile.vue
new file mode 100644
index 0000000..50051e9
--- /dev/null
+++ b/vue-admin-wonderful-next/src/views/login/component/mobile.vue
@@ -0,0 +1,55 @@
+<template>
+  <el-form class="login-content-form">
+    <el-form-item>
+      <el-input type="text" placeholder="请输入手机号" prefix-icon="el-icon-user" v-model="ruleForm.userName" clearable
+        autocomplete="off">
+      </el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-row :gutter="15">
+        <el-col :span="16">
+          <el-input type="text" maxlength="4" placeholder="请输入验证码" prefix-icon="el-icon-position"
+            v-model="ruleForm.code" clearable autocomplete="off"></el-input>
+        </el-col>
+        <el-col :span="8">
+          <el-button>获取验证码</el-button>
+        </el-col>
+      </el-row>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" class="login-content-submit" round>
+        <span>登 录</span>
+      </el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from "vue";
+export default defineComponent({
+  name: "login",
+  setup() {
+    const state = reactive({
+      ruleForm: {
+        userName: "",
+        code: "",
+      },
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.login-content-form {
+  margin-top: 20px;
+  .login-content-submit {
+    width: 100%;
+    letter-spacing: 2px;
+    font-weight: 300;
+    margin-top: 15px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/vue-admin-wonderful-next/src/views/login/index.vue b/vue-admin-wonderful-next/src/views/login/index.vue
index 07a85b2..f3b14e5 100644
--- a/vue-admin-wonderful-next/src/views/login/index.vue
+++ b/vue-admin-wonderful-next/src/views/login/index.vue
@@ -3,39 +3,21 @@
     <div class="login-logo">
       <img src="/@/assets/logo-web-element.svg" />
     </div>
-    <div class="login-content">
+    <div class="login-content" :class="{'login-content-mobile' : tabsActiveName === 'mobile'}">
       <div class="login-content-main">
         <h4 class="login-content-title">vue-admin-wonderful</h4>
-        <el-form class="login-content-form" ref="ruleForm">
-          <el-form-item>
-            <el-input type="text" placeholder="用户名 admin 或 test" prefix-icon="el-icon-user" v-model="ruleForm.userName"
-              clearable autocomplete="off" ref="userName">
-            </el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-input type="password" placeholder="密码：123456" prefix-icon="el-icon-lock" v-model="ruleForm.password"
-              clearable autocomplete="off" ref="password">
-            </el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-row :gutter="15">
-              <el-col :span="16">
-                <el-input type="text" maxlength="4" placeholder="请输入验证码" prefix-icon="el-icon-position"
-                  v-model="ruleForm.code" clearable autocomplete="off" ref="code"></el-input>
-              </el-col>
-              <el-col :span="8">
-                <div class="login-content-code">
-                  <span class="login-content-code-img">1234</span>
-                </div>
-              </el-col>
-            </el-row>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" class="login-content-submit" round>
-              <span>登 录</span>
-            </el-button>
-          </el-form-item>
-        </el-form>
+        <el-tabs v-model="tabsActiveName" @tab-click="onTabsClick">
+          <el-tab-pane label="账号密码登录" name="account">
+            <transition name="el-zoom-in-center">
+              <Account v-show="!isTabPaneShow" />
+            </transition>
+          </el-tab-pane>
+          <el-tab-pane label="手机号登录" name="mobile">
+            <transition name="el-zoom-in-center">
+              <Mobile v-show="isTabPaneShow" />
+            </transition>
+          </el-tab-pane>
+        </el-tabs>
         <el-button type="text" size="small">第三方登录</el-button>
         <el-button type="text" size="small">友情链接</el-button>
       </div>
@@ -48,19 +30,24 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive } from "vue";
+import Account from "/@/views/login/component/account.vue";
+import Mobile from "/@/views/login/component/mobile.vue";
+import { toRefs, reactive, getCurrentInstance } from "vue";
 export default {
   name: "login",
+  components: { Account, Mobile },
   setup() {
+    const { proxy } = getCurrentInstance();
     const state = reactive({
-      ruleForm: {
-        userName: "",
-        password: "",
-        code: "",
-      },
+      tabsActiveName: "account",
+      isTabPaneShow: false,
     });
+    const onTabsClick = () => {
+      state.isTabPaneShow = !state.isTabPaneShow;
+    };
     return {
       ...toRefs(state),
+      onTabsClick,
     };
   },
 };
@@ -83,14 +70,16 @@ export default {
   .login-content {
     width: 500px;
     padding: 20px;
-    height: 410px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background-color: rgba(255, 255, 255, 0.9);
-    box-shadow: 0 2px 12px 0 rgba(179, 202, 233, 1);
+    background-color: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 2px 12px 0 var(--color-primary-light-1);
     border-radius: 4px;
+    transition: height 0.2s linear;
+    height: 480px;
+    overflow: hidden;
     .login-content-main {
       margin: 0 auto;
       width: 80%;
@@ -102,41 +91,11 @@ export default {
         letter-spacing: 4px;
         margin: 15px 0 30px;
       }
-      .login-content-form {
-        .login-content-code {
-          display: flex;
-          align-items: center;
-          justify-content: space-around;
-          .login-content-code-img {
-            width: 100%;
-            height: 40px;
-            background-color: #fdfdfd;
-            border: 1px solid rgb(220, 223, 230);
-            color: #333;
-            font-size: 14px;
-            font-weight: 700;
-            letter-spacing: 5px;
-            line-height: 38px;
-            text-indent: 5px;
-            text-align: center;
-            cursor: pointer;
-            transition: all ease 0.2s;
-            border-radius: 4px;
-            &:hover {
-              border-color: #c0c4cc;
-              transition: all ease 0.2s;
-            }
-          }
-        }
-        .login-content-submit {
-          width: 100%;
-          letter-spacing: 2px;
-          font-weight: 300;
-          margin-top: 15px;
-        }
-      }
     }
   }
+  .login-content-mobile {
+    height: 418px;
+  }
   .login-copyright {
     position: absolute;
     left: 50%;