css+vue实现手机端移动端登录注册页面效果代码-html代码-BFW代码库

代码语言：html
代码描述：css+vue实现手机端移动端登录注册页面效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        @font-face {
      font-family: "iconfont"; /* Project id 2754682 */
      src: url('data:application/octet-stream;base64,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') format('woff2'),
           url('') format('woff'),
           url('') format('truetype');
    }
    
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-view:before {
      content: "\e6c1";
    }
    
    .icon-weixin:before {
      content: "\e631";
    }
    
    .icon-duihua:before {
      content: "\e61e";
    }
    
    .icon-right:before {
      content: "\e64d";
    }
    
    .icon-qushi:before {
      content: "\e602";
    }
    
    .icon-mine:before {
      content: "\e615";
    }
    
    .icon-03-copy:before {
      content: "\e603";
    }
    
    .icon-duihua2:before {
      content: "\e62b";
    }
    
    .icon-home:before {
      content: "\e653";
    }
    
    .icon-search:before {
      content: "\e65d";
    }
    
    .icon-jiangzhang:before {
      content: "\e6cd";
    }
    
    .icon-jiangbei:before {
      content: "\e66c";
    }
    
    .icon-left:before {
      content: "\e73b";
    }
    
    .icon-duigou:before {
      content: "\e61a";
    }
    
    .icon-weibo:before {
      content: "\e601";
    }
    
    .icon-suo:before {
      content: "\e73a";
    }
    
    .icon-shouji:before {
      content: "\e620";
    }
    
    .icon-close:before {
      content: "\e600";
    }
    
    .icon-qq:before {
      content: "\e614";
    }
    
    .icon-hide:before {
      content: "\e6b3";
    }
    
    
            *{margin: 0;padding: 0;border: 0;list-style: none;text-decoration: none;color: inherit;font-weight: normal;font-family: "微软雅黑";box-sizing: border-box;font-style: normal;outline: none;-webkit-tap-highlight-color: transparent;}
        body{width: 100%;overflow-x: hidden;background: #ffffff;}
        img{vertical-align: top;max-width: 100%;}
        /* 头 */
        .header{width: 100%;height: 3.5rem;background: #f9711d;padding:1.05rem;text-align:center;}
        .header img{width: 2.1rem;margin-right: .28rem;}
        .header p{font-size: .36rem;color: #ffffff;}
        /* 表单区 */
        .content{width: 100%;height: auto;overflow: hidden;border-radius:  .35rem .35rem 0 0;background: #ffffff;padding: .54rem;margin-top: -0.5rem;}
        .content .type{width: 100%;height: auto;}
        .content .type ul{width: 100%;display: flex;justify-content: space-between;align-items: center;}
        .content .type ul li{width: 100%;text-align: center;font-size: .36rem;color: #333333;position: relative;}
        .content .type ul li.on{color:#f9711d}
        .content .type ul li.on::after{content: "";position: absolute;display: block;width: .75rem;height: .06rem;background: #f9711d;bottom: -.2rem;left: 50%;transform: translateX(-50%);}
        .content .form{width: 100%;height: auto;overflow: hidden;padding-top: .85rem;}
        .content .form .item{width: 100%;height: .9rem;background: #f1f1f1;margin-bottom: .3rem;border-radius: .15rem;display: flex;justify-content: space-between;align-items: center;padding-left: .3rem;padding-right: .25rem;}
        .content .form .item i{flex-shrink: 0;font-size: .38rem;color: #999999;}
        .content .form .item input{height: .5rem;width: 100%;padding:0 .4rem;background: none;color: #999999;font-size: .28rem;}
        .content .form .item span{color: #d1d1d1;font-size: .35rem;}
        .content .form .item span.on{color: #333;}
        .content .form .forget{text-align: right;font-size: .24rem;color: #f9711d;margin-bottom: .5rem;}
        .content .form .submit{width: 100%;height: auto;overflow: hidden;}
        .content .form .submit button{width: 100%;height: .9rem;font-size: .32rem;color: #ffffff;border-radius: .15rem;margin-bottom: .2rem;}
        .content .form .submit button:first-child{background: #f9711d;}
        .content .form .submit button:last-child{background: #ffffff;color: #f9711d;border: .01rem solid #f9711d;}
        .agreement{width: 100%;height: auto;overflow: hidden;padding-top: .05rem;margin-bottom: .7rem;font-size: .24rem;color: #333333;display: flex;align-items: center;letter-spacing: .005rem;}
        .agreement i{font-size: .3rem;margin-right: .1rem;color: #bbb;}
        .agreement i.on{color: #f9711d;}
        .agreement span{color: #f9711d;}
        /* 第三方登录 *.........完整代码请登录后点击上方下载按钮下载查看