'admin-12.27:编写登录界面'

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>

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>

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-tabs v-model="tabsActiveName" @tab-click="onTabsClick">
-          <el-form-item>
+          <el-tab-pane label="账号密码登录" name="account">
-            <el-input type="text" placeholder="用户名 admin 或 test" prefix-icon="el-icon-user" v-model="ruleForm.userName"
+            <transition name="el-zoom-in-center">
-              clearable autocomplete="off" ref="userName">
+              <Account v-show="!isTabPaneShow" />
-            </el-input>
+            </transition>
-          </el-form-item>
+          </el-tab-pane>
-          <el-form-item>
+          <el-tab-pane label="手机号登录" name="mobile">
-            <el-input type="password" placeholder="密码：123456" prefix-icon="el-icon-lock" v-model="ruleForm.password"
+            <transition name="el-zoom-in-center">
-              clearable autocomplete="off" ref="password">
+              <Mobile v-show="isTabPaneShow" />
-            </el-input>
+            </transition>
-          </el-form-item>
+          </el-tab-pane>
-          <el-form-item>
+        </el-tabs>
-            <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-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: {
+      tabsActiveName: "account",
-        userName: "",
+      isTabPaneShow: false,
-        password: "",
-        code: "",
-      },
     });
+    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);
+    background-color: rgba(255, 255, 255, 0.95);
-    box-shadow: 0 2px 12px 0 rgba(179, 202, 233, 1);
+    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%;