From 0bbc5abeab6a1cb504b36bcd620fcb55e496d989 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期一, 21 三月 2022 10:32:50 +0800
Subject: [PATCH] '登录页'

---
 src/views/login/components/login-form.vue |  276 +++++++++++++++++++++++++++++-------------------------
 1 files changed, 149 insertions(+), 127 deletions(-)

diff --git a/src/views/login/components/login-form.vue b/src/views/login/components/login-form.vue
index 62e50d5..2aeede9 100644
--- a/src/views/login/components/login-form.vue
+++ b/src/views/login/components/login-form.vue
@@ -1,43 +1,89 @@
 <template>
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" :inline="false" class="loginForm" @keydown.enter.native="handleSubmit">
-        <div class="title-container">
-            <h3 class="title">登录</h3>
+    <div class="login-form">
+        <div class="login-form-title"><span>登录</span></div>
+        <div class="login-form-main">
+            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" :inline="false" class="loginForm" @keydown.enter.native="handleSubmit">
+                <div class="login-form-main-user"><span>用户名</span></div>
+                <div class="login-form-main-user_input">
+                <el-form-item prop="username">
+                    <el-input
+                        v-model="loginForm.username"
+                        placeholder="请输入用户名"
+                        name="username"
+                        type="text"
+                        auto-complete="on"
+                    />
+                </el-form-item>
+                </div>
+                <div class="login-form-main-password"><span>密码</span></div>
+                <div class="login-form-main-password_input">
+                    <el-row>
+                        <el-col :span="21">
+                            <el-form-item prop="password">
+                                <el-input
+                                    v-model="loginForm.password"
+                                    :type="loginPasswordType"
+                                    placeholder="请输入密码"
+                                    name="password"
+                                    auto-complete="on"
+                                    @keyup.enter.native="handleSubmit"
+                                />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="3">
+                            <img src="../../../assets/icon_visible.png" style="margin:0 auto;padding-top: 9px;padding-left: 10px;" @click="showLoginPwd"></img>
+                        </el-col>
+                    </el-row>
+                </div>
+            </el-form>
         </div>
-        <el-form-item prop="username">
-      <span class="svg-container">
-        <svg-icon icon-class="user" />
-      </span>
-            <el-input
-                v-model="loginForm.username"
-                placeholder="请输入用户名"
-                name="username"
-                type="text"
-                auto-complete="on"
-            />
-        </el-form-item>
-        <el-form-item prop="password">
-      <span class="svg-container">
-        <svg-icon icon-class="password" />
-      </span>
-            <el-input
-                v-model="loginForm.password"
-                :type="loginPasswordType"
-                placeholder="请输入密码"
-                name="password"
-                auto-complete="on"
-                @keyup.enter.native="handleSubmit"
-            />
-            <span class="show-pwd" @click="showLoginPwd">
-        <svg-icon :icon-class="loginPasswordType === 'password' ? 'eye' : 'eye-open'" />
-      </span>
-        </el-form-item>
-        <div style="text-align:center;">
-            <el-button :loading="logingLoading" class="login-button" type="primary" @click.native.prevent="handleSubmit">
-                登录
+        <div class="login-form-button">
+            <el-button class="login-form-login-button" :loading="logingLoading" :disabled="submitLoading" type="primary" @click.native.prevent="handleSubmit">
+                  <span>
+                      登录
+                  </span>
             </el-button>
-            <br>
         </div>
-    </el-form>
+    </div>
+    <!--    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" :inline="false" class="loginForm" @keydown.enter.native="handleSubmit">-->
+<!--        <div class="title-container">-->
+<!--            <h3 class="title">登录</h3>-->
+<!--        </div>-->
+<!--        <el-form-item prop="username">-->
+<!--      <span class="svg-container">-->
+<!--        <svg-icon icon-class="user" />-->
+<!--      </span>-->
+<!--            <el-input-->
+<!--                v-model="loginForm.username"-->
+<!--                placeholder="请输入用户名"-->
+<!--                name="username"-->
+<!--                type="text"-->
+<!--                auto-complete="on"-->
+<!--            />-->
+<!--        </el-form-item>-->
+<!--        <el-form-item prop="password">-->
+<!--      <span class="svg-container">-->
+<!--        <svg-icon icon-class="password" />-->
+<!--      </span>-->
+<!--            <el-input-->
+<!--                v-model="loginForm.password"-->
+<!--                :type="loginPasswordType"-->
+<!--                placeholder="请输入密码"-->
+<!--                name="password"-->
+<!--                auto-complete="on"-->
+<!--                @keyup.enter.native="handleSubmit"-->
+<!--            />-->
+<!--            <span class="show-pwd" @click="showLoginPwd">-->
+<!--        <svg-icon :icon-class="loginPasswordType === 'password' ? 'eye' : 'eye-open'" />-->
+<!--      </span>-->
+<!--        </el-form-item>-->
+<!--        <div style="text-align:center;">-->
+<!--            <el-button :loading="logingLoading" class="login-button" type="primary" @click.native.prevent="handleSubmit">-->
+<!--                登录-->
+<!--            </el-button>-->
+<!--            <br>-->
+<!--        </div>-->
+<!--    </el-form>-->
 </template>
 <script>
     import Cookies from "js-cookie";
@@ -85,7 +131,6 @@
 
         },
         created(){
-            this.test()
         },
         methods: {
             showLoginPwd() {
@@ -123,95 +168,72 @@
     }
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
-    $cursor: #fff;
-    $bg:#2d3a4b;
-    $dark_gray:#889aa4;
-    $light_gray:#eee;
-    .loginForm {
-        .el-input {
-            display: inline-block;
-            height: 47px;
-            width: 85%;
-            input {
-                background: transparent;
-                background-color: #eee;
-                border: 0px;
-                -webkit-appearance: none;
-                border-radius: 0px;
-                padding: 12px 5px 12px 15px;
-                color: #333333;
-                height: 47px;
-                caret-color:#333333;
-                &:-webkit-autofill {
-                    -webkit-box-shadow: 0 0 0px 1000px #cfd5da inset !important;
-                    -webkit-text-fill-color: #fff !important;
-                }
-            }
-        }
-        .el-form-item {
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            background: rgba(0, 0, 0, 0.1);
-            border-radius: 5px;
-            color: #454545;
-        }
-        .tips {
-            font-size: 14px;
-            color: #fff;
-            margin-bottom: 10px;
-            span {
-                &:first-of-type {
-                    margin-right: 16px;
-                }
-            }
-        }
-        .svg-container {
-            padding: 6px 5px 6px 15px;
-            color: $dark_gray;
-            vertical-align: middle;
-            width: 30px;
-            display: inline-block;
-        }
-        .title-container {
-            position: relative;
-            .title {
-                font-size: 26px;
-                color: #333333;
-                margin: 0px auto 40px auto;
-                text-align: center;
-                font-weight: bold;
-            }
-            .set-language {
-                color: #fff;
-                position: absolute;
-                top: 3px;
-                font-size:18px;
-                right: 0px;
-                cursor: pointer;
-            }
-        }
-        .show-pwd {
-            position: absolute;
-            right: 10px;
-            top: 7px;
-            font-size: 16px;
-            color: $dark_gray;
-            cursor: pointer;
-            user-select: none;
-        }
-        .thirdparty-button {
-            position: absolute;
-            right: 0;
-            bottom: 6px;
-        }
-        .login-button {
-            height:36px;
-            margin-bottom:30px;
-            margin-top:10px;
-            width:100px;
-            border-radius:25px;
-            background-color: #034EA2;
-        }
+<style scoped>
+    .login-form{
+        min-height: 100%;
+        width:100%;
     }
-
+    .login-form-main{
+        margin-left:50px;
+    }
+    .login-form-title{
+        width: 60px;
+        height: 143px;
+        font-size: 30px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 600;
+        color: #1851DC;
+        line-height: 42px;
+        padding-top: 53px;
+        margin:0 auto;
+    }
+    .login-form-main-user{
+        height: 20px;
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 20px;
+    }
+    .login-form-main-password{
+        height: 20px;
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 20px;
+        margin-top: 24px;
+    }
+    /deep/.el-input__inner{
+        height: 40px;
+        border:0px;
+        background: #F0F0F0;
+    }
+    .login-form-main-user_input{
+        margin-top: 8px;
+        width: 364px;
+        height: 40px;
+        background: #FFFFFF !important;
+        border-radius: 4px;
+        border: 0px solid;
+    }
+    .login-form-main-password_input{
+        margin-top: 8px;
+        width: 364px;
+        height: 40px;
+        background: #F0F0F0;
+        border-radius: 4px;
+        border: 0px solid;
+    }
+    .login-form-button{
+        width:100%;
+        text-align: center;
+        padding-top: 40px;
+    }
+    .login-form-login-button {
+        width: 364px;
+        height: 48px;
+        background: #4778FF;
+        border-radius: 4px;
+    }
 </style>

--
Gitblit v1.9.2