登录页面修改

zhangxiaoxu123

2023-05-05 f51896f6358a60ab83456358446ac48085b48298

登录页面修改

 src/assets/img/login-bj.jpg

 src/assets/img/login-mmain-left-bj.jpg

 src/views/login.less

@@ -1,8 +1,31 @@
.login {
    height: 100%;
    background: url('../assets/background.svg');
    background-color: #f0f2f5;

    //background: url('../assets/background.svg');
    background: url("../assets/img/login-bj.jpg") no-repeat center;
    background-size: 100% 100%;
    .login-main-box{
        display: flex;
        box-shadow: 0 6px 6px rgba(34,66,168,0.38);
        .login-img{
            width: 20vw;
            height: 35vw;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .login-form{
            width: 44vw;
            height: 35vw;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            .login-form-inside{
                width: 60%;
            }
        }
    }
    .ivu-tabs-nav-container {
        line-height: 2;
        font-size: 17px;
@@ -36,6 +59,12 @@
    .other-login {
        margin-top: 3vh;
    }
    .login-btn{
        border-radius: 4vw;
        box-shadow: 0 4px 4px rgba(0,118,255,0.31);
        color: #fff;
        height: 2.5vw;
    }

    .icons {
        display: flex;
@@ -58,7 +87,27 @@
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 368px;
        height: 100%;
    }
}
}
@media screen and (max-width: 960px){
    .login-img{
        width: 200px!important;
        height: 345px!important;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .login-form{
        width: 400px!important;
        height: 345px!important;
        //height: 36vw;
        //background: #fff;
        //display: flex;
        //justify-content: center;
        //align-items: center;
        //.login-form-inside{
        //    width: 60%;
        //}
    }
}

 src/views/login.vue

@@ -10,7 +10,12 @@
            <Col class="content">
            <div>
                <Header />
                <div v-if="!socialLogining" style="margin-top: 150px">
                <div class="login-main-box" v-if="!socialLogining">
                    <div class="login-img">
                        <img src="../assets/img/login-mmain-left-bj.jpg" alt="">
                    </div>
                    <div class="login-form">
                        <div class="login-form-inside">
                            <Form
                                    ref="usernameLoginForm"
                                    :model="form"
@@ -19,7 +24,8 @@
                                    v-if="tabName == 'username'"
                            >
                                <FormItem>
                                    <h1 style="margin-left: 40%;">登&nbsp陆</h1>
                                    <!--<h1 style="margin-left: 40%;">登&nbsp录</h1>-->
                                    <h1>安全配送管理系统</h1>
                                </FormItem>
                                <FormItem prop="username">
                                    <Input
@@ -72,42 +78,46 @@
                                </FormItem>
                            </Form>

                    <!--<Row justify="space-between" align="middle">-->
                        <!--<Checkbox v-model="saveLogin" size="large">{{-->
                            <!--<Row justify="space-between" align="middle">-->
                            <!--<Checkbox v-model="saveLogin" size="large">{{-->
                            <!--$t("autoLogin")-->
                            <!--}}</Checkbox>-->
                        <!--<Dropdown trigger="click" @on-click="handleDropDown">-->
                            <!--<Dropdown trigger="click" @on-click="handleDropDown">-->
                            <!--<a class="forget-pass">{{ $t("forgetPass") }}</a>-->
                            <!--<DropdownMenu slot="list">-->
                                <!--<DropdownItem name="test">体验测试账号</DropdownItem>-->
                                <!--<DropdownItem name="resetByMobile"-->
                                <!--&gt;使用手机号重置密码(付费)</DropdownItem-->
                                <!--&gt;-->
                                <!--<DropdownItem name="resetByEmail"-->
                                <!--&gt;使用邮箱重置密码(付费)</DropdownItem-->
                                <!--&gt;-->
                            <!--<DropdownItem name="test">体验测试账号</DropdownItem>-->
                            <!--<DropdownItem name="resetByMobile"-->
                            <!--&gt;使用手机号重置密码(付费)</DropdownItem-->
                            <!--&gt;-->
                            <!--<DropdownItem name="resetByEmail"-->
                            <!--&gt;使用邮箱重置密码(付费)</DropdownItem-->
                            <!--&gt;-->
                            <!--</DropdownMenu>-->
                        <!--</Dropdown>-->
                    <!--</Row>-->
                    <Button
                            class="login-btn"
                            type="primary"
                            size="large"
                            :loading="loading"
                            @click="submitLogin"
                            long
                    >
                        <span v-if="!loading">{{ $t("login") }}</span>
                        <span v-else>{{ $t("logining") }}</span>
                    </Button>
                            <!--</Dropdown>-->
                            <!--</Row>-->
                            <Button
                                    class="login-btn"
                                    type="primary"
                                    size="large"
                                    :loading="loading"
                                    @click="submitLogin"
                                    long
                            >
                                <span v-if="!loading">{{ $t("login") }}</span>
                                <span v-else>{{ $t("logining") }}</span>
                            </Button>
                        </div>

                    </div>
                </div>

                <div v-if="socialLogining">
                    <RectLoading />
                </div>
            </div>
            <!--<Footer />-->
            </Col>
            <LangSwitch />
            <!--<LangSwitch />-->
        </Row>
    </div>
    <!--<div>-->
@@ -508,5 +518,31 @@
</script>

<style lang="less">
    .login-main-box{
        .ivu-form-item{
            margin-bottom: 2vw;
            &:first-child{
                margin-bottom: 4vw;
            }
        }
        .ivu-form-item-content{
            h1{
                font-size: 1.5vw;
                text-align: center;
            }
        }
        .ivu-input-large{
            height: 2vw;
        }
        .ivu-input-wrapper-large .ivu-input-prefix i, .ivu-input-wrapper-large .ivu-input-suffix i{
            line-height: 2vw;
        }
        .ivu-input{
            border: 1px solid #aaaaaa;
        }
    }

</style>
<style lang="less">
    @import "./login.less";
</style>