<!-- <link rel="stylesheet" href="/js/signup/m_xqdz.css"> --> <style> .max_box{max-width:640px;margin:auto;min-width:320px;position: relative;} .max_box img{display:block;} .demand_box{width:100%;position:fixed;top:0;background:#F7F7F7;} .demand_box_gb{position:absolute;top:0;right:0;width:40px;height:40px;display: block;} .demand{width:90%;height:100%;margin:auto;position:relative;overflow:hidden;} .demand_title{font-size:1.5rem;color:#333;text-align:center;margin-top:15%} /*价格*/ .Price{margin-top:15%;} .Pricexyb{width:60%;height:40px;font-size:1rem;color:#FFF;background:#FC5C2B;border-radius:40px;position:absolute;bottom:12%;left:50%;margin-left:-30%;text-align:center;line-height:40px;} /*户型*/ #Huxing_list{border:1px solid #FC5C2B;color:#FC5C2B;} .Huxing{margin-top:15%;} .Huxing .Huxing_list{border:1px solid #eae7e7;float:left;border-radius:20px;width:44%;height:40px;text-align:center;line-height:40px;margin-right:12%;margin-bottom:8%;background:#FFF;font-size:1rem;color:#3A3A3A;position:relative;} .Huxing .Huxing_list:nth-child(2n){margin-right:0;} .Huxing_list img{width:17px;height:17px;position:absolute;top:-8px;right:0;} .Huxing_list_i{width:17px;height:17px;position:absolute;top:-8px;right:0;background:url(/image/xqdz1.png) no-repeat 0 0/ 100% 100%;} .NextStep{width:60%;height:40px;font-size:1rem;color:#FFF;background:#C5C5C5;border-radius:40px;position:absolute;bottom:12%;left:50%;margin-left:-30%;text-align:center;line-height:40px;} #NextStepcolor{background:#FC5C2B;} /*区域*/ .Determine{width:60%;height:40px;font-size:1rem;color:#FFF;background:#C5C5C5;border-radius:40px;position:absolute;bottom:12%;left:50%;margin-left:-30%;text-align:center;line-height:40px;} #Detecolor{background:#FC5C2B;} .region_box{width:100%;height:62%;margin-top:10%;position:relative;overflow:hidden;} .region{width:40%;height:100%;position:absolute;top:0;left:50%;margin-left:-20%;max-height:100%;overflow:auto;transition: all .4s;} /*13%*/ .region li{transition: all .4s;height:60px;text-align:center;line-height:60px;font-size:1.1rem;color:#333;position:relative;} .region li i{width:7px;height:7px;border-radius:20px;background:none;position:absolute;top:41%;left:26%;float:left;display:block;} #regionlii{background:#FC5C2B;} #region{height:38px;line-height:38px;transition: all .4s;} .regionli{background:#FFF;} #m_regionYd{left:13%;transition: all .4s;} #opacity{opacity:0.1} .region_City{width:67%;height:100%;position:absolute;top:0;right:0;background:#FFF;max-height:100%;overflow:auto;display: none;} .region_City li{height:45px;line-height:45px;font-size:1rem;color:#333;} .region_City li span{margin-left:30px;float:left;} .region_City li img{float:right;width:17px;height:17px;margin:13px 9px 0 0;} .i_bright{float:right;width:17px;height:17px;margin:13px 9px 0 0;background:url(/image/xqdz1.png) no-repeat 0 0/ 100% 100%;} .i_dark{float:right;width:17px;height:17px;margin:13px 9px 0 0;background:url(/image/xqdz2.png) no-repeat 0 0/ 100% 100%;} .remind{position:absolute;top:50%;left:50%;margin-top:-17.5px;margin-left:-55px;background:rgba(31, 30, 30, 0.83);border-radius:5px;width:110px;height:35px;text-align:center;line-height:35px;font-size:0.95rem;color:#FFF;display:none;} .HxRemind{position:absolute;top:50%;left:50%;margin-top:-17.5px;margin-left:-85px;background:rgba(31, 30, 30, 0.83);border-radius:5px;width:170px;height:35px;text-align:center;line-height:35px;font-size:0.95rem;color:#FFF;display:none;} #disabled{pointer-events: none;} @media screen and (min-width: 300px) and (max-width: 374px) { .Determine{height:35px;bottom:12%;} .region_box{height:60%;} /*.demand_title{margin-top:70px;}*/ .region li i{left:24%;} } /*刻度尺*/ .box {height:50px;position:relative;width:100%;margin:0 auto;} .wrap{min-width: 320px;max-width:768px;margin:0 auto;overflow:hidden;position:relative;} .wrapper {position:relative;height:49px;line-height:50px;width:100%;overflow: hidden;margin:0 auto;border:1px solid #ccc;border-radius:25px; background:-webkit-gradient(linear ,-25% 10%, 111% 100%, color-stop(0.14,rgb(227, 227, 227)), color-stop(0.5,rgb(255, 255, 255)), color-stop(1,rgb(229, 229, 229)) ); } .wrapper .scroller {position:absolute;padding:0 48% 0 50%;} .wrapper .scroller li {float: left;width:50px;height:13px;line-height:13px;/*text-align: center;*/font-style: none;margin: 0 20px; padding:25px 0 10px;position:relative;top:5px;} /* .wrapper .scroller li:first-child {width:230px;} .wrapper .scroller li:last-child {width:210px;}*/ .wrapper .scroller li span{display:block;border-left:1px solid #ccc;width:100%;height:13px;} .wrapper .scroller li span i {display:inline-block;font-size:12px;color:#9b9b9b;font-style:normal;position:absolute;top:7px;left:-10px;} .pillar {display:inline-block;width:6px;height:60px;border-radius:10px;background:rgba(252, 92, 44, 0.85);position:absolute;z-index:2;left:50%;top:-5px;margin-left:-3px;} .Price h3{text-align: center;line-height:100px;font-size:1.6rem;color:#FF470F;} /*报名*/ .xm_bm_box{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;display:none;} .xm_bm{width:80%;position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-40%;background:#FFF;z-index:200;border-radius:5px;padding-bottom:25px;} .xm_bm em{font-size:1.2rem;color:#DF4312;margin-top:20px;text-align:center;display: block;font-weight:600;letter-spacing:1px;} .xm_bm_box form{width:90%;margin:auto;margin-top:20px;} .xm_bm_box form .m_input{border:1px solid #F9DED5;width:100%;height:40px;padding:0 15px;border-radius:5px;} .xm_bm_box form .m_button{width:100%;height:40px;background:#FF6E42;border:0;margin-top:20px;border-radius:30px;font-size:1rem;color:#FFF;letter-spacing:1px;} .xm_bm_gb{display: block;width:30px;height:30px;position: absolute;top:-37px;right:-4px;} .xm_bm_zhez{width:100%;height:100%;background:rgba(33, 33, 33, 0.5);position: absolute;top:0;left:0;} .m_form{ animation:change 0.8s; -webkit-animation:change 0.8s; -moz-animation:change 0.8s; } @keyframes change { 0% {left:100%;opacity:0;} 100% {opacity:1;} } -webkit-@keyframes change { 0% {left:100%;opacity:0;} 100% {opacity:1;} } -moz-@keyframes change { 0% {left:100%;opacity:0;} 100% {opacity:1;} } @media screen and (max-height: 568px){ .demand_title{margin-top:10%;} .region_City li{height:38px;line-height:38px;} .region li{font-size:1rem;} .Huxing .Huxing_list{margin-bottom:5%;} } </style> <script type="text/javascript" src="/js/signup/iscroll.js"></script> <script type="text/javascript" src="/js/signup/navbarscroll.js"></script> <!-- 需求定制 --> <div class="demand_box"> <img src="/image/demand_gb.png" alt="" class="demand_box_gb"> <!-- 价格 --> <div class="demand" Nextstep="1"> <div class="demand_title">您理想的房子价格?</div> <div class="Price"> <h3 id="numberID">540</h3> <div class="box"> <span class="pillar"></span> <div class="wrapper" id="wrapper1"> <div class="scroller"> <ul class="clearfix"> <?php foreach ($price as $val){ ?> <li><span><i><?= $val; ?></i></span></li> <?php } ?> <!-- <li><span><i>不限</i></span></li>--> <!-- <li><span><i>100</i></span></li>--> <!-- <li><span><i>200</i></span></li>--> <!-- <li><span><i>300</i></span></li>--> <!-- <li><span><i>400</i></span></li>--> <!-- <li><span><i>500</i></span></li>--> <!-- <li><span><i>600</i></span></li>--> <!-- <li><span><i>700</i></span></li>--> <!-- <li><span><i>800</i></span></li>--> <!-- <li><span><i>900</i></span></li>--> <!-- <li><span><i>1000</i></span></li>--> </ul> </div> </div> </div> </div> <div class="Pricexyb" Nextstep="2">下一步</div> <div class="HxRemind">户型最多只能选择3项</div> </div><!-- 价格 --> <!-- 户型 --> <div class="demand" Nextstep="2" style="display:none;"> <div class="demand_title">您想要买什么户型?</div> <div class="Huxing"> <?php foreach ($type as $val){ ?> <div class="Huxing_list"><span HuXing="<?= $val['id'] ?>"><?= $val['huxing_name'] ?></span><i></i></div> <?php } ?> <!-- <div class="Huxing_list"><span HuXing="1">一室</span><i></i></div>--> <!-- <div class="Huxing_list"><span HuXing="2">二室</span><i></i></div>--> <!-- <div class="Huxing_list"><span HuXing="3">三室</span><i></i></div>--> <!-- <div class="Huxing_list"><span HuXing="4">四室</span><i></i></div>--> <!-- <div class="Huxing_list"><span HuXing="5">五室及以上</span><i></i></div>--> <div class="Huxing_list"><span HuXing="0">不限</span><i></i></div> </div> <div class="NextStep" Nextstep="3">下一步</div> <div class="HxRemind">户型最多只能选择3项</div> </div><!-- 户型 --> <!-- 区域 --> <div class="demand" style="display:none;" Nextstep="3"> <div class="demand_title">您想在哪里买房?</div> <div class="region_box"> <ul class="region"> <?php foreach ($province as $val){ ?> <li regionId="<?= $val['id'] ?>"><i></i><?= $val['city_name'] ?></li> <?php } ?> <!-- <li regionId="2"><i></i>广西</li> --> <!-- <li regionId="3"><i></i>广东</li> --> <!-- <li regionId="4"><i></i>云南</li> --> <!-- <li regionId="5"><i></i>东南亚</li> --> </ul> <div class="region_City_box"> <ul class="region_City"> <!-- <li><span>不限</span><i class="i_dark"></i></li> i_bright <li><span>海南</span><i class="i_dark"></i></li> <li><span>海南</span><i class="i_dark"></i></li> <li><span>海南</span><i class="i_dark"></i></li> <li><span>海南</span><i class="i_dark"></i></li> <li><span>海南</span><i class="i_dark"></i></li> <li><span>海南</span><i class="i_dark"></i></li> <li><span>海南</span><i class="i_dark"></i></li> <li><span>海南</span><i class="i_dark"></i></li> <li><span>海南</span><i class="i_dark"></i></li> <li><span>海南</span><i class="i_dark"></i></li> --> </ul> </div> </div> <div class="Determine">确定</div> <div class="remind">最多只能选择5项</div> </div><!-- 区域 --> <div class="xm_bm_box"> <div class="xm_bm_zhez"></div> <div class="xm_bm m_form"> <em>免费定制您的需求</em> <form action="" class="submit_area"> <input type="hidden" name="hid" value="0"> <!-- 0 为公共报名,其它为楼盘ID--> <input type="hidden" name="source" value="3"> <!--报名来源 具体查看applyVerify.js文件中SourceModule 标识说明--> <input type="hidden" name="equipment" value="1"> <!--来源设备 ( PC端 2,手机端 1 )--> <input type="hidden" class="m_intention_city" name="intention_city" value=""> <!-- 区域 --> <input type="hidden" class="m_intention_housetype" name="intention_housetype" value=""> <!-- 户型 --> <input type="hidden" class="m_budget" name="budget" value=""> <!-- 价格 --> <input type="text" placeholder="请输入您的手机号" class="m_input" name="mobile"> <input type="button" class="m_button apply_submit" value="马上定制"> </form> <img src="/image/m_bm4.png" alt="" class="xm_bm_gb"> </div> </div> </div> <script> $(function(){ // 修改页面适应样式 // 修改弹窗信息 $('.m_form em').html(w_title); $('.m_form form input[name="hid"]').val(w_id); $('.m_form form input[name="source"]').val(w_module); // 提交筛选信息 $('.m_form form input[name="intention_city"]').val(intention_city); // 区域 $('.m_form form input[name="intention_housetype"]').val(intention_housetype); //户型 $('.m_form form input[name="budget"]').val(budget); // 价格 //报名验证及提交的调用 PublicAction.AjaxSend( { CORID:'apply_submit', /*操作ID*/ } ); }) var Iheight = $(window).outerHeight(); $('.demand_box').height(Iheight + 60); var intention_city = "" // 区域 var intention_housetype = "" //户型 var budget = ''; // 价格 //区域数据 function region (){ var html = ''; $.ajax({ url: "/index/cityson", data:{pid:YqData}, type: "POST", dataType: "json", success: function(data) { console.log(data); if(data.code == 200){ $.each(data.data, function (i, data) { html+= '<li CityId="'+data.id+'" CityName="'+data.city_name+'"><span>'+data.city_name+'</span><i class="i_dark"></i></li>'; }); $(".region_City").html(html); } } }); } var YqData = ""; // 区域数据 $('.region li').on('click',function(){ YqData = $(this).attr('regionId'); region (); $('.region_City').show(); $('.region').attr('id','m_regionYd'); $('.region li').attr('id','region'); $(this).attr('class','regionli').siblings().attr('class',''); $('.Determine').attr('id','disabled'); }) // 区域选中功能 $('.Determine').attr('id','disabled'); $('.region_City').on('click',' li',function(){ $(this).find('i').attr('class','i_bright').parent().siblings().find('i').attr('class','i_dark'); // 选中才能点击确认 var existence = $('.region_City li .i_bright').length; if (existence == 1) { $('.Determine').attr('id','Detecolor'); }else{ $('.Determine').attr('id','disabled'); } intention_city = $(this).attr('CityName') }) // 户型选中功能 $('.NextStep').attr('id','disabled'); $('.Huxing .Huxing_list').on('click',function(){ var IdHx = $(this).find('span').html(); var Hudata = $(this).attr('id'); //点击选中 在点击关闭 if(Hudata == "Huxing_list"){ $(this).attr('id','').find('i').attr('class','') }else{ $(this).attr('id','Huxing_list').find('i').attr('class','Huxing_list_i') } // 限制只能选中3个 var Hxid = $('.Huxing #Huxing_list').length; if(Hxid >3){ $(this).attr('id','').find('i').attr('class',''); $('.HxRemind').fadeIn(500); setTimeout(function(){ $('.HxRemind').fadeOut(500); },1500); return; } // 点击不限 其他关闭。 if (IdHx !== '不限') { $(this).parent().find('.Huxing_list').last().attr('id','').find('i').attr('class',''); }else{ $(this).siblings().attr('id','').find('i').attr('class',''); }; // 选中才能点击确认 var HxIdData = $('.Huxing #Huxing_list').length; if (HxIdData >= 1) { $('.NextStep').attr('id','NextStepcolor'); }else{ $('.NextStep').attr('id','disabled'); } }) // 获取户型 var arr = new Array(); $('.NextStep').on('click',function(){ $('.demand').hide(); var NextstepID = $(this).attr('Nextstep') $('.demand[Nextstep='+ NextstepID +']').show(); $('.Huxing #Huxing_list').each(function(){ var HxdataId = $(this).find('span').html(); arr.push(HxdataId); }) intention_housetype = arr.join(","); console.log(intention_housetype); }) // 获取价格 $('.Pricexyb').on('click',function(){ $('.demand').hide(); var NextstepID = $(this).attr('Nextstep') $('.demand[Nextstep='+ NextstepID +']').show(); budget = $('.Price h3').html(); console.log(budget); }) // <input type="hidden" class="m_intention_city" name="intention_city" value=""> <!-- 区域 --> // <input type="hidden" class="m_intention_housetype" name="intention_housetype" value=""> <!-- 户型 --> // <input type="hidden" class="m_budget" name="budget" value=""> <!-- 价格 --> // 最后确认 $('.demand').on('click','.Determine',function(){ console.log(intention_city); $('.m_form .m_intention_city').attr('value',intention_city); <!-- 区域 --> console.log(intention_housetype); $('.m_form .m_intention_housetype').attr('value',intention_housetype); <!-- 户型 --> console.log(budget); $('.m_form .m_budget').attr('value',budget); <!-- 价格 --> $('.xm_bm_box').fadeIn(800); $('.demand').attr('id','opacity'); }) $('.xm_bm_zhez').on('click',function(){ $('.xm_bm_box').fadeOut(100); $('.demand').attr('id',''); }) $('.xm_bm_gb').on('click',function(){ $('.xm_bm_box').fadeOut(100); $('.demand').attr('id',''); }) $('.demand_box_gb').on('click',function(){ RemoveDiv(); }) // 刻度尺 $(function(){ //demo示例一到四 通过lass调取,一句可以搞定,用于页面中可能有多个导航的情况 // $('.wrapper').navbarscroll(); //demo示例五 通过id调取 // $('.wrapper').navbarscroll({ // defaultSelect:6, // endClickScroll:function(obj){ // console.log(obj.text()) // } // }); //demo示例六 通过id调取 $('.wrapper').navbarscroll({ duibiScreenWidth:0.1, //单位以rem为准,默认为0.4rem scrollerWidth:1, //单位以px为准,默认为3,[仅用于特殊情况:外层宽度因为小数点造成的不精准情况] fingerClick:0, //目标第0或1个选项触发,必须每一项长度一致,方可用此项 endClickScroll:function(obj){ // console.log(obj.text()) } }); }); </script>