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

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

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

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

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

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

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

首先放的是登陆页面的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>
                    
                    <!--bootstrap用-->
                    <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;
  }
}

代码全部放上来太长了,注册页面也差不多,需要全部源码的评论留言邮箱,我发你,给个赞再走,么么哒

发布了70 篇原创文章 · 获赞 25 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/a66666_/article/details/104208599