《实战》登录表单样式二

效果

HTML

知识点

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

<template>
    <div class="login-main">
        <!-- 整体 -->
        <div class="main-form">
            <div class="login-info">
                <div>可以放图片或logo等</div>
            </div>
            <div class="login-form">
                <!-- 用户名 -->
                <div class="input-item">
                    <el-input v-model="inputName" placeholder="用户名" @keyup.enter.native="commit"/>
                </div>
                <!-- 密码 -->
                <div class="input-item">
                    <el-input v-model="inputPw" placeholder="密码" type="password" @keyup.enter.native="commit"/>
                </div>
                <!-- 登录按钮 -->
                <div class="btn-item">
                    <div class="login-btn"  @click="commit">登录</div>
                </div>
            </div>
        </div>
    </div>
</template>

Javascript

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

CSS

注意

• 代码第 7-9 行，可换成背景图片；
• 代码 35 - 37 行，使用属性focus-within可在 input聚焦时，父 div 能聚焦且改变边框颜色；

<style lang="stylus" scoped>
.login-main {
    width: 100%;
    top: 0;
    bottom: 0;
    position: absolute;
    background: #999;
    // background url('../../public/images/login/login-bg.png') no-repeat center center;
    // background-size: 100% 100%;
    .main-form {
        width: 960px;
        display: flex;
        margin-top: 8%;
        margin-left: 50%;
        transform: translateX(-50%);
        .login-info {
            position: relative;
            background:gray;
            display:inline-block;
            width: 100%;
            height: 60vh;
            min-height: 423px;
        }
        .login-form {
            max-width: 414.55px;
            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;
                &:focus-within  {
                    border-color: red;
                }
                .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;
                }
            }
            .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;
    }
    // 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>