Login.vue 2.22 KB
<template>
    <div class="login" :style="winSize">
        <Row>
            <Col span="24">
            <div class="content">
                <Form ref='data' :model="data" class="card-box loginform" :rules="rule_data" :style="formOffset">
                    <h3 class="title">系统登录</h3>
    
                    <Form-item prop="username">
                        <Input type="text" placeholder="用户名">
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>
                    <Form-item  prop="password">
                        <Input type="password"  placeholder="密码">
                        <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>
                    <Form-item label-width='0'>
                        <Button type="primary" long>登录</Button>
    
                    </Form-item>
                    <hr>
                    <div class="bottom">
                        <span>忘记密码</span>
                        <span><router-link to="/register">免费注册</router-link></span>
                    </div>
                </Form>
    
            </div>
            </Col>
        </Row>
    </div>
</template>

<script>
import LoginJs from './Login.js';
module.exports = LoginJs;
</script>

<style scoped lang='less'>
.login {
    background: #1F2D3D;
    .ivu-form-item {
        margin-bottom: 20px;
    }
    .bottom {
        float: right;
        margin-top: 10px; // color: red;
    }
    .bottom span {
        margin-left: 20px;
    }
    .title {
        // padding-left: 30px;
        font-size: 20px;
    }
    .card-box {
        box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin-bottom: 100px;
        background-color: #F9FAFC;
        border: 2px solid #8492A6;
    }

    .title {
        margin: 0px auto 20px auto;
        text-align: center;
        color: #505458;
    }

    .loginform {
        width: 350px;
        padding: 25px 35px 15px 35px;
    }
}
</style>