简单的vue第三方登录布局

一，

   HTML

<div id="app">
     <div class="sale">
        <div class="photo" style="width: 500px; height: 200px;" v-if="ifshow">
          <input type="text" placeholder="请输入用户名称" /><br />
          <input type="password" placeholder="请输入用户密码">
        </div>
       <div class="photo" style="width: 500px; height: 200px;" v-else>
          <span>微信登陆</span>
          <img src="img/logincode.png" style="width:200px;height:200px;"/>
       </div>
      <a href="#" v-if="ifshow" class="erweima" @click="change"></a>
      <a href="#" v-else class="diannao" @click="change"></a>
     </div>
</div>

二，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