简单的vue第三方登录布局

一，

   HTML

     

       

         

         
       

       

          微信登陆
         
       

     
     
     

二，script

data: {
                    ifshow:true
                },
                computed: {

                },
                mounted(){
                },
                methods: {
                    change(data){
                        if(this.ifshow){
                            this.ifshow=false;
                        }else{
                            this.ifshow=true;
                        }
                    }
        }

三，css      

body{
                width:100%;
                height: 100%;
                background: #ddd;
            }
            .sale{
                width: 500px;
                height: 300px;
                margin: 200px auto;
                background: #FFFFFF;
                border-radius: 6px;
            }
            input{
                width: 90%;
                height: 40px;
                margin: 20px 5%;
                text-indent:2em;
                border-radius: 6px;
                border: none;
                background: #eee;
            }
            a{
                width: 60px;
                height:60px;
                float:right;
                margin-top:40px;
            }
            a.erweima{
                background: url(img/codeSwich.png) -90px 0px;    /*二维码划过变浅*/
            }
            a.erweima:hover{
                background: url(img/codeSwich.png) -90px -88px;/*二维码划过变深*/
            }
            a.diannao{
                background: url(img/codeSwich.png) 0px 0px;        /*电脑滑过变浅*/
            }
            a.diannao:hover{
                background: url(img/codeSwich.png) 0px -87px;/*电脑化过变深*/
            }
            img{
                margin-left:28%;
            }
            span{
                text-align: center;
                color: #4caf50;
                font-size: 16px;
                display: block;
                padding: 20px 0;
            }

结果：

            

                                     

                                                                                                                                                                                                                                                                         ---------END                                                                                          

 

转载于:https://www.cnblogs.com/liujiajiablog/p/10214810.html