Browse Source

登录注册新版及改技淘币

liting2017 6 years ago
parent
commit
3a0294c8fc

BIN
img/bottom_bg22.png


BIN
img/dianhua1.png


BIN
img/dizhi1.png


BIN
img/indedImg/zhuce_xieyiCancel.png


BIN
img/indedImg/zhuce_ok.png


BIN
img/load/invR_11.png


BIN
img/load/invR_22.png


BIN
img/load/invR_44.png


BIN
img/load/invR_banner.png


+ 13 - 8
src/css/newMenu/landingPage/Invitation.css

@@ -6,10 +6,10 @@
     width:100%;
 }
 .activeRule{
-    padding: 84px 45px;
+    padding: 30px 45px;
 }
 .activeRule h3,.rule h3{
-    font-size: 32px;
+    font-size: 24px;
     border-bottom: 1px solid #bfbfbf;
     color: #333;
     font-weight: normal;
@@ -24,8 +24,8 @@
     margin-bottom: 20px;
 }
 .activeRule p{
-    margin-top: 20px;
-    font-size: 21px;
+    margin-top: 10px;
+    font-size:16px;
     color: #333;
     padding-left:35px;
 }
@@ -33,17 +33,22 @@
     margin-top: 52px
 }
 .rule h3{
-    margin-bottom: 30px;
+    margin-bottom: 20px;
 }
 .rule{
-    padding: 0 45px;
+    padding: 25px 45px;
 }
 .rule p{
     text-align: justify;
-    padding: 13px 30px;
-    font-size: 21px;
+    padding: 7px 30px;
+    font-size: 16px;
     color: #333;
 }
+.rule h3 span{
+    font-size: 14px;
+    display: inline-block;
+    margin-left: 15px;
+}
 .ruleBottom{
     text-align: center;
     margin-top: 100px;

+ 11 - 1
src/css/newMenu/landingPage/invRegister.css

@@ -44,6 +44,16 @@ body{
     padding-left: 70px;
     padding-top: 36px;
 }
+.topList>a{
+    float:right;
+    color: #fff;
+    font-size: 20px;
+    margin-top: 20px;
+    display: inline-block;
+}
+.topList>a:hover{
+    color: #69a7f0;
+}
 .topList ul li:nth-child(1){
     background: url(../../../../img/load/invR_11.png) no-repeat;
     background-size:100% 100%; 
@@ -53,7 +63,7 @@ body{
     background-size:100% 100%; 
 }
 .topList ul li:nth-child(3){
-    background: url(../../../../img/load/invR_33.png) no-repeat;
+    background: url(../../../../img/load/invR_44.png) no-repeat;
     background-size:100% 100%; 
 }
 .topList ul li:nth-child(4){

+ 82 - 40
src/css/register.css

@@ -1,12 +1,21 @@
-
+a,a:focus.a:hover{
+    outline: none;
+    text-decoration: none
+}
 /*registered页面container的css*/
 .registered{width:100%;height:800px;
     background: linear-gradient(to right, #fc9950 50%,#ff633e);
-    margin-top: 65px;
    
 }
-.topNavBj .topHeader{
-    border-bottom:5px solid #2C6698
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+    -webkit-transition-delay: 9999s;
+    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
+}
+a:focus,a,a:hover {
+	text-decoration: none;
 }
 .reg_con{width:1200px;height:770px;margin:0 auto;
     /* background-image:url(../../img/zhucebg5.jpg) ;*/
@@ -17,8 +26,8 @@
 .title{width:100%;height:50px;font-size: 2rem;color:#5C5C5D;
 line-height:50px;padding-left:50px;}
 .shadow{width:775px;height:25px;margin:0 auto;margin-top:-3px;}
-.regist{width:450px;height:100%;padding:0 35px;
-    position: absolute;top:0px;right:0;background: #fff; box-shadow: 0 0 30px #333;}
+.regist{width:450px;height:100%;padding:0 35px;box-sizing: border-box;margin-right: 50px;
+    position: absolute;top:0px;right:0;background: #fff; box-shadow: 0 0 10px rgb(90, 90, 90);}
 .zhuce_input{width:95%;height:50px;position: relative;
 margin-bottom:10px;line-height:50px;background: #eeeeee}
 .zhuce_input>select{border:none;width:200px;height:36px;color:#707070; background: transparent;
@@ -37,8 +46,8 @@ margin-bottom:10px;line-height:50px;background: #eeeeee}
     line-height: 38px;display:inline-block;margin-right:10px;}
 input{padding-left:10px;}
 .cellcode>a{color:#F18101;}
-#photo{width: 100px;;color:#ccc;display: inline-block;padding-left: 0;background: none;text-align: center;border:none}
-#photo_num{width: 240px;display: inline-block;color:#ccc;height: 38px;line-height: 38px;border: none}
+#photo{position: absolute;right:30px;top:0;width: 100px;;color:#ccc;display: inline-block;padding-left: 0;background: none;text-align: center;border:none}
+#photo_num{position: absolute;left: 60px;top:0;width:170px;display: inline-block;color:#383838;height: 50px;line-height: 50px;border: none}
 .leibie{width:120px;height:30px;display:inline-block;color:#F18101;font-size: 1.4rem;
     line-height: 28px;font-weight: bold;padding-left: 20px;position: relative;}
 .leibie input{display:inline-block;width:15px;height:15px;margin-right: 5px;position: absolute;
@@ -53,10 +62,10 @@ input{padding-left:10px;}
 #business,#linkman,#man{width:250px;}
 .submit{width:100%;height:50px;
     margin-bottom:10px;line-height:50px;}
-.submit>input{cursor: pointer;border:none;width:100%;height:100%;background-color: #fe6e42;color:#fff;
+.submit>input{cursor: pointer;border:none;width:100%;height:100%;background-color: #fe6e42!important;color:#fff;
 font-size: 18px;font-weight: bold;letter-spacing:10px;}
 .protocol{width:255px;height:30px;line-height: 20px;}
-.protocol a{color:#aee1fc;font-weight: 400;}
+.protocol a{color:#4dbcf8;font-weight: 400;display: inline-block;margin-left: 10px;}
 #protocol{visibility: hidden;}
 .picture{width:680px;height:535px;
     display: inline-block;position: absolute;top:0px;left:0px;background: url(../../img/indedImg/zhuce_bj.png)no-repeat;
@@ -87,7 +96,7 @@ padding: 20px 50px;overflow-y: auto;box-shadow: 0 4px 10px 0 #777;}
     margin-right: -20px;
 }
 .zhuce_input input{
-    width: 350px;
+    width: 280px;
    height: 50px;
    line-height: 50px;
    background: transparent;
@@ -101,36 +110,14 @@ padding: 20px 50px;overflow-y: auto;box-shadow: 0 4px 10px 0 #777;}
     margin-top: 14px;
     margin-right: 12px;
 }
-/*登陆页面*/
-.login{width: 100%;background: rgba(6,6,6,.4);position: fixed;top: 0;left: 0;z-index: 999;}
-.login_mian{width: 600px;background: #ffffff;position: absolute;top: 50%;margin-top: -200px;left: 50%;margin-left: -300px;padding-left: 60px;padding-top: 60px;padding-bottom: 96px;}
-.login_left{float: left;padding-bottom: 10px;width: 220px;}
-.login_left .login_ewm{width: 95px;padding-top: 34px;margin-bottom: 10px;display: inline-block;text-align: center;}
-.login_left .login_ewm img{margin-bottom: 10px;width:90px;}
-.login_left p{line-height: 26px;font-size: 16px;width: 95px;text-align: center;}
-.login_right{float: left;padding-left: 32px;width:288px;border-left:1px solid #E5E5E5;}
-.login_right h5{font-size: 18px;color: #373739;font-weight: normal;}
-.login_right h5 a{font-size: 14px;color: #f81009;margin-left: 62px;}
-.login_right form .login_uesr,.login_pass{width: 256px;height: 40px;position: relative;border: 1px solid #cccccc;}
-.login_uesr label img,.login_pass label img{width: 20px;height: 22px;position: absolute;top: 8px;left:10px;border: none;}
+/* //登陆页面 */
+
 .zhuce_input .log_del{width: 16px ;height: 16px;position: absolute; top: 10px;right: 10px;}
 .log_del:hover{cursor: pointer;}
 .login_uesr{margin-bottom: 20px;}
-.cheackeds{background:url(../../img/check_lo.png) no-repeat center left}
-.cheackeds_no{background:url(../../img/check_lono.png) no-repeat center left}
+.cheackeds{background:url(../../img/indedImg/zhuce_xieyiOk.png) no-repeat center left}
+.cheackeds_no{background:url(../../img/indedImg/zhuce_xieyiCancel.png) no-repeat center left}
 
-.login_{display: none;}
-.login_check u{float: right;line-height: 38px;}
-.login_check u a{color: #f18101;}
-.login_check label{height: 38px;line-height: 38px ;color: #f18101;font-weight: normal;}
-.lab_check{background: url(../../img/check_lo.png) no-repeat center left;/*background-size:34% 40%;*/}
-.lab_checkno{background: url(../../img/check_lono.png) no-repeat center left;/*background-size:34% 40%;*/}
-.login_check label input{margin-right: 4px; visibility: hidden;}
-.login_check label:hover{cursor: pointer;}
-.login_submit{width: 100%;height: 38px;font-size: 20px;background: #f18101;color: #FFFFFF;text-align: center;border: none;}
-.login_hua {position: absolute;top: 0;right: 0;}
-.login_close:hover{cursor: pointer;}
-.login_check label:first-child{margin-right: 15px;}
 .head_login:focus{text-decoration: none;}
 /*底部定制*/
 #bottom{background:#fff;margin-top:-150px;background: url(../../img/bottom_bg.png) no-repeat center center;
@@ -172,6 +159,61 @@ padding: 20px 50px;overflow-y: auto;box-shadow: 0 4px 10px 0 #777;}
     color: #2ca7f3;
 
 }
-
-
-
+.Tips{
+    position: absolute;
+    padding: 0 20px;
+    top: -30px;
+    right: 30px;
+    height: 40px;
+    line-height: 40px;
+    font-size: 14px;
+    color: rgb(241, 52, 61);
+    border-radius: 5px;
+    background: rgba(255,255,255,.9);
+    color: rgb(248, 78, 78);
+    z-index: 111;
+    box-shadow: 0 0 10px #ccc;
+    display: none;
+}
+.Tips.active{
+    display: block;
+}
+.Tips::before{
+    content: '';
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    background: rgba(255,255,255,.9);
+    position: absolute;
+    top: 35px;
+    left: 70px;
+    transform: rotate(45deg); 
+    z-index: 110;
+}   
+#bottom{
+    width: 100%;
+    
+    background: url(../../img/bottom_bg22.png) no-repeat center center;
+    background-size:120% 100% ; 
+    
+}
+.text_center p,.text_top,.text_bottom,.text_bottom a{
+    color: #383838
+}
+.text_bottom a:hover{
+    color: #2ca7f3;
+}
+.cont_left img{
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    background: url(../../img/dizhi1.png)no-repeat;
+    background-size:100% 100%; 
+}
+.cont_center img{
+    width: 50px;
+    height: 50px;
+    display: inline-block;
+    background: url(../../img/dianhua1.png)no-repeat;
+    background-size:100% 100%; 
+}

+ 1 - 1
src/js/facilitator/facilitator.js

@@ -98,7 +98,7 @@ $(function(){
                      htmls+=`
                      <li>
                          <div>
-                             <p><span>¥</span>${item.money}</p>
+                             <p>${item.money} <span>枚</span></p>
                              <div class="listTxt">
                                 ${!item.isGet?'<a href="javascript:;">立即领劵</a>':'<span class="get">已领取</span>'} 
                                  <input type='hidden' value="${item.id}">

+ 10 - 1
src/js/public.js

@@ -70,7 +70,16 @@ window.onload=function(){
 		if(urlHref.indexOf('signIn')>-1){
 			$('.login').fadeOut(800)
 			$('#form_register').fadeIn(800)
-			window.location.reload();
+			$('.zhuce_input input').val('');
+			$('#protocol').prop('checked', false)
+            $('#protocol').parent().addClass('cheackeds_no').removeClass('cheackeds');
+            $('.sub').attr('disabled', true);
+            $('.sub').css({
+                background: '#CCCCCC',
+                border: 'none'
+			});
+			$('.Tips').removeClass('active');
+			$('#photo').val('获取验证码')
 		}else{
 			$('.login').fadeOut(800)
 			$('#form_register').fadeIn(800)

+ 63 - 57
src/js/register.js

@@ -46,103 +46,96 @@ $(function () {
     let oldPhoto='';
     $('#photo').attr('disabled', true);
     function photo1() {
-        var pho_pattern = /^1[3|4|5|7|8][0-9]{9}$/;
+        var pho_pattern = /^1[2|3|4|5|6|7|8|9][0-9]{9}$/;
         $("#usePhoto").keyup(function () {
             oldPhoto = $(this).val();
             if (pho_pattern.test(oldPhoto)) {
+                tipFun.call(this,false,'')
                 $('#photo').attr('disabled', false);
                 $("#photo").css("color", "#F18101");
-            } else if (!pho_pattern.test(oldPhoto)) {
+            } else  {
+                tipFun.call(this,true,'请填写正确的手机号码')
                 $('#photo').attr('disabled', true);
                 $("#photo").css("color", "#ccc");
             }
         });
+        $("#usePhoto").blur(function(){
+            if (pho_pattern.test(oldPhoto)) {
+                tipFun.call(this,false,'')
+            } else  {
+                tipFun.call(this,true,'请填写正确的手机号码')
+            }
+        })
     }
     photo1();
     //手机验证码
     function photo_num() {
         $('#photo_num').blur(function () {
-            var phoa = $(this).val();
+            var phoa = $(this).val().trim();
             if (phoa == '') {
-                $(this).val('验证码不能为空').css({color:'#f00'});
+                tipFun.call(this,true,'验证码不能为空')
+            }else{
+                tipFun.call(this,false,'')
             }
         })
     }
     photo_num();
-    /* 获得焦点处理 */
-    $('#username,#customerName,#usePhoto').focus(function(){
-        let val = $(this).val();
-        if(val.indexOf('用户名')>-1||val.indexOf('下划线')>-1||val.indexOf('客户')>-1||val.indexOf('手机')>-1){
-            $(this).val('').css({color:'#333'})
-        }
-    })
-
-    $('#photo_num').focus(function(){
-        if(($(this).val()).indexOf('验证码')>-1){
-            $(this).val('')
-        }
-        $(this).css({color:'#333'})
-    })
-    $('#userpassword,#userpassword2').focus(function(){
-        let passVal =$(this).val();
-        if(passVal.indexOf('密码')>-1){
-            $(this).attr('type','password').val('').css({color:'#333'})
-        }
-    })
     /*失去焦点处理 */
     blurFun();
+    /* 提示框函数处理 */
+    function tipFun(state,txt){
+        let _this=this;
+        if(state){
+            $(_this).siblings('.Tips').text(txt);
+            $(_this).siblings('.Tips').addClass('active')
+        }else{
+            $(_this).siblings('.Tips').text('');
+            $(_this).siblings('.Tips').removeClass('active')
+        }
+    }
     function blurFun(){
+        
         $('#username').blur(function(){
             let nameRax  =  /^[a-zA-Z0-9_-]{6,32}$/;
-//          if(!$(this).val().trim()){
-//              $(this).val('请填写用户名').css({color:'#f00'})
-//          }else if(!nameRax.test($(this).val())){
-//              $(this).val('1-32位字母/数字/汉字').css({color:'#f00'})
-//          }
+            if(!$(this).val().trim()){
+                tipFun.call(this,true,'请填写用户名')
+            }else if(!nameRax.test($(this).val())){
+                tipFun.call(this,true,'请输入6-32位字母、数字、下划线')
+            }else{
+                tipFun.call(this,false,'')
+            }
         })
         $('#userpassword').blur(function () {
             var pass_pattern = /^[a-zA-Z\d_]{6,12}$/;
             var pass1 = $(this).val().trim();
             var tt = $('#userpassword2').val().trim();
             if (!pass1|| !pass_pattern.test(pass1)) {
-               $(this).attr('type',"text")
-              // $(this).val('请输入6-12位数字母开头密码').css({color:'#f00'});
-                return;
+                tipFun.call(this,true,'请输入6-12位数字母开头密码')
+            }else if(tt&&(pass1===tt)){
+                tipFun.call($('#userpassword2'),false,'');
             }else{
-                $(this).attr('type','password');   
-            };
-            if (pass1 && tt !== pass1) {
-                $('#userpassword2').attr('type',"text")
-                $('#userpassword2').val('两次密码不一致').css({color:'#f00'});
-                return;
-            };
-        });
-        $('#customerName').blur(function(){
-            if(!$(this).val().trim()){
-                $(this).val('请填写客户名称').css({color:'#f00'})
+                tipFun.call($('#userpassword2'),true,'两次密码不一致');
             }
         });
-        $('#usePhoto').blur(function(){
+        $('#customerName').blur(function(){
             if(!$(this).val().trim()){
-                $(this).val('请填写手机号码').css({color:'#f00'})
+                tipFun.call(this,true,'请填写客户名称')
+            }else{
+                tipFun.call(this,false,'')
             }
         });
+       
         $('#userpassword2').blur(function () {
             var orepeat = $(this).val();
             var passw = $('#userpassword').val();
             if (passw !== orepeat || passw == '') {
-                $(this).attr('type','text')
-                $(this).val('两次密码不一致').css({color:'#f00'})
+                tipFun.call(this,true,'两次密码不一致')
+            }else{
+                tipFun.call(this,false,'')
             }
         });
     }
     function initVal(){
-        $('#userpassword2').val('确认密码');
-        $('#userpassword1').val('请输入密码');
-        $('#username').val('请输入用户名');
-        $('#customerName').val('请输入客户名称');
-        $('#usePhoto').val('请输入手机号码');
-        $('#photo_num').val('手机验证码');
         $('#protocol').prop("checked", false)
         $(this).prop('checked', false)
         $(this).parent().addClass('cheackeds_no').removeClass('cheackeds');
@@ -166,12 +159,19 @@ $(function () {
             customerType = $('#customerTypes').val(),
             mobileCode = $('#photo_num').val(),//手机验证码
             codeV = $('#beInviteCode').val();
-        if(user.indexOf('用户名')>-1||password1.indexOf('密码')>-1||password2.indexOf('密码')>-1||usePhoto.indexOf('手机')>-1||mobileCode.indexOf('验证码')>-1){
-            msg('请填写必填项');
+            if(password1!==password2){
+                tipFun.call($('#userpassword2'),true,'两次密码不一致');
+                return;
+            };
+            if(!user&&!usePhoto&&!password1&&!mobileCode){
+                $('.Tips').text('请输入内容.');
+                $('.Tips').addClass('active');
+                return ;
+            }
+        if($('.Tips.active').length){
             return;
         } else {
-            //$('.loading').show().css({'opacity':'0'}).find('p').html('');
-            $('.loading').show()
+            $('.loading').show();
             $.ajax({
                 type: "POST",
                 dataType: "json",
@@ -265,4 +265,10 @@ $(function () {
             $('#msg').val('');
         }, 2000)
     }
+    //底部图片处理
+    footerImg()
+    function footerImg(){
+        $('.cont_left img').attr('src','');
+        $('.cont_center img').attr('src','');
+    }
 });

+ 14 - 6
template/register.html

@@ -49,28 +49,34 @@
 					</div>
 					<div class="zhuce_input">
 						<img src="../img/indedImg/enroll3.png" alt=""/>
-						<input type="text" name="photo" value="请输入手机号码" id="usePhoto" autocomplete="off"/>
+						<input type="text" name="photo" placeholder="请输入手机号码" id="usePhoto" autocomplete="off"/>
 						<span class="star"> * </span>
+						<span class="Tips active"></span>
 					</div>
 					<div class="zhuce_input">
 						<img src="../img/indedImg/enroll4.png" alt=""/>
-						<input type="text" name="cellCode" value="手机验证码" id="photo_num" autocomplete="off" />
-						<span id="photo"/>获取验证码</span>
+						<input type="text" name="cellCode" placeholder="手机验证码" id="photo_num" autocomplete="off" />
+						<input type="button" id="photo" value="获取验证码" disabled="disabled"/>
+						<span class="star"> * </span>
+						<span class="Tips"></span>
 					</div>
 					<div class="zhuce_input">
 						<img src="../img/indedImg/enroll6.png" alt=""/>
-						<input type="text" name="userPassword" value="请输入密码" id="userpassword" autocomplete="off"/>
+						<input type="text" name="userPassword" placeholder="请输入密码" id="userpassword" autocomplete="off"/>
 						<span class="star"> * </span>
+						<span class="Tips"></span>
 					</div>
 					<div class="zhuce_input">
 						<img src="../img/indedImg/enroll6.png" alt=""/>
-						<input type="text" name="userPassword2" value="确认密码" id="userpassword2" autocomplete="off"/>
+						<input type="text" name="userPassword2" placeholder="确认密码" id="userpassword2" autocomplete="off"/>
 						<span class="star"> * </span>
+						<span class="Tips"></span>
 					</div>
 					<div class="zhuce_input">
 						<img src="../img/indedImg/enroll3.png" alt=""/>
-						<input type="text" name="userName" value="请输入用户名"  id="username" autocomplete="off"/>
+						<input type="text" name="userName" placeholder="请输入用户名"  id="username" autocomplete="off"/>
 						<span class="star"> * </span>
+						<span class="Tips"></span>
 					</div>
 					<div class="zhuce_input">
 						<img src="../img/indedImg/enroll9.png" alt=""/>
@@ -106,10 +112,12 @@
 			<div class="text_center">
 				<div class="cont_left">
 					<img src="../img/dizhi.jpg" alt=""/>
+					<img src="../img/dizhi1.png" alt=""/>
 					<p>湖南省长沙市营盘东路19号金山大厦</p>
 				</div>
 				<div class="cont_center">
 					<img src="../img/dianhua.jpg" alt=""/>
+					<img src="../img/dianhua1.png" alt=""/>
 					<p>合作电话:0731-89907207</p>
 					<p>400-8800-962八楼</p>
 				</div>