《实战》登录表单样式一

效果

HTML

注意

代码第 17 行，验证码信息应该从后台获取

知识点

• 代码 4 - 18 行，使用 elementui el-input 和 img做成图片嵌入效果，详见 CSS 章节；

<template>
    <div class="login-main">
        <div class="login-form">
            <!-- 用户名 -->
            <div class="input-item">
                <img class="user-icon" src="/images/user-icon.png" alt="" srcset="">
                <el-input v-model="inputName" placeholder="用户名" @keyup.enter.native="commit"/>
            </div>
            <!-- 密码 -->
            <div class="input-item">
                <img class="pwd-icon" src="/images/pwd-icon.png" alt="" srcset="">
                <el-input v-model="inputPw" placeholder="密码" type="password" @keyup.enter.native="commit"/>
            </div>
            <!-- 验证码 -->
            <div class="verificat-item">
                <el-input class="verificat-input" v-model="verCode" placeholder="验证码"  @keyup.enter.native="commit"/>
                <img src="/images/verificat.png" @click="getVerCode" alt="" srcset="">
            </div>
            <!-- 登录按钮 -->
            <div class="btn-item">
                <div class="login-btn"  @click="commit">登录</div>
            </div>
        </div>
    </div>
</template>

Javascript

<script>
export default {
    data () {
        return {
            inputPw: '',
            inputName: '',
            verCodeImg
        }
    },
    methods: {
        commit () {
        
        }
    }
}
</script>

CSS

注意

• 代码第 7-9 行，可换成背景图片；

• 代码第 16 - 17 行，自适应水平居中；

• 代码第 87 -94 行，隐藏原始 input 边框效果；

<style lang="stylus" scoped>
.login-main {
    width: 100%;
    top: 0;
    bottom: 0;
    position: absolute;
    background: #999;
    //   background url('../../../../public/images/login-bg.png') no-repeat center center;
    //   background-size: 100% 100%;
    .login-form {
        z-index: 3;
        background: white;
        background-size: 100% 100%;
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        padding: 40px 30px;
        box-shadow: 0px 20px 49px 5px rgba(14,72,150,0.66);
        border-radius: 6px;
        .input-item {
            background: #F8FDFF
            width: 280px;
            height: 38px;
            margin: 15px;
            border:1px solid #96D1EE;
            .user-icon {
                width: 17px;
                height: 17px;
                margin-top: 10px;
                float: left;
                margin-left: 15px;
            }
            .pwd-icon {
                width: 15px;
                height: 18px;
                margin-top: 9px;
                float: left;
                margin-left: 16px;
            }
        }
        .verificat-item {
            display: flex;
            padding-left: 15px;
            margin: 15px 0;
            .verificat-input {
                background: #F8FDFF
                border:1px solid #96D1EE;
            }
            img {
                    cursor: pointer;
                    width: 90px;
                    height: 36px;
                    margin-top: 2px;
            }
        }
        .btn-item {
            text-align: center;
            .login-btn {
                text-align: center;
                color: #fff;
                cursor pointer;
                font-size: 16px;
                font-family: Microsoft YaHei;   
                width: 284px;
                height: 38px;
                line-height: 38px;
                background: #0071F1;
                display: inline-block;
                border-radius: 4px;
                box-shadow: 0px 7px 15px 1px rgba(45,112,200,0.36);
                margin-top: 20px;
                &:hover {
                    color #ccc
                }
            }
        }
    }
}
</style>
<style lang="stylus">
.login-main {
    .el-input {
        margin-top:2px;
        width: 240px;
    }
    input{
        border: none;
        /* 去除选中或聚焦边框 */
        outline: none;
        background:#F8FDFF
        color: #11658B
        height: 34px;
    }
    .verificat-item .el-input {
        width: 188px;
    }
    // WebKit 谷歌
    input::-webkit-input-placeholder {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #11658B;
        line-height: 67px;
        letter-spacing: 3px;
    }
    // Mozilla Firefox 4 - 18 适配火狐
    input:-moz-placeholder { 
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #11658B;
        line-height: 67px;
        letter-spacing: 3px;
    }
    // Mozilla Firefox 19+ 适配火狐
    input::-moz-placeholder {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #11658B;
        line-height: 67px;
        letter-spacing: 3px;
    }
    // IE 10+  
    input:-ms-input-placeholder { 
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #11658B;
        line-height: 67px;
        letter-spacing: 3px;
    }
}
</style>