update

b947053b · superman · 0b5038d5 · b947053b · b947053b · b947053b
Commit b947053b authored Aug 01, 2016 by superman
13 changed files
--- a/public/javascripts/project.js
+++ b/public/javascripts/project.js
@@ -52,7 +52,7 @@
        $errorDescription.empty();
    });
-    $successDialog.on('click', 'modal-dialog-close', function (e) {
+    $successDialog.on('click', '.modal-dialog-close', function (e) {
        $successDialog.fadeOut(300);
    });
@@ -66,7 +66,6 @@
                description: description
            }, 'POST').then(function () {
                $successDialog.fadeIn(300);
-                alert('提交成功!');
            }).catch(function () {
                alert('提交失败, 请稍后再试!');
            });

--- a/public/javascripts/project.js.map
+++ b/public/javascripts/project.js.map
--- a/public/javascripts/project.jsx
+++ b/public/javascripts/project.jsx
@@ -51,7 +51,7 @@
    });
-    $successDialog.on('click', 'modal-dialog-close', (e)=> {
+    $successDialog.on('click', '.modal-dialog-close', (e)=> {
        $successDialog.fadeOut(300);
    });
@@ -65,7 +65,6 @@
                description
            }, 'POST').then(()=> {
                $successDialog.fadeIn(300);
-                alert('提交成功!');
            }).catch(()=> {
                alert('提交失败, 请稍后再试!');
            });

--- a/public/javascripts/project.min.js
+++ b/public/javascripts/project.min.js
-"use strict";(function(){var $form=$("#container .introducer");var $submit=$('input[type="submit"]',$form);var $introducerMobile=$("#introducerMobile",$form);var $projectDescription=$("#projectDescription",$form);var $errorPhone=$(".error-phone",$form);var $errorDescription=$(".error-description",$form);var $successDialog=$(".modal-box-success");var filterMobileInput=function filterMobileInput($mobile){$mobile.val(($mobile.val()+"").replace(/[^\d]/g,""))};var validateMobile=function validateMobile(){var mobile=$.trim($introducerMobile.val()+"");if(/^[\d]{11}$/g.test(mobile)){$errorPhone.empty();return mobile}else{$errorPhone.html("手机号输入错误!");return false}};var validateDescription=function validateDescription(){var description=$.trim($projectDescription.val()+"");if(description.length){$errorDescription.empty();return description}else{$errorDescription.html("请输入项目描述内容!");return false}};$introducerMobile.on("keyup",function(e){filterMobileInput($introducerMobile)}).on("change blur",function(e){validateMobile()}).on("focus",function(e){$errorPhone.empty()});$projectDescription.on("change blur",function(e){validateDescription()}).on("focus",function(e){$errorDescription.empty()});$successDialog.on("click","modal-dialog-close",function(e){$successDialog.fadeOut(300)});$form.on("submit",function(e){e.preventDefault();var mobile=validateMobile();var description=validateDescription();if(mobile&&description){request("/api/1.0/proj/add.json",{mobile:mobile,description:description},"POST").then(function(){$successDialog.fadeIn(300);alert("提交成功!")}).catch(function(){alert("提交失败, 请稍后再试!")})}})})();(function(){var $modalBox=$(".modal-box");$(".hot-project-address").on("click","a",function(e){e.preventDefault();$modalBox.fadeIn(300)});$modalBox.on("click",".modal-dialog-close",function(e){e.preventDefault();$modalBox.fadeOut(300)})})();
+"use strict";(function(){var $form=$("#container .introducer");var $submit=$('input[type="submit"]',$form);var $introducerMobile=$("#introducerMobile",$form);var $projectDescription=$("#projectDescription",$form);var $errorPhone=$(".error-phone",$form);var $errorDescription=$(".error-description",$form);var $successDialog=$(".modal-box-success");var filterMobileInput=function filterMobileInput($mobile){$mobile.val(($mobile.val()+"").replace(/[^\d]/g,""))};var validateMobile=function validateMobile(){var mobile=$.trim($introducerMobile.val()+"");if(/^[\d]{11}$/g.test(mobile)){$errorPhone.empty();return mobile}else{$errorPhone.html("手机号输入错误!");return false}};var validateDescription=function validateDescription(){var description=$.trim($projectDescription.val()+"");if(description.length){$errorDescription.empty();return description}else{$errorDescription.html("请输入项目描述内容!");return false}};$introducerMobile.on("keyup",function(e){filterMobileInput($introducerMobile)}).on("change blur",function(e){validateMobile()}).on("focus",function(e){$errorPhone.empty()});$projectDescription.on("change blur",function(e){validateDescription()}).on("focus",function(e){$errorDescription.empty()});$successDialog.on("click",".modal-dialog-close",function(e){$successDialog.fadeOut(300)});$form.on("submit",function(e){e.preventDefault();var mobile=validateMobile();var description=validateDescription();if(mobile&&description){request("/api/1.0/proj/add.json",{mobile:mobile,description:description},"POST").then(function(){$successDialog.fadeIn(300)}).catch(function(){alert("提交失败, 请稍后再试!")})}})})();(function(){var $modalBox=$(".modal-box");$(".hot-project-address").on("click","a",function(e){e.preventDefault();$modalBox.fadeIn(300)});$modalBox.on("click",".modal-dialog-close",function(e){e.preventDefault();$modalBox.fadeOut(300)})})();
\ No newline at end of file
--- a/public/stylesheets/project.css
+++ b/public/stylesheets/project.css
@@ -213,138 +213,96 @@
 /* .hot-project-address end */
 /* .hot-project-tabs start */
 .hot-project-tabs {
-  width: 100%;
-  height: 690px;
  background: #f6f6f6;
+  padding: 180px 0 160px 0;
 }
 .hot-project-tabs ul {
-  width: 1203px;
+  width: 1150px;
-  height: 350px;
+  margin: 0 auto;
-  margin: 180px auto 160px;
  border: 1px solid #43abb6;
 }
 .hot-project-tabs ul li {
-  width: 300px;
+  width: 25%;
-  height: 100%;
  float: left;
  font-size: 16px;
  color: #000;
  text-align: center;
+  background: #f6f6f6;
+  transition-delay: .1s;
+  transition: background .5s, color .5s;
 }
-.hot-project-tabs ul li dl {
+.hot-project-tabs ul li > div {
-  width: 100%;
+  border-right: 1px solid #43abb6;
+  height: 200px;
+  padding-top: 160px;
+  position: relative;
 }
-.hot-project-tabs ul li dl dt {
+.hot-project-tabs ul li > div:before,
-  width: 115px;
+.hot-project-tabs ul li > div:after {
+  content: '';
+  position: absolute;
+  top: 44px;
+  left: 50%;
+  margin-left: -58px;
  height: 115px;
-  margin: 44px auto 0;
+  width: 115px;
+  background: url(https://res.fudou6.com/c/4/20160801/by15pyq5qCH6aKYLTFfMDE=_480x240.png) 0 0 no-repeat;
+  opacity: 0;
+  transform: scale(0);
+  transition-delay: .1s;
+  transition: .5s;
 }
-.hot-project-tabs ul li dl dd {
+.hot-project-tabs ul li > div:before {
-  line-height: 28px;
+  transform: scale(1);
+  opacity: 1;
+}
+.hot-project-tabs ul li:last-child > div {
+  border-right: 0;
 }
-.hot-project-tabs ul li dl dd h4 {
+.hot-project-tabs ul li h4 {
  font-size: 28px;
  color: #43abb6;
-  margin: 14px 0 24px;
+  margin: 10px 0 20px;
 }
-.hot-project-tabs ul li:nth-child(1) {
+.hot-project-tabs ul li:nth-child(1) > div:before {
-  border-right: 1px solid #43abb6;
+  background-position: -360px -120px;
 }
-.hot-project-tabs ul li:nth-child(1) dt {
+.hot-project-tabs ul li:nth-child(1) > div:after {
-  background: url("https://res.fudou6.com/c/4/20160801/nbrdGFiczA1X2I=_115x115.png") no-repeat;
+  background-position: -360px 0px;
 }
-.hot-project-tabs ul li:nth-child(2) {
+.hot-project-tabs ul li:nth-child(2) > div:before {
-  border-right: 1px solid #43abb6;
+  background-position: -240px -120px;
 }
-.hot-project-tabs ul li:nth-child(2) dt {
+.hot-project-tabs ul li:nth-child(2) > div:after {
-  background: url("https://res.fudou6.com/c/4/20160801/dgndGFiczA0X2I=_115x115.png") no-repeat;
+  background-position: -240px 0px;
 }
-.hot-project-tabs ul li:nth-child(3) {
+.hot-project-tabs ul li:nth-child(3) > div:before {
-  border-right: 1px solid #43abb6;
+  background-position: -120px -120px;
+}
+.hot-project-tabs ul li:nth-child(3) > div:after {
+  background-position: -120px 0px;
 }
-.hot-project-tabs ul li:nth-child(3) dt {
+.hot-project-tabs ul li:nth-child(4) > div:before {
-  background: url("https://res.fudou6.com/c/4/20160801/p8edGFiczAzX2I=_115x115.png") no-repeat;
+  background-position: 0px -120px;
 }
-.hot-project-tabs ul li:nth-child(4) dt {
+.hot-project-tabs ul li:nth-child(4) > div:after {
-  background: url("https://res.fudou6.com/c/4/20160801/6jpdGFiczAyX2I=_115x115.png") no-repeat;
+  background-position: 0px 0px;
 }
 .hot-project-tabs ul li:hover {
+  transition-delay: 0s;
  color: #fff;
  background: #43abb6;
 }
 .hot-project-tabs ul li:hover h4 {
  color: #fff;
 }
-@-webkit-keyframes changeOne {
+.hot-project-tabs ul li:hover > div:before {
-  0% {
+  opacity: 0;
-    opacity: 1;
+  transform: scale(0);
-    background: url("https://res.fudou6.com/c/4/20160801/nbrdGFiczA1X2I=_115x115.png") no-repeat;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    background: url("https://res.fudou6.com/c/4/20160801/u42dGFiczA1X2E=_115x115.png") no-repeat;
-    opacity: 1;
-  }
-}
-.hot-project-tabs ul li:nth-child(1):hover dt {
-  animation-name: changeOne;
-  animation-duration: 0.5s;
-  animation-fill-mode: forwards;
-}
-@-webkit-keyframes changeTwo {
-  0% {
-    opacity: 1;
-    background: url("https://res.fudou6.com/c/4/20160801/dgndGFiczA0X2I=_115x115.png") no-repeat;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    background: url("https://res.fudou6.com/c/4/20160801/n3ndGFiczA0X2E=_115x115.png") no-repeat;
-    opacity: 1;
-  }
-}
-.hot-project-tabs ul li:nth-child(2):hover dt {
-  animation-name: changeTwo;
-  animation-duration: 0.5s;
-  animation-fill-mode: forwards;
-}
-@-webkit-keyframes changeThree {
-  0% {
-    opacity: 1;
-    background: url("https://res.fudou6.com/c/4/20160801/p8edGFiczAzX2I=_115x115.png") no-repeat;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-    background: url("https://res.fudou6.com/c/4/20160801/za5dGFiczAzX2E=_115x115.png") no-repeat;
-  }
-}
-.hot-project-tabs ul li:nth-child(3):hover dt {
-  animation-name: changeThree;
-  animation-duration: 0.5s;
-  animation-fill-mode: forwards;
-}
-@-webkit-keyframes changeFour {
-  0% {
-    background: url("https://res.fudou6.com/c/4/20160801/6jpdGFiczAyX2I=_115x115.png") no-repeat;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-    background: url("https://res.fudou6.com/c/4/20160801/zsedGFiczAyX2E=_115x115.png") no-repeat;
-  }
 }
-.hot-project-tabs ul li:nth-child(4):hover dt {
+.hot-project-tabs ul li:hover > div:after {
-  animation-name: changeFour;
+  opacity: 1;
-  animation-duration: 0.5s;
+  transform: scale(1);
-  animation-fill-mode: forwards;
 }
 /* .hot-project-tabs end */
 /* .modal-box start */

--- a/public/stylesheets/project.less
+++ b/public/stylesheets/project.less
@@ -297,147 +297,109 @@
 /* .hot-project-tabs start */
 .hot-project-tabs {
-  width: 100%;
-  height: 690px;
  background: #f6f6f6;
+  padding: 180px 0 160px 0;
  ul {
-    width: 1203px;
+    width: @container-width;
-    height: 350px;
+    margin: 0 auto;
-    margin: 180px auto 160px;
    border: 1px solid #43abb6;
    li {
-      width: 300px;
+      width: 25%;
-      height: 100%;
      float: left;
      font-size: 16px;
      color: #000;
      text-align: center;
-      dl {
+      background: #f6f6f6;
-        width: 100%;
+      transition-delay: .1s;
-        dt {
+      transition: background .5s, color .5s;
-          width: 115px;
+      & > div {
+        border-right: 1px solid #43abb6;
+        height: 200px;
+        padding-top: 160px;
+        position: relative;
+        &:before,
+        &:after {
+          content: '';
+          position: absolute;
+          top: 44px;
+          left: 50%;
+          margin-left: -58px;
          height: 115px;
-          margin: 44px auto 0;
+          width: 115px;
+          background: url(https://res.fudou6.com/c/4/20160801/by15pyq5qCH6aKYLTFfMDE=_480x240.png) 0 0 no-repeat;
+          opacity: 0;
+          transform: scale(0);
+          transition-delay: .1s;
+          transition: .5s;
        }
-        dd {
+        &:before {
-          line-height: 28px;
+          transform: scale(1);
-          h4 {
+          opacity: 1;
-            font-size: 28px;
-            color: #43abb6;
-            margin: 14px 0 24px;
-          }
        }
      }
-    }
+      &:last-child > div {
-    li:nth-child(1) {
+        border-right: 0;
-      border-right: 1px solid #43abb6;
-      dt {
-        background: url("https://res.fudou6.com/c/4/20160801/nbrdGFiczA1X2I=_115x115.png") no-repeat;
-      }
-    }
-    li:nth-child(2) {
-      border-right: 1px solid #43abb6;
-      dt {
-        background: url("https://res.fudou6.com/c/4/20160801/dgndGFiczA0X2I=_115x115.png") no-repeat;
-      }
-    }
-    li:nth-child(3) {
-      border-right: 1px solid #43abb6;
-      dt {
-        background: url("https://res.fudou6.com/c/4/20160801/p8edGFiczAzX2I=_115x115.png") no-repeat;
      }
-    }
-    li:nth-child(4) {
-      dt {
-        background: url("https://res.fudou6.com/c/4/20160801/6jpdGFiczAyX2I=_115x115.png") no-repeat;
-      }
-    }
-    li:hover {
-      color: #fff;
-      background: #43abb6;
      h4 {
-        color: #fff;
+        font-size: 28px;
+        color: #43abb6;
+        margin: 10px 0 20px;
      }
-    }
+      &:nth-child(1) > div {
-    li:nth-child(1):hover {
+        &:before {
-      @-webkit-keyframes changeOne {
+          background-position: -360px -120px;
-        0% {
-          opacity: 1;
-          background: url("https://res.fudou6.com/c/4/20160801/nbrdGFiczA1X2I=_115x115.png") no-repeat;
-        }
-        50% {
-          opacity: 0;
        }
-        100% {
+        &:after {
-          background: url("https://res.fudou6.com/c/4/20160801/u42dGFiczA1X2E=_115x115.png") no-repeat;
+          background-position: -360px 0px;
-          opacity: 1;
        }
      }
-      dt {
+      &:nth-child(2) > div {
-        animation-name: changeOne;
+        &:before {
-        animation-duration: 0.5s;
+          background-position: -240px -120px;
-        animation-fill-mode: forwards;
-      }
-    }
-    li:nth-child(2):hover {
-      @-webkit-keyframes changeTwo {
-        0% {
-          opacity: 1;
-          background: url("https://res.fudou6.com/c/4/20160801/dgndGFiczA0X2I=_115x115.png") no-repeat;
        }
-        50% {
+        &:after {
-          opacity: 0;
+          background-position: -240px 0px;
-        }
-        100% {
-          background: url("https://res.fudou6.com/c/4/20160801/n3ndGFiczA0X2E=_115x115.png") no-repeat;
-          opacity: 1;
        }
      }
-      dt {
+      &:nth-child(3) > div {
-        animation-name: changeTwo;
+        &:before {
-        animation-duration: 0.5s;
+          background-position: -120px -120px;
-        animation-fill-mode: forwards;
-      }
-    }
-    li:nth-child(3):hover {
-      @-webkit-keyframes changeThree {
-        0% {
-          opacity: 1;
-          background: url("https://res.fudou6.com/c/4/20160801/p8edGFiczAzX2I=_115x115.png") no-repeat;
        }
-        50% {
+        &:after {
-          opacity: 0;
+          background-position: -120px 0px;
        }
-        100% {
-          opacity: 1;
-          background: url("https://res.fudou6.com/c/4/20160801/za5dGFiczAzX2E=_115x115.png") no-repeat;
-        }
-      }
-      dt {
-        animation-name: changeThree;
-        animation-duration: 0.5s;
-        animation-fill-mode: forwards;
      }
-    }
+      &:nth-child(4) > div {
-    li:nth-child(4):hover {
+        &:before {
-      @-webkit-keyframes changeFour {
+          background-position: 0px -120px;
-        0% {
-          background: url("https://res.fudou6.com/c/4/20160801/6jpdGFiczAyX2I=_115x115.png") no-repeat;
        }
-        50% {
+        &:after {
-          opacity: 0;
+          background-position: 0px 0px;
-        }
-        100% {
-          opacity: 1;
-          background: url("https://res.fudou6.com/c/4/20160801/zsedGFiczAyX2E=_115x115.png") no-repeat;
        }
      }
-      dt {
+      &:hover {
-        animation-name: changeFour;
+        transition-delay: 0s;
-        animation-duration: 0.5s;
+        color: #fff;
-        animation-fill-mode: forwards;
+        background: #43abb6;
+        h4 {
+          color: #fff;
+        }
+        & > div {
+          &:before {
+            opacity: 0;
+            transform: scale(0);
+          }
+          &:after {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
      }
    }
  }
 }

--- a/routes/index.js
+++ b/routes/index.js
@@ -6,6 +6,7 @@ var product = require('./product');
 /* GET home page. */
 router.get('/', function (req, res) {
    res.render('index', {
+        navIndex:'active',
        styles: ['index'],
        scripts:[],
        character: [
@@ -81,12 +82,14 @@ router.get('/', function (req, res) {
 router.get('/about', function (req, res) {
    res.render('about', {
+        navAbout:'active',
        styles: ['about'],
    });
 });
 router.get('/project', function (req, res) {
    res.render('project', {
+        navProject:'active',
        styles: ['project'],
        scripts:['utils','project'],
    });
@@ -98,6 +101,7 @@ router.get('/project', function (req, res) {
 router.get('/products', function (req, res) {
    res.render('products', {
+        navProducts:'active',
        styles: ['products'],
        scripts:['utils','products'],
    });

--- a/routes/product.js
+++ b/routes/product.js
--- a/routes/product.js.map
+++ b/routes/product.js.map
--- a/routes/product.jsx
+++ b/routes/product.jsx
@@ -82,7 +82,7 @@ module.exports = function (req, res, next) {
        item.elements = JSON.parse(item.elements);
        Object.keys(item.elements).forEach(key=>{
-            console.log('%s\t%s\t%s', key, item.elements[key][0], item.elements[key][1]);
+            //console.log('%s\t%s\t%s', key, item.elements[key][0], item.elements[key][1]);
            item.elements[key] = item.elements[key][1];
        });
@@ -121,6 +121,7 @@ module.exports = function (req, res, next) {
        //console.log(item);
        res.render('product', {
+            navProducts:'active',
            styles:['product'],
            scripts:['utils','product'],
            ...item

--- a/views/layout.hbs
+++ b/views/layout.hbs
@@ -14,10 +14,10 @@
    <div class="container">
        <a class="logo" href="/"><img src="/images/logo.png" alt="logo"></a>
        <nav class="clear">
-            <span><a href="/">首页 / HOME</a></span>
+            <span><a href="/" class="{{navIndex}}">首页 / HOME</a></span>
-            <span><a href="/project">项目合作 / PROJECT</a></span>
+            <span><a href="/project" class="{{navProject}}">项目合作 / PROJECT</a></span>
-            <span><a href="/products">最新产品 / PRODUCT</a></span>
+            <span><a href="/products" class="{{navProducts}}">最新产品 / PRODUCT</a></span>
-            <span><a href="/about">关于我们 / ABOUT</a></span>
+            <span><a href="/about" class="{{navAbout}}">关于我们 / ABOUT</a></span>
        </nav>
    </div>
 </header>

--- a/views/product.hbs
+++ b/views/product.hbs
@@ -46,23 +46,21 @@
        <p>{{statusString}}</p>
    </div>
 </div>
-<div class="appointment">
+<!--<div class="appointment">-->
-    <h2 class="info-title">在线预约</h2>
+    <!--<h2 class="info-title">在线预约</h2>-->
-    <p>留下联系方式我们帮您第一时间抢占稀缺额度</p>
+    <!--<p>留下联系方式我们帮您第一时间抢占稀缺额度</p>-->
-    <form id="form">
+    <!--<form id="form">-->
-        <div>
+        <!--<div>-->
-            <input type="text" name="userName" placeholder="请填写您的姓名" />
+            <!--<input type="text" name="userName" placeholder="请填写您的姓名" />-->
-            <input type="text" name="userTel" placeholder="请填写手机号" maxlength="11"/>
+            <!--<input type="text" name="userTel" placeholder="请填写手机号" maxlength="11"/>-->
-            <input type="submit" value="提交"/>
+            <!--<input type="submit" value="提交"/>-->
-        </div>
+        <!--</div>-->
-        <div>
+        <!--<div>-->
-            <span class="errorName"></span>
+            <!--<span class="errorName"></span>-->
-            <span class="errorTel" ></span>
+            <!--<span class="errorTel" ></span>-->
-        </div>
+        <!--</div>-->
-    </form>
+    <!--</form>-->
+<!--</div>-->
-</div>
 <div class="detail">
    <h2 class="info-title">产品详情</h2>
    <table>

--- a/views/project.hbs
+++ b/views/project.hbs
@@ -64,40 +64,44 @@
 </div>
 <div class="hot-project-tabs clear">
    <ul class="clear">
-        <li class="fl">
+        <li>
-            <dl>
+            <div>
-                <dt></dt>
+                <h4>海量资金</h4>
-                <dd><h4>海量资金</h4></dd>
+                <p>
-                <dd>20多万资金方</dd>
+                    20多万资金方<br/>
-                <dd>3万亿资金，快速融资</dd>
+                    3万亿资金，快速融资
-            </dl>
+                </p>
+            </div>
        </li>
-        <li class="fl">
+        <li>
-            <dl>
+            <div>
-                <dt></dt>
+                <h4>安全可靠</h4>
-                <dd><h4>安全可靠</h4></dd>
+                <p>
-                <dd>以对项目质量的严格把控。</dd>
+                    以对项目质量的严格把控<br/>
-                <dd>和清晰的流程设计</dd>
+                    和清晰的流程设计<br/>
-                <dd>让合投更规范、高效</dd>
+                    让合投更规范、高效
-            </dl>
+                </p>
+            </div>
        </li>
-        <li class="fl">
+        <li>
-            <dl>
+            <div>
-                <dt></dt>
+                <h4>融资高效</h4>
-                <dd><h4>融资高效</h4></dd>
+                <p>
-                <dd>多个大型项目经验，</dd>
+                    多个大型项目经验<br/>
-                <dd>融资流程</dd>
+                    融资流程<br/>
-                <dd>简单\迅速\到账快捷</dd>
+                    简单\迅速\到账快捷
-            </dl>
+                </p>
+            </div>
        </li>
-        <li class="fl">
+        <li>
-            <dl>
+            <div>
-                <dt></dt>
+                <h4>专业服务</h4>
-                <dd><h4>专业服务</h4></dd>
+                <p>
-                <dd>专业的投资团队，</dd>
+                    专业的投资团队<br/>
-                <dd>全程免费的投融资指导，</dd>
+                    全程免费的投融资指导<br/>
-                <dd>精准的对接推荐</dd>
+                    精准的对接推荐
-            </dl>
+                </p>
+            </div>
        </li>
    </ul>
 </div>