yundewu-website/less/login.less

@subject-maxwidth: 1460px;
@subject-minwidth: 1220px;

* {
    margin    : 0;
    padding   : 0;
    list-style: none;
    border    : none;
    font-style: normal;
}

a {
    color          : #333;
    text-decoration: none;
}

html {
    height     : 100%;
    font-family: "Microsoft YaHei", "微软雅黑", "Source Han Sans SC", "HanHei SC", "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;

}

.icon {
    width     : 16px;
    height    : 16px;
    background: greenyellow;
    display   : inline-block;
}

header {
    background: #fff;

    .header-content::after {
        content: '';
        display: block;
        clear  : both;
    }

    .header-content {
        width    : 100%;
        max-width: 1460px;
        min-width: 1220px;
        margin   : 0 auto;
        padding  : 20px 0;

        .logo-img {
            float        : left;
            padding-right: 10px;
            margin-right : 10px;
            border-right : 1px solid #999;
        }

        .logo-text {
            float: left;

            h6 {
                font-size    : 18px;
                margin-bottom: 5px;
                font-weight  : 400;
            }

            p {
                color: #999;
            }
        }

        .contact {
            float      : right;
            line-height: 48px;
            font-size  : 18px;

            a {
                font-weight: 400;
                color      : #999;
            }
        }
    }
}

.content {
    width              : 100%;
    background-image   : url('../images/loginbg.png');
    background-position: center;

    .main::after {
        content: '';
        display: block;
        clear  : both;
    }

    .main {
        padding  : 100px 0;
        width    : 100%;
        max-width: 1460px;
        min-width: 1220px;
        margin   : 0 auto;

        .login-card {
            width        : 456px;
            height       : 564px;
            float        : right;
            background   : #fbfbfb;
            border-radius: 5px;
            overflow     : hidden;

            .login-label::after {
                content: '';
                display: block;
                clear  : both;
            }

            .login-label {
                width: 100%;

                a:hover {
                    color: #f29856;
                }

                a {
                    display    : block;
                    width      : 50%;
                    padding    : 18px 0;
                    text-align : center;
                    font-size  : 18px;
                    float      : left;
                    background : #e5e5e5;
                    color      : #ccc;
                    font-weight: 600;
                }

                .that {
                    background: #fbfbfb;
                    color     : #333;
                }
            }
        }

        .login-box {
            .CA-login{
                display: none;
            }
            .user-login, .CA-login {
                width     : 100%;
                height    : 100%;
                box-sizing: border-box;

                form {
                    padding: 75px 32px 0;

                    .user,
                    .password {
                        width        : 390px;
                        height       : 64px;
                        background   : #fff;
                        border-radius: 5px;
                        border: 1px solid #fff;
                        overflow     : hidden;
                        box-shadow   : 0 0 8px #ddd;
                        margin-bottom: 20px;
                        position     : relative;

                        div {
                            float : left;
                            height: 100%;
                        }

                        .icon-box {
                            width       : 63px;
                            border-right: 1px solid #f5f5f5;
                            text-align  : center;
                            line-height : 70px;
                        }

                        .input-box {
                            padding-left: 20px;
                            line-height : 65px;

                            input {
                                width     : 250px;
                                font-size : 18px;
                                padding   : 10px 0;
                                outline   : none;
                                box-shadow: 0 0 0 1000px #fff inset;
                                display: inline-block;
                                border: none;
                            }
                        }

                        .show-password {
                            position: absolute;
                            top     : 25px;
                            right   : 25px;
                        }
                    }

                    .safe::after {
                        content: '';
                        display: block;
                        clear  : both;
                    }

                    .safe {
                        a {
                            font-size: 16px;
                        }

                        .expert-login {
                            float: left;
                        }

                        .account {
                            float: right;

                            a {
                                color: #999;
                            }
                        }
                    }

                    .submit {
                        .layui-input-block{
                            margin: 0;
                        }
                        button {
                            width        : 100%;
                            background   : #f29856;
                            color        : #fff;
                            border-radius: 5px;
                            margin-top   : 55px;
                            text-align   : center;
                            line-height  : 50px;
                            font-size    : 18px;
                            cursor       : pointer;
                            outline      : none;
                            height: auto;
                        }
                    }
                }
            }
        }
    }
}

footer {
    background: #fff;
    padding   : 40px 0;
    text-align: center;

    a:hover {
        text-decoration: underline;
    }

    a {
        margin-right: 5px;
    }
}