业务背景

想做一个登录页，本来想把图片放左边，登录表单放在右边。

调整了半天也不满意，直接全屏得了。

效果图

输入图片说明

源码实现

    
    登录
    
    
    
        html, body, #app {
            margin: 0;
            padding: 0;
        }

        .background {
            width: 100%;
            height: 100%; /**宽高100%是为了图片铺满屏幕 */
            z-index: -1;
            position: absolute;
            overflow: hidden;
            margin: 0;
        }

        .front {
            z-index: 1;
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: center;
        }
        .box-card {
            width: 400px;
            margin: 0 auto;
            margin-top: 15%;
            background-color: rgba(200,200,200,0.5);
            border-color: rgba(200,200,200,0.5);
            border-radius: 10px;
        }
        .title {
            text-align: center;
            font-size: 24px;
            color: rgba(50,50,50,0.8);
        }
    



    
        
    

    
        
            P-ADMIN 权限管理

            
                
                    
                
                登录
            
        
    






    new Vue({
        el: '#app',
        data: {
            asideImg: '/img/pic1.jpg',
            form: {
                token: '',
            },
            rules: {
                token: [
                    {required: true, message: '请输入登录密匙', trigger: 'blur'},
                    {min: 1, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur'}
                ]
            },
        },
        methods: {
            doLogin(form) {
            }
        }
    })

参考资料

【vue/css】如何给vue页面添加背景图片-vue cli3