Browse Source

修改金融服务页面效果

suntg 8 years ago
parent
commit
fbdccec9f1

+ 149 - 80
src/main/webapp/WEB-INF/views/normal/finance.html

@@ -13,9 +13,6 @@
     <link rel="stylesheet" href="static/lib/bootstrap/css/bootstrap.min.css" />
     <link rel="stylesheet" href="static/css/common.css" />
     <link rel="stylesheet" href="static/css/index.css" />
-    <script type="text/javascript" src="static/lib/jquery/jquery.min.js"></script>
-    <script type="text/javascript" src="static/js/common/common.js"></script>
-    <script type="text/javascript" src="static/js/finance/base.js"></script>
 
 </head>
 <style>
@@ -37,44 +34,39 @@
         width: 100%;
         margin-top:20px;
     }
-    .finance .content{
-        width: 100%;
-        margin: 0 auto;
-        height: 540px;
-        background: #faf9f9;
-    }
-    .finance .content .item{
+
+    .finance .item{
         width: 100%;
         margin: 0 auto;
         height: 540px;
     }
-    .finance .content .img{
+    .finance .img{
         float: left;
-        margin: 100px 0 0 80px;
+        margin: 0px 0 0 15px;
     }
-    .finance .content .title{
+    .finance .title{
         float: right;
         text-align: center;
-        margin: 130px 260px 0 0;
+        margin: 15px 180px 0 0
     }
-    .finance .content .title h2{
+    .finance .title h2{
         font-size: 30px;
         color: #0080cc;
         line-height: 30px;
         text-align: left;
     }
-    .finance .content .title p{
+    .finance .title p{
         font-size: 14px;
         color: #666;
         line-height: 25px;
         text-align: left;
     }
-    .finance .content .item .title p.f18{
+    .finance .item .title p.f18{
         font-size: 18px;
         color: #333;
         margin: 12px 0 6px 0;
     }
-    .finance .content .title a{
+    .finance .title a{
         display: inline-block;
         width: 200px;
         height: 50px;
@@ -89,7 +81,7 @@
 
         top: 12px;
     }
-    .finance .content .title a:hover{
+    .finance .title a:hover{
         text-decoration: none;
         background: #25a0cc;
         cursor: pointer;
@@ -145,55 +137,12 @@
 
 </style>
 <body>
-<!--遮罩层-->
-<div id="layer"></div>
-<!--隐藏的借款div-->
-<div  style="display:none" id="loan">
-    <div class="form-group">
-        <input type="text" style="display: none" class="form-control" id="loanUserId">
-    </div>
-    <div class="form-group">
-        <label>企业名称</label>
-        <input type="text" placeholder="请输入企业名称"  class="form-control" id="loanCommpanyName">
-    </div>
-    <div class="form-group">
-        <label>拟融资金额(元)</label>
-        <input type="text" placeholder="请输入融资金额" class="form-control" id="loanAmount" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
-    </div>
-    <div class="form-group">
-        <label>联系人</label>
-        <input type="text" placeholder="请输入联系人" class="form-control" id="loanName">
-    </div>
-    <div class="form-group">
-        <label>联系方式</label>
-        <input type="text" placeholder="请输入联系方式" class="form-control" id="loanTelphone">
-    </div>
-    <div class="form-group">
-    <input type="checkbox" id="check">同意查询人民银行征信记录授权协议
-    </div>
-    <div id="note">
-        需提供以下资料清单(加盖公章)<br>
-        <span>1、营业执照复印件</span>        <span id="span2"> 2、组织机构代码证复印件</span><br>
-        <span>3、国税、地税登记证复印件</span>  <span id="span4"> 4、开户许可证复印件</span><br>
-        <span>5、法人代表及实际控制人身份证复印件</span> <span id="span6">6、法人代表证明书(见附件1)</span><br>
-        <span>7、公司近三年审计报告及最近一期的财务报表及科目明细(前五大)</span><br>
-        <span>8、近1年主要结算银行流水对账单和用于公司账务结算的个人账户结算单复印件</span><br>
-        <span>9、前五大上下游客户近一年贸易合同,货运证明或其他表明货物确已发运的单据;交易发票;提货单、质检证明(凭证)、预付款(定金)凭证复印件</span><br>
-        <span>10、公司基本情况表(见附件2)</span><span id="span11">11、拟融资应收账款发票清单、采购合同明细(见附件3)</span><br>
-        <span>12、拟融资应收账款客户近一年的付款凭证(银行回单)</span><br>
-        <span>13、拟融资应收账款相关贸易合同,货运证明或其他表明货物确已发运的单据;交易发票;提货单、质检证明(凭证)、预付款(定金)凭证</span><br>
-        <span> 14、近两年缴税完税凭证、水电费单、员工工资单等证明文件</span><br>
-        <span>15、我公司要求的其他资料</span><br>
-    </div>
 
-    <button class="btn btn-default" id="loanSubmit" class="form-control">提交</button>
-    <button class="btn btn-default" id="loanCancle" class="form-control">取消</button>
-</div>
 <!-- nav start -->
 <nav id="nav" class="navbar navbar-inverse navbar-fixed-top">
     <div class="container">
         <div class="navbar-header">
-            <a href="" id="logo"><img src="static/img/logo.png" alt="" height="25px" /></a>
+            <a href="./" id="logo"><img src="static/img/logo.png" alt="" height="25px" /></a>
         </div>
         <div class="collapse navbar-collapse">
             <ul class="nav navbar-nav navbar-left">
@@ -222,28 +171,148 @@
     </div>
 </nav>
 <!-- nav end -->
-<div class="finance">
+
+<header class="finance">
     <div class="banner"><img src="static/images/banner.jpg" /></div>
-    <div class="content">
-        <div class="width1170">
-            <div class="item">
-                <div class="img"><img src="static/images/icon-img.png"/></div>
-                <div class="title">
-                    <h2>账速融—基础版</h2>
-                    <p class="f18">应收账款类融资</p>
-                    <p>
-                        在线操作,入库即融<br/>
-                        实时授信,急速到账<br/>
-                        利率超低,随借随还<br/>
-                        不限银行,不限额度
-                    </p>
-                    <a id="applyLoan">
-                        立即申请
-                    </a>
+</header>
+
+<section class="finance">
+    <div class="container">
+        <div>
+            <div class="img"><img src="static/images/icon-img.png"/></div>
+            <div class="title">
+                <h2>账速融—基础版</h2>
+                <p class="f18">应收账款类融资</p>
+                <p>
+                    在线操作,入库即融<br/>
+                    实时授信,急速到账<br/>
+                    利率超低,随借随还<br/>
+                    不限银行,不限额度
+                </p>
+                <a id="applyLoan">
+                    立即申请
+                </a>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- footer start -->
+<footer>
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-3 col-sm-offset-2">
+                <div class="qrcode qrcode-uu">
+                    <div class="qrcode-img pull-left">
+                        <img src="static/img/qrcode/uu.png" width="100px" height="100px"
+                             alt="UU互联" />
+                    </div>
+                    <div class="qrcode-text pull-left">
+                        <div>手机UU</div>
+                        <div>快人一步</div>
+                    </div>
+                    <div class="clearfix"></div>
+                </div>
+            </div>
+            <div class="col-sm-3">
+                <div class="qrcode qrcode-uas">
+                    <div class="qrcode-img pull-left">
+                        <img src="static/img/qrcode/uas.png" width="100px" height="100px"
+                             alt="优软公众号" />
+                    </div>
+                    <div class="qrcode-text pull-left">
+                        <div>微信扫描</div>
+                        <div>关注公众号</div>
+                    </div>
+                    <div class="clearfix"></div>
                 </div>
             </div>
+            <div class="col-sm-4">
+                <p>
+                    <a href="">关于优软</a>
+                    <a href="contact">联系我们</a>
+                    <a href="help/agreement">帮助</a>
+                </p>
+                <p>©2016 深圳市优软科技有限公司</p>
+                <p>粤ICP备15112126号-2</p>
+            </div>
+        </div>
+    </div>
+</footer>
+
+<!-- Modal -->
+<div class="modal fade" id="applyModal" tabindex="-1" role="dialog" aria-labelledby="applyModalLabel">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="applyModalLabel">立即申请</h4>
+            </div>
+            <div class="modal-body">
+                <form class="form-horizontal" action="">
+                    <div class="form-group">
+                        <input type="text" style="display: none" class="form-control" id="loanUserId">
+                    </div>
+                    <div class="form-group">
+                        <label class="col-sm-2 control-label">企业名称</label>
+                        <div class="col-sm-6">
+                            <input type="text" placeholder="请输入您的企业全称"  class="form-control" id="loanCommpanyName">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="col-sm-2 control-label">拟融资金额</label>
+                        <div class="col-sm-4">
+                            <div class="input-group">
+                                <input type="text" placeholder="请输入融资金额" class="form-control" id="loanAmount" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
+                                <div class="input-group-addon">元</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="col-sm-2 control-label">联系人</label>
+                        <div class="col-sm-4">
+                            <input type="text" placeholder="请输入您的姓名" class="form-control" id="loanName">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="col-sm-2 control-label">联系方式</label>
+                        <div class="col-sm-4">
+                            <input type="text" placeholder="请输入您的手机号" class="form-control" id="loanTelphone">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="col-sm-10 col-sm-offset-2">
+                            <input type="checkbox" id="check">同意查询人民银行征信记录授权协议
+                        </div>
+                    </div>
+                    <div id="note">
+                        需提供以下资料清单(加盖公章)<br>
+                        <span>1、营业执照复印件</span>        <span id="span2"> 2、组织机构代码证复印件</span><br>
+                        <span>3、国税、地税登记证复印件</span>  <span id="span4"> 4、开户许可证复印件</span><br>
+                        <span>5、法人代表及实际控制人身份证复印件</span> <span id="span6">6、法人代表证明书(见附件1)</span><br>
+                        <span>7、公司近三年审计报告及最近一期的财务报表及科目明细(前五大)</span><br>
+                        <span>8、近1年主要结算银行流水对账单和用于公司账务结算的个人账户结算单复印件</span><br>
+                        <span>9、前五大上下游客户近一年贸易合同,货运证明或其他表明货物确已发运的单据;交易发票;提货单、质检证明(凭证)、预付款(定金)凭证复印件</span><br>
+                        <span>10、公司基本情况表(见附件2)</span><span id="span11">11、拟融资应收账款发票清单、采购合同明细(见附件3)</span><br>
+                        <span>12、拟融资应收账款客户近一年的付款凭证(银行回单)</span><br>
+                        <span>13、拟融资应收账款相关贸易合同,货运证明或其他表明货物确已发运的单据;交易发票;提货单、质检证明(凭证)、预付款(定金)凭证</span><br>
+                        <span> 14、近两年缴税完税凭证、水电费单、员工工资单等证明文件</span><br>
+                        <span>15、我公司要求的其他资料</span><br>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
+                <button type="button" class="btn btn-primary" id="applySubmit">提交申请</button>
+            </div>
         </div>
     </div>
 </div>
+
+<!-- footer end -->
 </body>
+<script type="text/javascript" src="static/lib/jquery/jquery.min.js"></script>
+<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="static/js/common/common.js"></script>
+<script type="text/javascript" src="static/js/finance/base.js"></script>
 </html>

+ 2 - 27
src/main/webapp/resources/js/finance/base.js

@@ -1,19 +1,9 @@
 $(function(){
     $("#applyLoan").click(function(){
-        $("#loanAmount").val('');
-        var width=$(window).width();
-
-        $("#loan").css({
-            "display":"block",
-        });
-
-        $("#layer").css({
-            "width":width,
-            "display":"block"
-        })
+        $('#applyModal').modal('toggle');
     })
 
-    $("#loanSubmit").click(function(){
+    $("#applySubmit").click(function(){
         var product=$("#applyLoan").siblings('h2').text();
         var loanUserId=$("#loanUserId").val();//uuid
         var loanName=$("#loanName").val();//姓名
@@ -75,21 +65,6 @@ $(function(){
             })
         }
     })
-    $("#loanCancle").click(function(){
-        $("#loan").css({
-            "display":"none"
-        });
-        $("#layer").css({
-            "display":"none"
-        })
-
-    })
 
-    function checkError(XMLHttpRequest) {
-        var result = JSON.parse(XMLHttpRequest.responseText);
-        var message = result.message;
-        var detailedMessage = result.detailedMessage;
-        alert(message);
-    }
 })