pfhwyigou/mobile/views/public/analyze.php

<style>
.analyze{ width: 77%; margin: 0 auto; height: auto; position: absolute; top: -100%; display: none; left: 50%; margin-left: -38.5%;}
.analyze .analyze_main{ position: relative; }

.analyze .analyze_bg{  width: 100%; height: auto;}
.analyze .analyze_bg img{  width: 100%; height: auto;}
.analyze .analyze_center{ position: absolute; left: 50%; top: 0px;  width: 84%; height: 100%; margin-left: -42%; padding-top: 20px;}
.analyze .analyze_center p.xidai{ position: absolute; right: -10px; top: -22px; width: 65px; height: auto;}
.analyze .analyze_center p.xidai img{width: 100%; height: auto;}

.analyze .analyze_center .analyze_top{width: 90%; margin: 0 auto;}
.analyze .analyze_center .analyze_top .analyze_h{ border-bottom: 2px solid #885a3d; padding-bottom:8px; }
.analyze .analyze_center .analyze_top .analyze_h span{display: inline-block;  font-size: 1.3rem; font-weight: 600; color: transparent; background: linear-gradient(to right, #7a492f, #c97d3b); -webkit-background-clip: text;}
.analyze .analyze_center .analyze_top .home_title span{ font-size: 1.1rem; color: #885a3d; font-weight: 600; margin-top: 8px; display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.analyze_list{ width: 90%; margin: 0 auto; margin-top: 8px;}
.analyze_list ul li{float: left; width: 50%; margin: 7px 0;}
.analyze_list ul li:nth-child(2n){ position: relative; left: 2%;}
.analyze_list ul li i{ display: inline-block; width: 18px; height: 18px; margin-right: 5px; position: relative; top: -2px;}
.analyze_list ul li i img{  width: 100%; height: 100%;}
.analyze_list ul li span{ display: inline-block; font-size: 0.9rem; color: #885a3d;}

.analyze_input{ position: relative; top: 12%; width: 77%; margin: 0 auto;}
.analyze_input input.input_text{ box-shadow: 0px 3px 20px 0px rgba(0,0,0,0.8); padding: 9px 10px; text-align: center; display: block; font-size: 0.9rem; color:#4f535f; border-radius:30px; background: #fff9f3; border: none; width: 100%;}
.analyze_input a{margin-top: 20px; display: block; width: 100%; height: 35px; border-radius: 30px; font-size: 1rem; font-weight: 600; text-align: center; line-height: 35px;}
.analyze_input a{background: #dbb292;
    color: #895c44;
    box-shadow: 0px 3px 20px 0px rgba(0,0,0,0.5);
    background: -webkit-linear-gradient(left, #dbb292 , #f8dfc4);
    background: -o-linear-gradient(right, #dbb292, #f8dfc4);
    background: -moz-linear-gradient(right, #dbb292, #f8dfc4);
    background: linear-gradient(to right, #dbb292 , #f8dfc4);
}
.analyze_input p.font_text{ font-size: 0.7rem; color: #b5a99d; margin-top: 30px; text-align: center;}


.lpapply_gb{ width: 25px; height: 25px; margin: 0 auto; margin-top: 15px;}
.lpapply_gb img{ width: 100%; height: 100%;}



@media screen and (min-width: 376px) and (max-width: 414px) { 
  .analyze_input{top: 12.5%;}
}

@media screen and (min-width: 300px) and (max-width: 374px) { 
  .analyze .analyze_center{ padding-top: 10px;}
  .analyze_list{ margin-top: 5px;}
  .analyze_list ul li{ margin: 7px 0;}

  .analyze_input a{ margin-top: 17px;}
  .analyze_input p.font_text{ margin-top: 20px;}
  
}


</style>

<div class="analyze">
  <div class="analyze_main">
    <div class="analyze_bg"><img src="/overseas/img/ico_analyze2.png" alt=""></div>
    <div class="analyze_center">
      <p class="xidai"><img src="/overseas/img/ico_analyze3.png" alt=""></p>
      <div class="analyze_top">
        <div class="analyze_h"><span>项目分析</span></div>
        <div class="home_title"><span>富力布里斯本一号</span></div>
      </div>
      <div class="analyze_list">
        <ul class="c">
          <li><i><img src="/overseas/img/ico_analyze5.png" alt=""></i><span>地段优势</span></li>
          <li><i><img src="/overseas/img/ico_analyze5.png" alt=""></i><span>增值空间</span></li>
          <li><i><img src="/overseas/img/ico_analyze5.png" alt=""></i><span>价格对比</span></li>
          <li><i><img src="/overseas/img/ico_analyze5.png" alt=""></i><span>售完保障</span></li>
          <li><i><img src="/overseas/img/ico_analyze5.png" alt=""></i><span>了解开发商</span></li>
        </ul>
      </div>
      <div class="analyze_input">
        <form 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 class="input_text" type="text" name="mobile" onfocus="this.placeholder='';move();" onblur="this.placeholder='请输入您的手机号';" placeholder="请输入您的手机号">
          <a class="analyze_buttom" href="javascript:;">立即订阅</a>
        </form>
        <p class="font_text">我们将以短信的方式通知您</p>
      </div>
    </div>
  </div>
  <div class="lpapply_gb"><a href="javascript:;" onclick="RemoveDiv();"><img src="/overseas/img/ico_analyze4.png" alt=""></a></div>
</div>

<script>
  $(function(){
    // 修改页面适应样式
    var _height = $(window).outerHeight();
    var height =  $('.analyze').outerHeight(); 
    $('.analyze').show();
    // $('.analyze').css({'margin-top':-(height/2)});
    $(".analyze").animate({top:'13%'},300);


    // 修改弹窗信息
    $('.analyze_top .home_title span').html(w_title);
    $('.analyze_input input[name="hid"]').val(w_id);
    $('.analyze_input input[name="source"]').val(w_module);

    //报名验证及提交的调用
    PublicAction.AjaxSend(
        {
            CORID:'analyze_buttom',                    /*操作ID*/
        }
    );

  })
  function move(){
       $(".analyze").css("top", "0px");
       $('.input_text').css('text-align','left');
  }

</script>