PC端登陆代码

元素

>
    <div class="login-container" style="background-color: #141a48;margin: 0px;overflow: hidden;">

        <Form ref="loginForm" autoComplete="on" :model="loginForm" class="card-box login-form">
            <p style="text-align: center;font-size: 22px;color: #333333;display: flex;padding-top: 30px;padding-bottom: 30px;">
                <span class="loginLine"> </span>
                资产保SaaS平台
            </p>

            <row
                    style="display: flex;width: 100%;border: 1px solid #DCDCDC;border-radius: 4px;height: 45px;">
                <div style="width: 30px;display: flex">
                    <img style="width: 18px;height: 18px;margin: auto"
                         src="https://lsdkmanager.oss-cn-hangzhou.aliyuncs.com/lsdkzcb/userName.png" alt="">
                </div>
                <div style="flex: auto">
                    <input type="text" clearable placeholder="请输入用户名" class="goto-login-mobile-input" v-model="loginForm.username">
                </div>
            </row>


            <row
                    style="display: flex;width: 100%;border: 1px solid #DCDCDC;border-radius: 4px;height: 45px;margin-top: 20px">
                <div style="width: 30px;display: flex">
                    <img style="width: 18px;height: 18px;margin: auto"
                         src="https://lsdkmanager.oss-cn-hangzhou.aliyuncs.com/lsdkzcb/mima.png" alt="">
                </div>
                <div style="flex: auto">
                    <input type="password" clearable placeholder="请输入密码" class="goto-login-mobile-input" v-model="loginForm.password">
                </div>
            </row>


            <row
                    style="display: flex;width: 100%;border: 1px solid #DCDCDC;border-radius: 4px;height: 45px;margin-top: 20px">
                <div style="width: 30px;display: flex">
                    <img style="width: 18px;height: 18px;margin: auto"
                         src="https://lsdkmanager.oss-cn-hangzhou.aliyuncs.com/lsdkzcb/yanzm.png" alt="">
                </div>
                <div style="width: 170px;">
                    <input maxlength="4" clearable placeholder="请输入验证码" class="captcodeImage" v-model="loginForm.captcha">
                </div>
                <div v-show="showCode" @click="showPicCode()" style="width: 125px;display: flex;">
                    <img id="img" style="width: 120px;height: 36px;margin: auto;" alt="">
                </div>
            </row>


            <Form-item style="margin-top: 20px">
                <Button type="primary" @click="handleLogin('loginForm')" long style="height: 45px;font-size: 18px">登录</Button>
            </Form-item>
        </Form>

    </div>
</template>

屏幕快照 2019-12-30 下午5.31.45.png

css如下

<style rel="stylesheet/scss" lang="scss">
    .captcodeImage {
        width: 150px;
        /*margin-right: 1.5rem;*/
        padding: 0;
        /*margin: 1px 0;*/
        /*font-size: 1.5rem;*/
        height: 100%;
        border-style: none;
        align-content: flex-start;
        border: none;
        outline:medium;
        cursor: pointer;
        border-style: none;
        text-indent: 10px;

    }

    .goto-login-mobile-input {
        width: 100%;
        margin-right: 1.5rem;
        padding: 0;
        /*margin: 1px 0;*/
        /*font-size: 1.5rem;*/
        height: 100%;
        border-style: none;
        align-content: flex-start;
        border: none;
        outline:medium;
        cursor: pointer;
        border-style: none;
        text-indent: 10px;

    }

    .loginLine {
        width: 5px;
        height: 26px;
        margin-top: 2px;
        margin-right: 20px;
        margin-left: 70px;
        background-image: url("https://lsdkmanager.oss-cn-hangzhou.aliyuncs.com/lsdkzcb/homeLine.png");
        background-size: 100% 100%;

    }

    .login-container {

        height: 100vh;
        background-image: url("https://lsdk.oss-cn-hangzhou.aliyuncs.com/GW/baclogoinbg.jpg");
        background-size: cover;
        background-repeat: no-repeat;



        .login-form {
            position: absolute;
            left: 700px;
            top: 50px;
            right: 0;
            width: 400px;
            padding: 35px 35px 15px 35px;
            padding: 25px 35px 15px 35px;
            margin: 120px auto;
            border: 0px solid gray;
            background: white;
            box-shadow: darkgrey 10px 10px 30px 5px;
        }

    }

</style>