超好看超简洁的登陆注册页面及源码

￡神魔★判官ぃ 2023-07-03 15:26 9阅读 0赞

大家好，胖虎给大家带来平时设计及作业能用上的登陆注册页面

先给大家上几张图，喜欢的后面有源码

登陆页面实现了手机号正则表达式验证，密码正则表达式验证

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E2NjY2Nl8_size_16_color_FFFFFF_t_70][]

注册页面实现了手机号正则表达式验证，邮箱H5验证，密码正则表达式验证

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E2NjY2Nl8_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E2NjY2Nl8_size_16_color_FFFFFF_t_70 2][]

第一和第二张图为登陆注册页面图，下面是源码

如果大家有想要第三张图的源码，后面我也有放下载链接

首先放的是**登陆页面的HTML**

> <!DOCTYPE html>  
> <html lang="en">  
> <head>  
>     <title>登陆页面</title>  
>     <meta charset="UTF-8">  
>     <meta name="viewport" content="width=device-width, initial-scale=1">  
>     <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>  
>     <script src="js/signup.js"async></script>  
>     <script src="css/font\_1554827\_uixfzwgne2o/iconfont.js"></script>  
>     <link rel="stylesheet" type="text/css" href="css/sign.css">  
>     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
>     
> 
>       
>     <style>  
>     .icon \{  
>       width: 1.5em;  
>       height: 1.5em;  
>       vertical-align: -0.15em;  
>       fill: currentColor;  
>       overflow: hidden;  
>     \}  
>     </style>  
> </head>  
> <body>  
>       
>     <div class="limiter">  
>         <div class="container-login100">  
>             <div class="wrap-login100">  
>                 <form class="login100-form validate-form"  action="select.php" method="post">  
>                     <span class="login100-form-title p-b-26">  
>                         登陆  
>                     </span>  
>                       
>                     <span class="login100-form-title p-b-48">  
>                         <svg class="icon" aria-hidden="true">  
>                             <use xlink:href="\#icon-zhuce"></use>  
>                         </svg>  
>                     </span>  
>                   
>                     <div class="wrap-input100 validate-input" data-validate = "手机号或邮箱格式错误">  
>                         <input class="input100" type="text" id="tel" name="tel" required>  
>                         <span class="focus-input100" data-placeholder="手机号/邮箱"></span>  
>                     </div>  
>                       
>     
> 
>                     <div class="wrap-input100 validate-input" data-validate="密码格式错误">  
>                         <input class="input100" type="password" id="pass" name="pass" required>  
>                         <span class="focus-input100" data-placeholder="密码"></span>  
>                     </div>
> 
>                     <div class="container-login100-form-btn">  
>                         <div class="wrap-login100-form-btn">  
>                             <div class="login100-form-bgbtn"></div>  
>                             <button class="login100-form-btn" name='submit' value='submit'  href="index.html">  
>                                 登陆  
>                             </button>  
>                         </div>  
>                     </div>  
>                       
>                       
>                     <div class="text-center p-t-115">  
>                         <span class="txt1">  
>                             没有账号|  
>                         </span>  
>                         <a class="txt2" href="signin.html">  
>                             注册  
>                         </a>  
>                     </div>  
>                 </form>  
>             </div>  
>         </div>  
>     </div>  
>       
> </body>  
> </html>

**signup.js文件**

> $(function () \{  
>     /\*blur后 data-placeholder不下移\*/  
>     $('.input100').each(function()\{  
>         $(this).on('blur', function()\{  
>             if($(this).val().trim() != "") \{  
>                 $(this).addClass('has-val');  
>             \}  
>             else \{  
>                 $(this).removeClass('has-val');  
>             \}  
>         \})      
>     \})  
>       
>     /\*验证\*/  
>     var input = $('.validate-input .input100');
> 
>     $('.validate-form').on('submit',function()\{  
>         var check = true;
> 
>         for(var i=0; i<input.length; i++) \{  
>             if(validate(input\[i\]) == false)\{  
>                 showValidate(input\[i\]);  
>                 check=false;  
>             \}  
>         \}  
>         /\*if(check==true)  
>         \{  
>       
>             telEmail=$("\#telEmail").val().trim();  
>             pass=$("\#pass").val().trim();  
>             $.ajax(\{  
>                 url:"http://10.96.128.67/inserdata.php",  
>                 data: \{"telEmail":telEmail, "pass":pass\},  
>                 type:"POST",  
>                 dataType:"json",  
>                 success:function(data)\{  
>                         //强制转JSon为字符串  
>                         telmeg=JSON.stringify(data);                        alert(telmeg);  
>                     \},  
>                 error:function () \{  
>                       
>                       
>                     //alert(响应出错);  
>                       
>                       
>                     );  
>                 \}  
>             \});  
>         \}  
>         \*/  
>          
>        return check;  
>     \});
> 
>   
>     $('.validate-form .input100').each(function()\{  
>         $(this).focus(function()\{  
>            hideValidate(this);  
>         \});  
>     \});
> 
>     function validate (input) \{  
>         if($(input).attr('type') == 'text' || $(input).attr('name') == 'tel') \{  
>           if($(input).val().trim().match(/(^\[1\]((\[3\]\[0-9\])|(\[4\]\[5-9\])|(\[5\]\[0-3,5-9\])|(\[6\]\[5,6\])|(\[7\]\[0-8\])|(\[8\]\[0-9\])|(\[9\]\[1,8,9\]))\[0-9\]\{8\}$)|(^(\[A-Za-z0-9\_\\-\\.\])+\\@(\[A-Za-z0-9\_\\-\\.\])+\\.(\[A-Za-z\]\{2,4\})$)/) == null) \{  
>               return false;  
>           \}  
>               
>         \}  
>           
>         if($(input).attr('type') == 'password' || $(input).attr('name') == 'pass') \{  
>             if($(input).val().trim().match(/^\[\\w\_-\]\{6,16\}$/) == null) \{  
>                 return false;  
>             \}  
>         \}  
>           
>     \}
> 
>     function showValidate(input) \{  
>         var thisAlert = $(input).parent();  
>         $(thisAlert).addClass('alert-validate');  
>     \}
> 
>     function hideValidate(input) \{  
>         var thisAlert = $(input).parent();
> 
>         $(thisAlert).removeClass('alert-validate');  
>     \}  
>     
> 
>       
> \});

**iconfont.js文件（运用的是阿里矢量图）**

> !function(d)\{var a,p='<svg><symbol id="icon-faxian" viewBox="0 0 1024 1024"><path d="M523.733726 254.046427c-153.734334 0-273.573968 96.240101-420.546563 252.246436C229.817204 639.684643 336.075 758.702097 523.733726 758.702097c187.658726 0 325.595533-150.667797 420.546563-249.616075-97.19641-115.870031-235.133217-255.039596-420.546563-255.039595z m0 420.520965c-92.760939 0-168.218216-75.457277-168.218216-168.193642 0-92.733294 75.457277-168.190571 168.218216-168.190571 92.761963 0 168.218216 75.457277 168.218215 168.190571 0.001024 92.736366-75.456253 168.193642-168.218215 168.193642z" fill="\#98C4D8" ></path><path d="M523.733726 393.653191c-62.150863 0-112.691891 50.569696-112.691891 112.720559 0 62.12629 50.541027 112.694962 112.691891 112.694962s112.691891-50.569696 112.69189-112.694962c0.001024-62.150863-50.540004-112.720559-112.69189-112.720559z" fill="\#98C4D8" ></path><path d="M495.697698 226.009375c-153.734334 0-273.573968 96.240101-420.546563 252.246436 126.630041 133.39178 232.887837 252.409234 420.546563 252.409235 187.658726 0 325.595533-150.667797 420.546563-249.616075-97.197434-115.869007-235.133217-255.039596-420.546563-255.039596z m0 420.520966c-92.760939 0-168.218216-75.457277-168.218216-168.193643 0-92.733294 75.457277-168.190571 168.218216-168.19057 92.761963 0 168.218216 75.457277 168.218215 168.19057 0 92.736366-75.456253 168.193642-168.218215 168.193643z" fill="\#EFD9A0" ></path><path d="M495.697698 365.617163c-62.150863 0-112.691891 50.569696-112.691891 112.720559 0 62.12629 50.541027 112.694962 112.691891 112.694962s112.691891-50.569696 112.69189-112.694962c0.001024-62.151887-50.541027-112.720559-112.69189-112.720559z" fill="\#EFD9A0" ></path><path d="M335.854794 318.584523a25.223415 53.599373 55.515 1 0 88.361187-60.694907 25.223415 53.599373 55.515 1 0-88.361187 60.694907Z" fill="\#FEFEFE" ></path><path d="M281.690899 406.793208a16.815269 29.427488 55.515 1 0 48.512653-33.323126 16.815269 29.427488 55.515 1 0-48.512653 33.323126Z" fill="\#FEFEFE" ></path></symbol><symbol id="icon-xingquaihao--" viewBox="0 0 1024 1024"><path d="M229 619.5c-9.9 7.3-18.4 6.8-27.1-2.1-23.7-23.9-48.7-46.6-71.2-71.8-32.8-36.8-53.3-79.7-62.4-128.2-1.5-8.2-2.5-16.6-3.5-24.9-0.1-0.8 0.3-1.9-1-2.2v-8.1c1-1.7 0.2-3.6 0.5-5.4-0.2-1.8 0.5-3.7-0.5-5.4v-9c0.7-1.8 0.7-3.6 0-5.4v-9c1.3-8.4 1.3-16.9 2.8-25.3 8.3-45.6 26.7-86.6 55.9-122.6 31.6-38.8 70.8-66.9 117.8-84.1 18.8-6.9 38.1-11.5 58-14.1 4.9-0.6 9.8-0.2 14.6-1.2h4.5c2.3 1 4.7 0.2 7 0.5 9.2 0.6 15.2 7.2 15.8 17.4-0.6 11.2-7.1 18.4-18 19.3-22.2 1.9-44 5.5-65.1 12.8-30.3 10.5-57.1 26.7-80.9 48.3-17.7 16.1-32.5 34.4-44.4 55-15.8 27.3-25.7 56.7-29.2 88.1-1.1 9.8-1.9 19.7-1.7 29.6 0.5 30.3 6.4 59.5 18.3 87.4 11.8 27.8 28.5 52.2 50.1 73.4 19.8 19.4 39.2 39.2 58.9 58.8 5.2 5.1 7.6 11 6.6 18.2-0.5 4.2-1.7 8-5.8 10z" fill="" ></path><path d="M313 100.7c-5 2.2-10.4 1.7-15.6 2.4-84.8 12.8-150 55.6-195.3 128.3-21.6 34.8-33.3 73-37.2 113.6-0.1 1 0.6 2.5-1 3.1 0-81.2 0-162.4-0.1-243.6 0-3.2 0.7-3.9 3.9-3.9 81.8 0.2 163.6 0.1 245.3 0.1z" fill="\#FEFEFE" ></path><path d="M710.6 100.7c2.7 1.8 5.9 1.2 8.9 1.5 13.9 1.6 27.5 4.2 40.9 7.8 12.5 3.3 17.4 11.1 15.1 23.7 0.6 3.8-2.2 5.8-4.3 8.3-5.8 5.2-12.6 5.9-19.8 4.1-11.2-2.9-22.4-5.3-34-6.6-14.5-1.6-28.9-1.9-43.5-0.9-21.5 1.6-42.4 5.7-62.8 12.9-29.1 10.2-54.9 26-77.8 46.6-5.8 5.2-11.3 10.7-16.9 16.1-4.2 4.1-5.3 4.2-9.6-0.1-9.7-9.8-19.8-19.2-30.7-27.6-20.6-15.8-43.1-28.2-67.9-36.3-8.2-2.6-13.3-7.8-14.7-16.4 0-2.4-0.2-4.8 0.3-7.2 4.3-12.1 14.4-17 26.9-12.7 20 6.9 39.1 15.8 57.1 27.1 10.5 6.6 20.6 14 30.1 21.9 3 2.5 4.9 2.2 7.7-0.1 18.2-15.5 38.4-28.2 60.1-38.1 25.8-11.8 52.7-19.6 80.9-22.8 4.7-0.5 9.5-0.2 14.2-1h3.6c0.5 0.6 1.2 0.4 1.8 0.5 0.6 0 1.3 0.1 1.8-0.5h5.4c2.1 0.7 4.2 0.7 6.3 0h6.3c2.1 0.7 4.2 0.7 6.3 0 2.9-0.2 5.6-0.2 8.3-0.2z" fill="" ></path><path d="M671.1 100.7c-5.3 2.1-11 1.7-16.5 2.4-52.9 7-99.6 27.7-140.2 62.3-2.5 2.1-3.6 1.1-5.4-0.4-26-22.2-55.2-38.7-87.6-49.8-12.8-4.4-20.4-1.2-26.4 10.9-3.8 1.5-7.2-0.7-10.8-1.1-1.7-0.6-3.4-0.6-5.1-0.9-11.6-2-23.4-3-35.1-4-1.6-0.1-3.3 0-4.6-1.3-1.2-9.7-5.7-15.1-14.5-17.2-0.4-0.1-0.5-0.3-0.4-0.5s0.2-0.3 0.3-0.3c115.4-0.1 230.8-0.1 346.3-0.1z" fill="\#FEFEFE" ></path><path d="M324.7 100.7c0 0.3 0 0.5 0.1 0.8-2.4-0.2-5 0.9-7.3-0.8h7.2z" fill="\#6E6E6E" ></path><path d="M689.9 100.7c-2.1 1.4-4.2 1.4-6.3 0h6.3z" fill="\#111111" ></path><path d="M702.5 100.7c-2.1 1.5-4.2 1.3-6.3 0h6.3z" fill="\#272727" ></path><path d="M63.9 357.1c1.5 1.8 1.2 3.6 0 5.4v-5.4z" fill="\#2E2E2E" ></path><path d="M63.9 371.5c1.6 1.6 0.7 3.6 0.8 5.5-0.3 0.3-0.6 0.3-0.8-0.1v-5.4z" fill="\#131313" ></path><path d="M63.9 376.9c0.3 0 0.6 0 0.8 0.1-0.3 1.8 1 3.8-0.8 5.3v-5.4z" fill="\#3A3A3A" ></path><path d="M676.4 101.5c-0.7 0.1-1.5 0.3-1.8-0.8h1.8c0.3 0.2 0.4 0.4 0.3 0.5-0.1 0.2-0.2 0.3-0.3 0.3z" fill="\#888888" ></path><path d="M676.4 101.5v-0.8h1.8c-0.3 1-1 1-1.8 0.8z" fill="\#6B6B6B" ></path><path d="M339.4 118.8c13.5 0.5 27 1.5 40.2 4.4 1.2 1 3 0.4 4.2 1.4 1.8 0.6 3.7 1.1 5.5 1.8 3.5 1.3 5.9 3.4 5.4 7.5 1.3 7 5.2 12.2 12.1 14.4 39.3 12.9 72.5 35.1 100.8 64.9 4.2 4.4 4.4 4.4 8.6-0.1 25.7-26.9 55.2-48.1 90.3-61 47.1-17.3 95.1-20.4 143.7-7.3 7.6 2 14.5 1.7 20.7-3.5 1.9-1.1 3.1 0.3 4.5 1.2 18.8 11.9 36.2 25.6 51.3 42 30.8 33.4 51.6 72.2 61.6 116.7 4.8 21.6 7 43.5 5.9 65.6-1.6 31.4-8.4 61.6-21.3 90.4-10.1 22.6-23.1 43.3-39.2 62.1-3.8 4.4-7.6 8.9-11.8 13-66.8 65.6-132.5 132.4-199.2 198.1-41.3 40.7-82 82-123.3 122.7-1.6 1.6-2.9 3.5-5.2 4.1-2.2 0-3.5-1.6-4.8-3-22.6-23.1-46.3-45.1-69.1-68.1-37.3-37.6-74.9-75-112.4-112.5-1.6-1.6-3.1-3.2-4.9-4.6-8.6-6.8-14-7.3-23.4-2-0.8 0.4-1.5 1-2.5 0.6-15.9-16.1-31.8-32.3-48.3-47.9 7.7-9.9 7.2-18.6-1.7-27.5-19.3-19.3-38.7-38.5-58-57.7-35.9-35.6-58.9-78.2-66.2-128.2-11.8-80.6 11.9-149.9 70.8-206.3 35.9-34.4 79.3-54.1 128.5-61 6.2-0.9 12.5-1.2 18.8-1.8 11.5-1.3 17.2-7 18.4-18.4z" fill="\#FEDD5C" ></path><path d="M493.7 856.5c1.3-1.2 2.7-2.4 4-3.6 37-36.9 73.8-74.1 111.1-110.8 54.9-53.9 108.8-108.7 163.6-162.6 15.1-14.8 30-29.7 45.1-44.6 30.3-29.9 52.2-64.9 64.8-105.7 5.6-18.2 8.9-36.8 10.3-55.8 2.9-39.2-3.3-76.8-18.2-113.1-10.6-25.9-25.3-49.1-43.8-70.1-16.1-18.2-34.5-33.5-54.9-46.6-1.5-1-3.1-1.7-4.7-2.6 1.8-2.3 3.4-4.7 4.6-7.4 27.3 9.5 51.9 23.7 74.3 41.9 1.6 1.3 3.2 2.7 4.8 4.1 0.6 1.5-0.4 2.6-1 3.8-3.9 8.3-2.9 14.4 3.3 20.9 18.3 19 33.7 40.1 45 64.1 11.2 23.7 18.3 48.4 21.3 74.5 1.1 9.5 1.9 19.1 1.8 28.7-0.4 30-6.3 58.9-17.8 86.7-4.8 11.5-4 15.9 4.8 24.9 0.5 0.5 1 1.1 1.1 1.9-8.9 17.3-19.8 33.2-32.7 47.7-1.5 0.6-2.6-0.3-3.7-1-6.9-4.2-13.4-3-19.7 1.5-2 1.4-3.6 3.1-5.3 4.8-37.1 37.1-74.1 74.3-111.4 111.2-8.3 8.2-10.2 16.3-4.1 25.1 0.5 0.7 0.8 1.6 0.5 2.6-7.4 7.2-14.7 14.5-22.1 21.7-30.5 30.3-60.9 60.6-91.4 90.9-1.8 0.9-2.7-0.7-3.9-1.4-7.4-4.3-14.8-3.4-21 2.5l-0.6 0.6c-26.5 26.6-53.9 52.4-80.2 79.3l-1.9 1.9c-3.4 3.2-4.4 3.2-7.8-0.1-4.1-4-8.1-8-12.1-12.1-1-1.1-2.3-2-2.1-3.8z" fill="\#EC8B1C" ></path><path d="M493.7 856.5c5.4 5.4 10.8 10.8 16 16.3 1.7 1.7 2.7 1.6 4.3 0 6.6-6.7 13.3-13.3 20-20 20.6-20.5 41.2-40.9 61.8-61.4 9-8.9 17.3-9.5 27.5-1.8 7.4 10.2 6.8 18.4-2.3 27.5-35.3 35.1-70.6 70.1-105.8 105.4-2.9 2.9-4.2 2.5-6.9-0.1-76.1-76-152.3-151.7-228.6-227.5-9.1-9.1-9.9-17.1-2.5-27.5 10.2-7.8 18.6-7.3 27.8 1.9 61.6 61.2 123.2 122.4 184.7 183.6 1.3 1.3 2.7 2.4 4 3.6zM913.2 485.1c-10-6.6-12.4-14.4-7.8-25.4 36.4-86.5 17.5-185.5-48.2-253-8.8-9-9.5-16.5-2.6-26.8 10.4-8.3 19-7.8 28.4 1.9 40 41.2 64.3 90.2 73.3 146.9 8 50.1 1.7 98.4-17.9 145.1-4.8 11.6-13.1 15.3-25.2 11.3zM736.8 677c-7.7-10.6-7.1-18.6 2.1-27.8l114-113.4c9.3-9.3 16.6-10.1 27.5-3 8.2 10.8 7.6 18.8-2.1 28.4-38 37.8-76.1 75.6-114.1 113.4-9 9.1-16.8 9.8-27.4 2.4z" fill="" ></path><path d="M394.7 133.8c-1-6.6-7.3-6.4-11.4-8.8-0.2-0.8 0-1.4 1-1 3.6 0.7 7.1 1.4 10.7 2.1-0.1 2.6-0.2 5.2-0.3 7.7z" fill="\#EC9021" ></path><path d="M384.2 124c-0.3 0.3-0.7 0.6-1 1-1.2-0.7-2.8-0.5-3.6-1.9 1.6 0.1 3.2-0.1 4.6 0.9z" fill="\#F1A53E" ></path><path d="M151.1 361.4c0.3-23.8 8.5-53.7 24.5-81.3 2.8-4.8 6.8-6.3 10.8-3.9 3.8 2.3 4.4 6.3 1.7 11-16 28-23.7 58-22.5 90.3 1 27.1 10.5 51.3 25.2 73.8 16 24.5 34.4 47.2 53.8 69 17.9 20.2 36.7 39.5 55.9 58.5 3.5 3.5 3.8 7.8 1 10.7-3.1 3.3-7.2 3.1-11-0.6-36.2-35.9-71.6-72.5-101.3-114.2-9.9-13.9-19-28.4-25.9-44.1-8.5-19-12.2-38.5-12.2-69.2zM324.1 189c5.2-0.1 8.5 2.5 8.7 6.9 0.1 4.3-2.8 7-7.8 7.5-24.4 2.2-47.7 8.2-69.5 19.6-0.9 0.5-1.9 1-2.8 1.4-5.1 2.6-9.2 1.7-11.3-2.4-1.9-3.8-0.2-7.8 4.4-10.3 11.9-6.4 24.4-11.5 37.3-15.3 13.4-3.9 27.1-6.2 41-7.4z" fill="\#FEFEFE" ></path></symbol><symbol id="icon-microblog" viewBox="0 0 1024 1024"><path d="M954.368 185.856c-67.072-75.264-167.424-103.424-256.512-83.456-22.528 5.632-33.28 25.088-30.72 47.616 5.632 22.528 25.088 33.28 47.616 30.72 64-13.824 136.704 5.632 184.32 58.368 47.616 53.248 61.44 125.44 38.912 189.952-2.56 11.264-2.56 19.456 2.56 30.72 5.632 8.192 13.824 16.896 22.528 19.456 19.456 5.632 41.984-5.632 50.176-25.088 24.576-92.672 8.192-193.024-58.88-268.288z" fill="\#DD5B59" ></path><path d="M834.56 431.104c16.896 5.632 36.352-2.56 41.984-22.528 13.824-44.544 5.632-92.16-27.648-128.512-33.28-36.352-80.896-50.176-125.44-41.984-19.456 2.56-30.72 22.528-25.088 38.912 2.56 19.456 22.528 30.72 38.912 25.088 22.528-5.632 44.544 2.56 61.44 19.456 16.896 16.896 19.456 41.984 13.824 64-6.144 20.48 5.12 39.936 22.016 45.568zM767.488 495.616c-13.824-5.632-25.088-8.192-16.896-25.088 16.896-41.984 16.896-78.336 0-103.424-33.28-47.616-125.44-44.544-228.864 0 0 0-33.28 13.824-25.088-11.264 16.896-53.248 13.824-94.72-11.264-119.808-55.808-55.808-206.336 2.56-334.848 131.072C55.808 464.896 0 565.248 0 654.336c0 169.984 217.6 273.408 429.568 273.408 279.04 0 463.36-161.792 463.36-290.304 0-77.824-67.072-122.368-125.44-141.824z m-337.92 371.2c-169.984 16.896-315.392-61.44-326.656-169.984-10.752-112.128 117.76-215.552 287.744-231.936 169.984-16.896 315.392 61.44 326.656 169.984 10.752 111.616-117.248 215.04-287.744 231.936z" fill="\#DD5B59" ></path><path d="M446.464 548.352c-80.896-22.528-173.056 19.456-206.336 89.088-36.352 72.704 0 153.6 80.896 178.688 83.968 27.648 184.32-13.824 217.6-92.16 33.28-75.264-8.192-153.088-92.16-175.616z m-61.44 186.88c-16.896 25.088-50.176 38.912-78.336 25.088-25.088-11.264-33.28-41.984-16.896-67.072 16.896-25.088 50.176-36.352 75.264-25.088 28.16 8.704 36.864 39.424 19.968 67.072z" fill="\#DD5B59" ></path></symbol><symbol id="icon-xingbienan" viewBox="0 0 1024 1024"><path d="M412.3 856.9c133.6 0 241.9-108.3 241.9-241.9S545.9 373.1 412.3 373.1 170.4 481.4 170.4 615s108.3 241.9 241.9 241.9z m232.6-435.2c43.6 52.4 69.8 119.8 69.8 193.2 0 167-135.4 302.4-302.4 302.4S110 782 110 615s135.4-302.4 302.4-302.4c71.7 0 137.6 25 189.5 66.7L729 252.1H563.5c-16.7 0-30.2-13.5-30.2-30.2s13.5-30.2 30.2-30.2h241.9c16.7 0 30.2 13.5 30.2 30.2v241.9c0 16.7-13.5 30.2-30.2 30.2s-30.2-13.5-30.2-30.2V291.5L644.9 421.7z"  ></path></symbol><symbol id="icon-vip" viewBox="0 0 1024 1024"><path d="M512 1024C229.233778 1024 0 794.766222 0 512S229.233778 0 512 0s512 229.233778 512 512-229.233778 512-512 512z m306.915556-619.008a87.509333 87.509333 0 0 0-18.574223-33.066667c-8.419556-9.358222-19.100444-16.682667-32.028444-21.973333-12.913778-5.290667-28.273778-7.964444-46.051556-7.964444h-76.273777a28.444444 28.444444 0 0 0-28.444445 28.444444V662.613333a24.192 24.192 0 0 0 48.384 0v-112.312889h46.762667c20.096 0 37.233778-2.545778 51.427555-7.608888 14.193778-5.048889 25.770667-12.188444 34.830223-21.390223a82.545778 82.545778 0 0 0 19.768888-32.952889c4.096-12.771556 6.172444-26.88 6.172445-42.311111 0-14.648889-1.976889-28.316444-5.973333-41.031111z m-61.724445 89.543111c-10.183111 10.368-25.031111 15.544889-44.515555 15.544889h-46.279112V381.724444h40.206223c12.16 0 23.466667 1.792 34.033777 5.376a42.168889 42.168889 0 0 1 23.836445 19.754667c5.347556 9.585778 8.049778 22.471111 8.049778 38.684445 0 22.286222-5.105778 38.613333-15.317334 48.981333z m-431.146667 121.898667l-68.437333-249.528889a33.863111 33.863111 0 0 0-32.668444-24.903111 19.299556 19.299556 0 0 0-18.503111 24.775111l87.537777 296.149333a33.322667 33.322667 0 0 0 31.957334 23.864889 33.379556 33.379556 0 0 0 32-23.850667l88.547555-297.528888a18.204444 18.204444 0 0 0-17.464889-23.409778c-14.464 0-27.164444 9.585778-31.146666 23.480889l-71.822223 250.951111z m191.800889-274.432c-13.368889 0-24.192 10.823111-24.192 24.192v296.405333a24.192 24.192 0 0 0 48.384 0V366.193778c0-13.368889-10.837333-24.192-24.192-24.192z" fill="\#D7A26A" ></path></symbol><symbol id="icon-weixinfangkeicon" viewBox="0 0 1024 1024"><path d="M637.696 959.744c-19.7376 0-70.784 6.8352-102.4-25.6-29.0816-26.2656-51.2-79.6672-51.2-128 0 49.0496 13.0304-95.36 4.6848-131.1488-6.3232-27.0592-34.2272-26.2912-107.0848-48.0512-124.3904-112.7168-76.8512-255.5648-76.8-256 0 0 41.3184-107.6992 256-128 12.4672-1.0496 40.8064 0 51.2 0 140.2112 0 226.9184 95.2832 256 256 11.4176 64.0768 0.3584 188.1088-25.6 281.6-22.6304 62.208-46.6432 155.0336-153.6 179.2-5.1968 2.0992-40.8064 0-51.2 0z m-25.6-665.6c-62.5152-0.5632-51.2 0-51.2 0-190.08 16.4352-196.48 83.4816-204.8 102.4-21.0944 75.4176-7.1168 122.4192 51.2 179.2 7.7312 19.3536 84.1472 16.5888 102.4 51.2 38.4256 53.5808 24.7808 130.6112 25.6 153.6 0.8192 22.9888-1.5616 75.9552 25.6 102.4 26.0352 34.304 60.1856 25.6 76.8 25.6 8.32 0 44.9792 1.0496 51.2 0 71.1168-16.768 156.928-164.1472 128-358.4-0.256-101.0432-30.848-254.3872-204.8-256zM228.096 345.344a76.8 76.8 0 1 1 0-153.6 76.8 76.8 0 0 1 0 153.6z m0-102.4a25.6 25.6 0 1 0 0 51.2 25.6 25.6 0 0 0 0-51.2zM405.3248 189.6704c-20.7616 0-38.4256-17.8688-38.4256-38.8864 0-20.992 17.664-38.8608 38.4256-38.8608 20.7616 0 38.4256 17.8688 38.4256 38.8608 0 21.0176-17.664 38.8864-38.4256 38.8864z m358.9632 1.4336c-20.7616 0-38.4256-17.8688-38.4256-38.8608 0-21.0176 17.664-38.8864 38.4256-38.8864 20.7616 0 38.4256 17.8688 38.4256 38.8864 0 20.992-17.664 38.8608-38.4256 38.8608z m-192.7936-49.7664c-20.7872 0-38.4256-17.8432-38.4256-38.8608 0-21.0176 17.6384-38.8864 38.4256-38.8864 20.7616 0 38.4256 17.8688 38.4256 38.8864s-17.664 38.8608-38.4256 38.8608z" fill="\#FF8462" ></path></symbol><symbol id="icon-yonghu1" viewBox="0 0 1024 1024"><path d="M512.3 250.5c112.2 0 170.4 102.9 196.6 143.9 0-1.5 0.1-3 0.1-4.4 0-92.8 0-233.1-192.4-233.1-186.5 0-192.2 131.8-192.4 224.4 23.2-46.3 74.9-130.8 188.1-130.8zM169.9 753.8c-37.6 25.3-61.7 99.8-69.1 131h390.7L360.9 665c-39.2 15.6-148.8 60.4-191 88.8zM853.3 753.8c-42.1-28.3-151.8-73.2-190.9-88.8L531.7 884.7H924c-2.8-15.3-20-96.8-70.7-130.9z" fill="\#FFD524" ></path><path d="M516.5 666.6h0.2c139.5-0.2 228.4-181.7 228.4-276.5 0-87.4 0-269.1-228.4-269.1S288.3 302.8 288.3 390.1c0 58.1 33.8 153.7 96.5 216.3 39.5 39.3 85 60.2 131.7 60.2zM324.3 381.4c0.2-92.6 5.9-224.4 192.4-224.4 192.4 0 192.4 140.3 192.4 233.1 0 1.4-0.1 2.9-0.1 4.4-2.6 85.3-81.1 235.9-192.3 236.1h-0.2c-37.5 0-73.2-16.7-106.2-49.7-55.8-55.7-86-139.9-86-190.8v-8.7z" fill="\#6B400D" ></path><path d="M960.1 882c-0.7-4.5-17.7-111.7-86.7-158.2-54.8-36.9-205.8-95.6-212.2-98.1-8.2-3.2-17.5 0-22 7.6L511.6 848 384 633.4c-4.5-7.6-13.8-10.8-22-7.6-6.4 2.5-157.4 61.2-212.2 98.1-59.1 39.8-84 152.3-85.1 157.1-2.1 9.7 4.1 19.3 13.8 21.4 1.3 0.3 2.6 0.4 3.8 0.4 8.3 0 15.8-5.8 17.6-14.2 0.2-1.1 0.6-2.5 0.9-3.8 7.4-31.2 31.5-105.7 69.1-131 42.1-28.3 151.8-73.2 190.9-88.8l130.7 219.8 4.6 7.7c3.3 5.5 9.1 8.8 15.5 8.8s12.2-3.3 15.5-8.8l4.6-7.7L662.3 665c39.2 15.6 148.8 60.5 190.9 88.8 50.7 34.1 67.9 115.6 70.7 131 0.3 1.5 0.5 2.6 0.5 2.7 1.5 9.8 10.8 16.7 20.5 15.1 10-1.5 16.7-10.7 15.2-20.6z" fill="\#6B400D" ></path></symbol><symbol id="icon-fensi" viewBox="0 0 1024 1024"><path d="M235.4 458.6c-9.6 9.4-9.8 24.8-0.4 34.4 9.4 9.6 24.8 9.8 34.4 0.4 9.6-9.4 9.8-24.8 0.4-34.4-9.4-9.6-24.8-9.8-34.4-0.4zM317.9 514.1c-7.5-7.6-19.8-7.8-27.5-0.3l-1.1 1.1c-7.6 7.5-7.8 19.8-0.3 27.5l128.2 131.2c7.5 7.6 19.8 7.8 27.5 0.3l1.1-1.1c7.6-7.5 7.8-19.8 0.3-27.5L317.9 514.1z" fill="\#6B400D" ></path><path d="M923.9 541.5c-25.5-27.2-61.5-42.8-98.8-42.8-19.9 0-39 4.3-56.7 12.5 69.8-91.8 67.4-222.6-10.3-305.1-43.7-46.7-105.4-73.5-169.3-73.5-53.5 0-105.7 18.7-147.1 52.7-41.4-34-93.6-52.7-147.1-52.7-64 0-125.7 26.8-169.3 73.4-85.2 90.5-80.3 238.5 11.1 329.9l273.8 273.6c8.4 8.4 19.6 13.1 31.6 13.1h0.1c11.9 0 23.1-4.7 31.5-13.1l88.2-88.2c3.5 4.3 7.1 8.5 11.1 12.4l148.2 148.5c6.4 6.3 14.8 9.7 23.7 9.7h0.8c8.9 0 17.2-3.5 23.6-9.7l148.6-148.4c53.3-52.2 56.1-136.6 6.3-192.3z m-482.1 231l-271.1-271c-73.1-72.8-77.6-190.4-10.1-262.1 34.6-37 83.5-58.1 134.3-58.1 44.1 0 86.8 15.9 120 44.9 7.4 6.5 17 10.2 26.9 10.2 9.9 0 19.4-3.6 26.9-10.1C502.1 197 544.9 181 589.3 181c50.5 0 99.2 21.1 133.7 57.8 67.4 71.6 62.8 189.1-10.1 262.1l-4.5 4.5c-13.7-4.6-28.1-7-42.9-7-37.4 0-73.5 15.7-99.1 43.1-34.1 38.1-43.5 89.6-28.9 135.1l-95.7 95.9z m446-68.7L745.4 846.2 603 703.8c-37.2-35.7-39.7-94.4-5.7-133.2 17.6-18.8 42.2-29.5 68-29.5 22.5 0 44.2 8.1 61.1 22.9 10.7 9.3 26.6 9.3 37.3 0 37.8-33.1 95.2-30.2 129.4 6.6 34.2 38.7 31.8 97.4-5.3 133.2z" fill="\#6B400D" ></path><path d="M763.7 564c-10.7 9.3-26.6 9.3-37.3 0-16.9-14.8-38.6-22.9-61.1-22.9-25.8 0-50.4 10.7-68 29.5-34 38.8-31.5 97.5 5.7 133.2l142.4 142.4 142.4-142.4c37.1-35.8 39.4-94.5 5.3-133.2-34.3-36.8-91.6-39.7-129.4-6.6z" fill="\#FFD524" ></path></symbol><symbol id="icon-shengri" viewBox="0 0 1024 1024"><path d="M292.547048 365.738667V192.804571C296.374857 194.169905 288.256 219.428571 292.571429 219.428571l85.333333-24.380952 12.190476-48.761905s-21.26019 2.730667 0 0h243.809524l12.190476 48.761905L707.047619 219.428571l48.761905-24.380952s1.389714-69.290667 0-73.142857h121.904762l73.142857 73.142857v170.666667l-658.310095 0.024381z" fill="\#FFCB57" ></path><path d="M841.289143 999.619048H182.710857C108.81219 999.619048 48.761905 941.83619 48.761905 870.716952V236.982857c0-71.119238 60.050286-128.902095 133.948952-128.902095h62.634667v-5.510095C245.345524 59.465143 281.819429 24.380952 326.582857 24.380952c44.78781 0 81.261714 35.08419 81.261714 78.189715v5.510095h212.041143v-5.510095C619.885714 59.465143 656.359619 24.380952 701.147429 24.380952c44.763429 0 81.237333 35.08419 81.237333 78.189715v5.510095h58.904381C915.18781 108.080762 975.238095 165.863619 975.238095 236.982857v633.734095C975.238095 941.83619 915.18781 999.619048 841.289143 999.619048zM363.25181 102.570667c0-19.480381-16.432762-35.279238-36.668953-35.279238s-36.644571 15.798857-36.644571 35.279238v5.510095h73.313524v-5.510095z m0 48.493714h-73.313524v12.873143c0 19.480381 16.408381 35.279238 36.644571 35.279238 20.23619 0 36.668952-15.798857 36.668953-35.279238v-12.873143z m374.54019-48.493714c0-19.480381-16.408381-35.279238-36.644571-35.279238-20.260571 0-36.668952 15.798857-36.668953 35.279238v5.510095h73.313524v-5.510095z m0 48.493714h-73.313524v12.873143c0 19.480381 16.408381 35.279238 36.668953 35.279238 20.23619 0 36.644571-15.798857 36.644571-35.279238v-12.873143z m192.78019 85.918476c0-47.420952-40.106667-85.918476-89.283047-85.918476H782.384762v12.873143c0.097524 43.081143-36.376381 78.189714-81.237333 78.189714-44.78781 0-81.261714-35.108571-81.261715-78.189714v-12.873143h-212.041143v12.873143c0.097524 43.081143-36.376381 78.189714-81.261714 78.189714-44.763429 0-81.237333-35.108571-81.237333-78.189714v-12.873143H182.710857c-49.273905 0-89.283048 38.595048-89.283047 85.918476v126.512762h837.14438V236.982857z m0 169.496381H93.42781v464.237714c0 47.420952 40.106667 85.918476 89.283047 85.918477h658.578286c49.273905 0 89.283048-38.595048 89.283047-85.918477V406.479238zM515.047619 899.925333l-92.306286-12.580571v-11.946667l130.974477-332.653714h-193.999239c0-25.819429-0.658286-51.102476-0.658285-76.921905l15.750095-12.580571h277.065143l13.06819 61.732571v17.017905l-130.31619 354.084571-19.577905 13.848381z" fill="\#7A590E" ></path></symbol><symbol id="icon-zhuce" viewBox="0 0 1024 1024"><path d="M880.88381 461.04381a97.718857 97.718857 0 0 1 0 137.99619l-241.371429 241.371429a97.718857 97.718857 0 0 1-137.996191 0 97.718857 97.718857 0 0 1 0-137.996191l241.371429-241.371428c38.034286-37.790476 100.205714-37.790476 137.996191 0z" fill="\#FFCD00" ></path><path d="M762.63619 905.752381h-71.43619c-6.826667 0-12.190476-5.36381-12.190476-12.190476s5.36381-12.190476 12.190476-12.190476h71.43619c20.23619 0 36.571429-16.335238 36.571429-36.571429v-72.167619c0-6.826667 5.36381-12.190476 12.190476-12.190476s12.190476 5.36381 12.190476 12.190476v72.167619a60.952381 60.952381 0 0 1-60.952381 60.952381zM375.222857 905.752381H240.88381a60.952381 60.952381 0 0 1-60.952381-60.952381V198.217143a60.952381 60.952381 0 0 1 60.952381-60.952381h521.75238a60.952381 60.952381 0 0 1 60.952381 60.952381v130.925714c0 6.826667-5.36381 12.190476-12.190476 12.190476s-12.190476-5.36381-12.190476-12.190476V198.217143c0-20.23619-16.335238-36.571429-36.571429-36.571429H240.88381c-20.23619 0-36.571429 16.335238-36.571429 36.571429v646.826667c0 20.23619 16.335238 36.571429 36.571429 36.571428h134.339047c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 11.946667-12.190476 11.946667z"  ></path><path d="M714.849524 318.902857H408.380952c-6.826667 0-12.190476-5.36381-12.190476-12.190476s5.36381-12.190476 12.190476-12.190476h306.224762c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-11.946666 12.190476zM666.575238 445.927619H408.380952c-6.826667 0-12.190476-5.36381-12.190476-12.190476s5.36381-12.190476 12.190476-12.190476h257.950477c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-11.946667 12.190476zM537.6 572.708571h-128.975238c-6.826667 0-12.190476-5.36381-12.190476-12.190476s5.36381-12.190476 12.190476-12.190476h128.975238c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.607619 12.190476-12.190476 12.190476zM323.047619 318.902857h-34.133333c-6.826667 0-12.190476-5.36381-12.190476-12.190476s5.36381-12.190476 12.190476-12.190476h34.133333c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM323.047619 445.927619h-34.133333c-6.826667 0-12.190476-5.36381-12.190476-12.190476s5.36381-12.190476 12.190476-12.190476h34.133333c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476zM323.047619 572.708571h-34.133333c-6.826667 0-12.190476-5.36381-12.190476-12.190476s5.36381-12.190476 12.190476-12.190476h34.133333c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476z"  ></path><path d="M323.047619 699.733333h-34.133333c-6.826667 0-12.190476-5.36381-12.190476-12.190476s5.36381-12.190476 12.190476-12.190476h34.133333c6.826667 0 12.190476 5.36381 12.190476 12.190476s-5.36381 12.190476-12.190476 12.190476z"  ></path><path d="M420.327619 934.034286a11.459048 11.459048 0 0 1-8.533333-3.657143 11.873524 11.873524 0 0 1-3.413334-10.48381l31.939048-204.55619c0.487619-2.438095 1.706667-4.87619 3.413333-6.826667L767.024762 385.219048c22.186667-22.186667 56.56381-23.893333 76.55619-3.900953l117.272381 117.272381c9.99619 9.99619 14.872381 23.405714 13.897143 38.278095-0.975238 14.140952-7.314286 27.794286-17.798095 38.278096L633.417143 898.681905c-1.950476 1.706667-4.388571 2.925714-6.826667 3.413333l-204.55619 31.939048h-1.706667z m43.154286-210.895238l-28.769524 184.07619 184.07619-28.769524 320.609524-320.609524c6.339048-6.339048 9.99619-14.384762 10.727619-22.674285 0.487619-7.558095-1.950476-14.628571-6.826666-19.504762l-117.272381-117.272381c-10.24-10.24-29.744762-8.533333-42.179048 3.900952L463.481905 723.139048z m484.693333-156.525715z"  ></path><path d="M890.63619 636.342857a11.459048 11.459048 0 0 1-8.533333-3.657143l-172.617143-172.617143c-4.87619-4.87619-4.87619-12.434286 0-17.310476s12.434286-4.87619 17.310476 0l172.617143 172.617143c4.87619 4.87619 4.87619 12.434286 0 17.310476-2.438095 2.438095-5.607619 3.657143-8.777143 3.657143z"  ></path><path d="M537.112381 915.992381a11.459048 11.459048 0 0 1-8.533333-3.657143l-93.866667-93.866667c-4.87619-4.87619-4.87619-12.434286 0-17.310476s12.434286-4.87619 17.310476 0l93.866667 93.866667c4.87619 4.87619 4.87619 12.434286 0 17.310476-2.681905 2.438095-5.607619 3.657143-8.777143 3.657143z"  ></path><path d="M522.727619 774.095238a11.459048 11.459048 0 0 1-8.533333-3.657143c-4.87619-4.87619-4.87619-12.434286 0-17.310476l252.830476-252.830476c4.87619-4.87619 12.434286-4.87619 17.310476 0s4.87619 12.434286 0 17.310476L531.260952 770.438095c-2.438095 2.438095-5.607619 3.657143-8.533333 3.657143z"  ></path><path d="M580.266667 831.634286a11.459048 11.459048 0 0 1-8.533334-3.657143c-4.87619-4.87619-4.87619-12.434286 0-17.310476l252.830477-252.830477c4.87619-4.87619 12.434286-4.87619 17.310476 0s4.87619 12.434286 0 17.310477L588.8 827.977143c-2.438095 2.438095-5.607619 3.657143-8.533333 3.657143z"  ></path></symbol><symbol id="icon-svg-" viewBox="0 0 1024 1024"><path d="M811.4176 125.952h-111.9232a20.48 20.48 0 0 0-20.48 20.48v210.5344a20.48 20.48 0 0 0 20.48 20.48h111.9232a20.1216 20.1216 0 0 0 9.5744-2.4064 20.48 20.48 0 0 0 10.9056-17.9712V146.432a20.48 20.48 0 0 0-20.48-20.48z m-111.9232 69.7344V146.432h111.9232v161.1264z" fill="\#EA6381" ></path><path d="M811.4176 105.472h-111.9232a40.96 40.96 0 0 0-40.96 40.96v66.2016l40.96 40.96V146.432h111.9232v210.5344h-8.448l8.4992 8.4992 24.3712 24.3712a40.96 40.96 0 0 0 16.5888-32.8704V146.432a40.96 40.96 0 0 0-41.0112-40.96z" fill="\#692F76" ></path><path d="M811.4176 146.432l-0.0512 161.1264-111.872-111.872V146.432h111.9232z" fill="\#EA6381" ></path><path d="M811.3664 292.1984l-111.872-111.872v15.36l111.872 111.872 0.0512-161.1264-0.0512 145.7664z" fill="\#CC475F" ></path><path d="M699.4944 146.432h111.9232v15.36h-111.9232z" fill="\#F093AA" ></path><path d="M749.9776 400.4864H270.8992a81.92 81.92 0 0 0-81.92 81.92v347.7504a81.92 81.92 0 0 0 81.92 81.92h479.0784a81.92 81.92 0 0 0 81.92-81.92V482.4064a81.92 81.92 0 0 0-81.92-81.92z m61.44 429.6704a61.44 61.44 0 0 1-61.44 61.44H270.8992a61.44 61.44 0 0 1-61.44-61.44v-295.5776h601.9584z" fill="\#F6D95F" ></path><path d="M749.9776 380.0064H270.8992a102.4 102.4 0 0 0-102.4 102.4v347.7504a102.4 102.4 0 0 0 102.4 102.4h479.0784a102.4 102.4 0 0 0 102.4-102.4V482.4064a102.4 102.4 0 0 0-102.4-102.4z m61.44 450.1504a61.44 61.44 0 0 1-61.44 61.44H270.8992a61.44 61.44 0 0 1-61.44-61.44V482.4064a61.44 61.44 0 0 1 61.44-61.44h479.0784a61.44 61.44 0 0 1 61.44 61.44z" fill="\#692F76" ></path><path d="M811.4176 534.5792v295.5776a61.44 61.44 0 0 1-61.44 61.44H270.8992a61.44 61.44 0 0 1-61.44-61.44v-295.5776z" fill="\#F6D95F" ></path><path d="M749.9776 876.2368H270.8992a61.44 61.44 0 0 1-61.44-61.44v15.36a61.44 61.44 0 0 0 61.44 61.44h479.0784a61.44 61.44 0 0 0 61.44-61.44v-15.36a61.44 61.44 0 0 1-61.44 61.44z" fill="\#EAB943" ></path><path d="M209.4592 534.5792h601.9584v15.36H209.4592z" fill="\#FFFFFF" ></path><path d="M873.1136 398.2848L848.6912 373.76l-37.3248-37.3248-152.832-152.7296L568.32 93.5424a81.92 81.92 0 0 0-115.8656 0L147.7632 398.2848a81.92 81.92 0 0 0 0 115.8144h725.3504a81.92 81.92 0 0 0 0-115.8144z m-9.216 95.3344H156.9792a61.8496 61.8496 0 0 1 5.12-80.896l304.896-304.7424a61.44 61.44 0 0 1 87.04 0l145.6128 145.6128 103.424 103.3728 8.4992 8.4992 24.3712 24.3712 22.8864 22.8864a61.7472 61.7472 0 0 1 5.12 80.896z" fill="\#F6D95F" ></path><path d="M887.6032 384l-55.7056-55.9104-20.48-20.48-111.9232-111.9232-116.6336-116.6336a102.4 102.4 0 0 0-144.7936 0L133.12 384a102.4 102.4 0 0 0 0 144.7936l5.9904 5.9904h742.4l5.9904-5.9904a102.4 102.4 0 0 0 0-144.7936z m-23.7056 109.824H156.9792a61.8496 61.8496 0 0 1 5.12-80.896l304.896-304.9472a61.44 61.44 0 0 1 87.04 0l145.6128 145.6128 103.424 103.3728 8.4992 8.4992 24.3712 24.3712 22.8864 22.8864a61.7472 61.7472 0 0 1 5.12 80.896z" fill="\#692F76" ></path><path d="M876.544 456.192a61.0304 61.0304 0 0 1-12.6464 37.4272H156.9792a61.8496 61.8496 0 0 1 5.12-80.896l304.896-304.7424a61.44 61.44 0 0 1 87.04 0l145.6128 145.6128 103.424 103.3728 8.4992 8.4992 24.3712 24.3712 22.8864 22.8864a61.1328 61.1328 0 0 1 17.7152 43.4688z" fill="\#F6D95F" ></path><path d="M863.8976 478.2592H156.9792a60.5184 60.5184 0 0 1-12.0832-29.696 62.9248 62.9248 0 0 0-0.512 7.6288 60.9792 60.9792 0 0 0 12.5952 37.4272h706.9184a61.0304 61.0304 0 0 0 12.6464-37.4272 63.7952 63.7952 0 0 0-0.512-7.68 60.5696 60.5696 0 0 1-12.1344 29.7472z" fill="\#EAB943" ></path><path d="M162.2528 428.0832l304.7424-304.7424a61.44 61.44 0 0 1 87.04 0l145.6128 145.6128 103.424 103.3728 8.4992 8.4992 24.3712 24.3712 22.8864 22.8864a60.8768 60.8768 0 0 1 17.3568 35.84 63.0784 63.0784 0 0 0 0.512-7.68 61.1328 61.1328 0 0 0-17.8688-43.4688l-22.8864-22.8864-24.3712-24.3712-8.4992-8.4992-103.424-103.3728-145.7664-145.664a61.44 61.44 0 0 0-87.04 0L162.2528 412.7232a61.1328 61.1328 0 0 0-17.8688 43.4688 64.6144 64.6144 0 0 0 0.512 7.7312 60.8768 60.8768 0 0 1 17.3568-35.84z" fill="\#FFFFFF" ></path><path d="M583.2192 636.2624H437.7088a20.48 20.48 0 0 0-20.48 20.48v165.5296a20.48 20.48 0 0 0 20.48 20.48h145.5104a20.48 20.48 0 0 0 20.48-20.48v-165.5296a20.48 20.48 0 0 0-20.48-20.48z m0 186.0096H437.7088v-165.5296h145.5104z" fill="\#EA6381" ></path><path d="M583.2192 615.7824H437.7088a40.96 40.96 0 0 0-40.96 40.96v165.5296a40.96 40.96 0 0 0 40.96 40.96h145.5104a40.96 40.96 0 0 0 40.96-40.96v-165.5296a40.96 40.96 0 0 0-40.96-40.96zM437.7088 822.272v-165.5296h145.5104v165.5296z" fill="\#692F76" ></path><path d="M437.6576 656.7424h145.5104v165.5296H437.6576z" fill="\#EA6381" ></path><path d="M583.168 806.912H437.6576v15.36h145.5104l0.0512-165.5296-0.0512 150.1696z" fill="\#CC475F" ></path><path d="M390.7584 298.0864l105.1136-105.1648a20.48 20.48 0 0 1 29.184 0l105.1136 105.1648a20.48 20.48 0 0 1-14.592 35.1744H405.3504a20.48 20.48 0 0 1-14.592-35.1744z" fill="\#EB637C" ></path><path d="M437.7088 656.7424h145.5104v15.36H437.7088z" fill="\#F093AA" ></path><path d="M349.44 652.8h-87.552a25.6 25.6 0 0 1 0-51.2h87.552a25.6 25.6 0 0 1 0 51.2zM758.6304 652.8h-87.552a25.6 25.6 0 0 1 0-51.2h87.552a25.6 25.6 0 0 1 0 51.2z" fill="\#F3A175" ></path></symbol></svg>',l=(a=document.getElementsByTagName("script"))\[a.length-1\].getAttribute("data-injectcss");if(l&&!d.\_\_iconfont\_\_svg\_\_cssinject\_\_)\{d.\_\_iconfont\_\_svg\_\_cssinject\_\_=!0;try\{document.write("<style>.svgfont \{display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;\}</style>")\}catch(a)\{console&&console.log(a)\}\}!function(a)\{if(document.addEventListener)if(~\["complete","loaded","interactive"\].indexOf(document.readyState))setTimeout(a,0);else\{var l=function()\{document.removeEventListener("DOMContentLoaded",l,!1),a()\};document.addEventListener("DOMContentLoaded",l,!1)\}else document.attachEvent&&(t=a,c=d.document,i=!1,(p=function()\{try\{c.documentElement.doScroll("left")\}catch(a)\{return void setTimeout(p,50)\}h()\})(),c.onreadystatechange=function()\{"complete"==c.readyState&&(c.onreadystatechange=null,h())\});function h()\{i||(i=!0,t())\}var t,c,i,p\}(function()\{var a,l,h,t,c,i;(a=document.createElement("div")).innerHTML=p,p=null,(l=a.getElementsByTagName("svg")\[0\])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",h=l,(t=document.body).firstChild?(c=h,(i=t.firstChild).parentNode.insertBefore(c,i)):t.appendChild(h))\})\}(window);

**signup.css文件**

>  
> 
>  
> 
> /\*//  
> \[ FONT \]\*/
> 
> @font-face \{  
>   font-family: Poppins-Regular;  
>   src: url('../fonts/poppins/Poppins-Regular.ttf');  
> \}
> 
> @font-face \{  
>   font-family: Poppins-Medium;  
>   src: url('../fonts/poppins/Poppins-Medium.ttf');  
> \}
> 
> @font-face \{  
>   font-family: Poppins-Bold;  
>   src: url('../fonts/poppins/Poppins-Bold.ttf');  
> \}
> 
> @font-face \{  
>   font-family: Poppins-SemiBold;  
>   src: url('../fonts/poppins/Poppins-SemiBold.ttf');  
> \}
> 
>  
> 
>   
> /\*//  
> \[ RESTYLE TAG \]\*/
> 
> \* \{  
>     margin: 0px;  
>     padding: 0px;  
>     box-sizing: border-box;  
> \}
> 
> body, html \{  
>     height: 100%;  
>     font-family: Poppins-Regular, sans-serif;  
> \}
> 
> /\*-------------------------------------------\*/  
> a \{  
>     font-family: Poppins-Regular;  
>     font-size: 14px;  
>     line-height: 1.7;  
>     color: \#666666;  
>     margin: 0px;  
>     transition: all 0.4s;  
>     -webkit-transition: all 0.4s;  
>   -o-transition: all 0.4s;  
>   -moz-transition: all 0.4s;  
> \}
> 
> a:focus \{  
>     outline: none !important;  
> \}
> 
> a:hover \{  
>     text-decoration: none;  
>   color: \#6a7dfe;  
>   color: -webkit-linear-gradient(left, \#21d4fd, \#b721ff);  
>   color: -o-linear-gradient(left, \#21d4fd, \#b721ff);  
>   color: -moz-linear-gradient(left, \#21d4fd, \#b721ff);  
>   color: linear-gradient(left, \#21d4fd, \#b721ff);  
> \}
> 
> /\*---------------------------------------------\*/  
> h1,h2,h3,h4,h5,h6 \{  
>     margin: 0px;  
> \}
> 
> p \{  
>     font-family: Poppins-Regular;  
>     font-size: 14px;  
>     line-height: 1.7;  
>     color: \#666666;  
>     margin: 0px;  
> \}
> 
> ul, li \{  
>     margin: 0px;  
>     list-style-type: none;  
> \}
> 
>   
> /\*---------------------------------------------\*/  
> input \{  
>     outline: none;  
>     border: none;  
> \}
> 
> textarea \{  
>   outline: none;  
>   border: none;  
> \}
> 
> textarea:focus, input:focus \{  
>   border-color: transparent !important;  
> \}
> 
> input:focus::-webkit-input-placeholder \{ color:transparent; \}  
> input:focus:-moz-placeholder \{ color:transparent; \}  
> input:focus::-moz-placeholder \{ color:transparent; \}  
> input:focus:-ms-input-placeholder \{ color:transparent; \}
> 
> textarea:focus::-webkit-input-placeholder \{ color:transparent; \}  
> textarea:focus:-moz-placeholder \{ color:transparent; \}  
> textarea:focus::-moz-placeholder \{ color:transparent; \}  
> textarea:focus:-ms-input-placeholder \{ color:transparent; \}
> 
> input::-webkit-input-placeholder \{ color: \#adadad;\}  
> input:-moz-placeholder \{ color: \#adadad;\}  
> input::-moz-placeholder \{ color: \#adadad;\}  
> input:-ms-input-placeholder \{ color: \#adadad;\}
> 
> textarea::-webkit-input-placeholder \{ color: \#adadad;\}  
> textarea:-moz-placeholder \{ color: \#adadad;\}  
> textarea::-moz-placeholder \{ color: \#adadad;\}  
> textarea:-ms-input-placeholder \{ color: \#adadad;\}
> 
> /\*---------------------------------------------\*/  
> button \{  
>     outline: none !important;  
>     border: none;  
>     background: transparent;  
> \}
> 
> button:hover \{  
>     cursor: pointer;  
> \}
> 
> iframe \{  
>     border: none !important;  
> \}
> 
>   
> /\*//  
> \[ Utility \]\*/  
> .txt1 \{  
>   font-family: Poppins-Regular;  
>   font-size: 13px;  
>   color: \#666666;  
>   line-height: 1.5;  
> \}
> 
> .txt2 \{  
>   font-family: Poppins-Regular;  
>   font-size: 13px;  
>   color: \#333333;  
>   line-height: 1.5;  
> \}
> 
> /\*//  
> \[ login \]\*/
> 
> .limiter \{  
>   width: 100%;  
>   margin: 0 auto;  
> \}
> 
> .container-login100 \{  
>   width: 100%;    
>   min-height: 100vh;  
>   display: -webkit-box;  
>   display: -webkit-flex;  
>   display: -moz-box;  
>   display: -ms-flexbox;  
>   display: flex;  
>   flex-wrap: wrap;  
>   justify-content: center;  
>   align-items: center;  
>   padding: 15px;  
>   background: \#f2f2f2;    
> \}
> 
> .wrap-login100 \{  
>   width: 390px;  
>   background: \#fff;  
>   border-radius: 10px;  
>   overflow: hidden;  
>   padding: 77px 55px 33px 55px;
> 
>   box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);  
>   -moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);  
>   -webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);  
>   -o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);  
>   -ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);  
> \}
> 
>   
> /\*------------------------------------------------------------------  
> \[ Form \]\*/
> 
> .login100-form \{  
>   width: 100%;  
> \}
> 
> .login100-form-title \{  
>   display: block;  
>   font-family: Poppins-Bold;  
>   font-size: 30px;  
>   color: \#333333;  
>   line-height: 1.2;  
>   text-align: center;  
> \}  
> .login100-form-title i \{  
>   font-size: 60px;  
> \}
> 
> /\*------------------------------------------------------------------  
> \[ Input \]\*/
> 
> .wrap-input100 \{  
>   width: 100%;  
>   position: relative;  
>   border-bottom: 2px solid \#adadad;  
>   margin-bottom: 37px;  
> \}
> 
> .input100 \{  
>   font-family: Poppins-Regular;  
>   font-size: 15px;  
>   color: \#555555;  
>   line-height: 1.2;
> 
>   display: block;  
>   width: 100%;  
>   height: 45px;  
>   background: transparent;  
>   padding: 0 5px;  
> \}
> 
> /\*---------------------------------------------\*/  
> .focus-input100 \{  
>   position: absolute;  
>   display: block;  
>   width: 100%;  
>   height: 100%;  
>   top: 0;  
>   left: 0;  
>   pointer-events: none;  
> \}
> 
> .focus-input100::before \{  
>   content: "";  
>   display: block;  
>   position: absolute;  
>   bottom: -2px;  
>   left: 0;  
>   width: 0;  
>   height: 2px;
> 
>   -webkit-transition: all 0.4s;  
>   -o-transition: all 0.4s;  
>   -moz-transition: all 0.4s;  
>   transition: all 0.4s;
> 
>   background: \#6a7dfe;  
>   background: -webkit-linear-gradient(left, \#21d4fd, \#b721ff);  
>   background: -o-linear-gradient(left, \#21d4fd, \#b721ff);  
>   background: -moz-linear-gradient(left, \#21d4fd, \#b721ff);  
>   background: linear-gradient(left, \#21d4fd, \#b721ff);  
> \}
> 
> .focus-input100::after \{  
>   font-family: Poppins-Regular;  
>   font-size: 15px;  
>   color: \#999999;  
>   line-height: 1.2;
> 
>   content: attr(data-placeholder);  
>   display: block;  
>   width: 100%;  
>   position: absolute;  
>   top: 16px;  
>   left: 0px;  
>   padding-left: 5px;
> 
>   -webkit-transition: all 0.4s;  
>   -o-transition: all 0.4s;  
>   -moz-transition: all 0.4s;  
>   transition: all 0.4s;  
> \}
> 
> .input100:focus + .focus-input100::after \{  
>   top: -15px;  
> \}
> 
> .input100:focus + .focus-input100::before \{  
>   width: 100%;  
> \}
> 
> .has-val.input100 + .focus-input100::after \{  
>   top: -15px;  
> \}
> 
> .has-val.input100 + .focus-input100::before \{  
>   width: 100%;  
> \}
> 
> /\*---------------------------------------------\*/  
> .btn-show-pass \{  
>   font-size: 15px;  
>   color: \#999999;
> 
>   display: -webkit-box;  
>   display: -webkit-flex;  
>   display: -moz-box;  
>   display: -ms-flexbox;  
>   display: flex;  
>   align-items: center;  
>   position: absolute;  
>   height: 100%;  
>   top: 0;  
>   right: 0;  
>   padding-right: 5px;  
>   cursor: pointer;  
>   -webkit-transition: all 0.4s;  
>   -o-transition: all 0.4s;  
>   -moz-transition: all 0.4s;  
>   transition: all 0.4s;  
> \}
> 
> .btn-show-pass:hover \{  
>   color: \#6a7dfe;  
>   color: -webkit-linear-gradient(left, \#21d4fd, \#b721ff);  
>   color: -o-linear-gradient(left, \#21d4fd, \#b721ff);  
>   color: -moz-linear-gradient(left, \#21d4fd, \#b721ff);  
>   color: linear-gradient(left, \#21d4fd, \#b721ff);  
> \}
> 
> .btn-show-pass.active \{  
>   color: \#6a7dfe;  
>   color: -webkit-linear-gradient(left, \#21d4fd, \#b721ff);  
>   color: -o-linear-gradient(left, \#21d4fd, \#b721ff);  
>   color: -moz-linear-gradient(left, \#21d4fd, \#b721ff);  
>   color: linear-gradient(left, \#21d4fd, \#b721ff);  
> \}
> 
>  
> 
> /\*------------------------------------------------------------------  
> \[ Button \]\*/  
> .container-login100-form-btn \{  
>   display: -webkit-box;  
>   display: -webkit-flex;  
>   display: -moz-box;  
>   display: -ms-flexbox;  
>   display: flex;  
>   flex-wrap: wrap;  
>   justify-content: center;  
>   padding-top: 13px;  
> \}
> 
> .wrap-login100-form-btn \{  
>   width: 100%;  
>   display: block;  
>   position: relative;  
>   z-index: 1;  
>   border-radius: 25px;  
>   overflow: hidden;  
>   margin: 0 auto;  
> \}
> 
> .login100-form-bgbtn \{  
>   position: absolute;  
>   z-index: -1;  
>   width: 300%;  
>   height: 100%;  
>   background: \#a64bf4;  
>   background: -webkit-linear-gradient(right, \#21d4fd, \#b721ff, \#21d4fd, \#b721ff);  
>   background: -o-linear-gradient(right, \#21d4fd, \#b721ff, \#21d4fd, \#b721ff);  
>   background: -moz-linear-gradient(right, \#21d4fd, \#b721ff, \#21d4fd, \#b721ff);  
>   background: linear-gradient(right, \#21d4fd, \#b721ff, \#21d4fd, \#b721ff);  
>   top: 0;  
>   left: -100%;
> 
>   -webkit-transition: all 0.4s;  
>   -o-transition: all 0.4s;  
>   -moz-transition: all 0.4s;  
>   transition: all 0.4s;  
> \}
> 
> .login100-form-btn \{  
>   font-family: Poppins-Medium;  
>   font-size: 15px;  
>   color: \#fff;  
>   line-height: 1.2;  
>   text-transform: uppercase;
> 
>   display: -webkit-box;  
>   display: -webkit-flex;  
>   display: -moz-box;  
>   display: -ms-flexbox;  
>   display: flex;  
>   justify-content: center;  
>   align-items: center;  
>   padding: 0 20px;  
>   width: 100%;  
>   height: 50px;  
> \}
> 
> .wrap-login100-form-btn:hover .login100-form-bgbtn \{  
>   left: 0;  
> \}
> 
>   
> /\*------------------------------------------------------------------  
> \[ Responsive \]\*/
> 
> @media (max-width: 576px) \{  
>   .wrap-login100 \{  
>     padding: 77px 15px 33px 15px;  
>   \}  
> \}
> 
>  
> 
> /\*------------------------------------------------------------------  
> \[ Alert validate \]\*/
> 
> .validate-input \{  
>   position: relative;  
> \}
> 
> .alert-validate::before \{  
>   content: attr(data-validate);  
>   position: absolute;  
>   max-width: 70%;  
>   background-color: \#fff;  
>   border: 1px solid \#c80000;  
>   border-radius: 2px;  
>   padding: 4px 25px 4px 10px;  
>   top: 50%;  
>   -webkit-transform: translateY(-50%);  
>   -moz-transform: translateY(-50%);  
>   -ms-transform: translateY(-50%);  
>   -o-transform: translateY(-50%);  
>   transform: translateY(-50%);  
>   right: 0px;  
>   pointer-events: none;
> 
>   font-family: Poppins-Regular;  
>   color: \#c80000;  
>   font-size: 13px;  
>   line-height: 1.4;  
>   text-align: left;
> 
>   visibility: hidden;  
>   opacity: 0;
> 
>   -webkit-transition: opacity 0.4s;  
>   -o-transition: opacity 0.4s;  
>   -moz-transition: opacity 0.4s;  
>   transition: opacity 0.4s;  
> \}
> 
> .alert-validate::after \{  
>   content: "\\f06a";  
>   font-family: FontAwesome;  
>   font-size: 16px;  
>   color: \#c80000;
> 
>   display: block;  
>   position: absolute;  
>   background-color: \#fff;  
>   top: 50%;  
>   -webkit-transform: translateY(-50%);  
>   -moz-transform: translateY(-50%);  
>   -ms-transform: translateY(-50%);  
>   -o-transform: translateY(-50%);  
>   transform: translateY(-50%);  
>   right: 5px;  
> \}
> 
> .alert-validate:hover:before \{  
>   visibility: visible;  
>   opacity: 1;  
> \}
> 
> @media (max-width: 992px) \{  
>   .alert-validate::before \{  
>     visibility: visible;  
>     opacity: 1;  
>   \}  
> \}
> 
>

代码全部放上来太长了，注册页面也差不多，需要的点赞加关注，然后私聊我，我发你。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E2NjY2Nl8_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200207124509661.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E2NjY2Nl8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E2NjY2Nl8_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200207124526157.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E2NjY2Nl8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E2NjY2Nl8_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200207124535647.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E2NjY2Nl8=,size_16,color_FFFFFF,t_70