Skip to content

W
www.fudou6.com
Commit c0b513fa authored by liaili's avatar liaili
Browse files
Options

ie8-layout

parent a5c901b6
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 937 additions and 538 deletions
public/javascripts/ie-css3.htc 0 → 100644
View file @ c0b513fa
This diff is collapsed.
public/javascripts/products.js
View file @ c0b513fa
...@@ -13,7 +13,7 @@ function fetch(query, panel) { ...@@ -13,7 +13,7 @@ function fetch(query, panel) {
if (items && items.length) { if (items && items.length) {
var html = items.map(function (item) { var html = items.map(function (item) {
return '<li data-id="' + item.id + '" class="product-item status-' + item.status + '">\n <i class="seal">' + (item.status == 11 && item.fundRaisedTarget - item.fundRaisedOver > 0 ? '<span>' + formatMoney(item.fundRaisedTarget - item.fundRaisedOver) + '</span>' : '') + '</i>\n <div class="clear">\n <div>\n <h2>' + item.itemShortTitle + '</h2>\n <h3>' + formatMoney(item.fundRaisedTarget) + '</h3>\n <div class="clear">\n <span>\n <p>' + item.commissionMaxDur + '</p>\n </span>\n <span>\n <p>' + formatMoney(item.minimumAmount) + '</p>\n </span>\n <span>\n <p>' + item.duration + '</p>\n </span>\n </div>\n </div>\n <div>\n <div>\n <h4>项目亮点</h4>\n <p>' + item.summary + '</p>\n </div>\n </div>\n </div>\n <i class="corner"></i>\n </li>'; return '<li data-id="' + item.id + '" class="product-item status-' + item.status + '">\n <i class="seal">' + (item.status == 11 && item.fundRaisedTarget - item.fundRaisedOver > 0 ? '<span>' + formatMoney(item.fundRaisedTarget - item.fundRaisedOver) + '</span>' : '') + '</i>\n <div class="clear main">\n <div class="main-left">\n <h2>' + item.itemShortTitle + '</h2>\n <h3>' + formatMoney(item.fundRaisedTarget) + '</h3>\n <div class="clear">\n <span class="main-left-01">\n <p>' + item.commissionMaxDur + '</p>\n </span>\n <span class="main-left-02">\n <p>' + formatMoney(item.minimumAmount) + '</p>\n </span>\n <span class="main-left-03">\n <p>' + item.duration + '</p>\n </span>\n </div>\n </div>\n <div class="main-right">\n <div>\n <h4>项目亮点</h4>\n <p>' + item.summary + '</p>\n </div>\n </div>\n </div>\n <i class="corner"></i>\n </li>';
}).join(''); }).join('');
$('.products', panel).html(html); $('.products', panel).html(html);
var pagination = []; var pagination = [];
......
public/javascripts/products.js.map
View file @ c0b513fa
This diff is collapsed.
public/javascripts/products.jsx
View file @ c0b513fa
...@@ -11,23 +11,23 @@ function fetch(query, panel) { ...@@ -11,23 +11,23 @@ function fetch(query, panel) {
(item.status == 11 && (item.fundRaisedTarget - item.fundRaisedOver > 0)) ? (item.status == 11 && (item.fundRaisedTarget - item.fundRaisedOver > 0)) ?
'<span>' + formatMoney(item.fundRaisedTarget - item.fundRaisedOver) + '</span>' : '' '<span>' + formatMoney(item.fundRaisedTarget - item.fundRaisedOver) + '</span>' : ''
}</i> }</i>
<div class="clear"> <div class="clear main">
<div> <div class="main-left">
<h2>${item.itemShortTitle}</h2> <h2>${item.itemShortTitle}</h2>
<h3>${formatMoney(item.fundRaisedTarget)}</h3> <h3>${formatMoney(item.fundRaisedTarget)}</h3>
<div class="clear"> <div class="clear">
<span> <span class="main-left-01">
<p>${item.commissionMaxDur}</p> <p>${item.commissionMaxDur}</p>
</span> </span>
<span> <span class="main-left-02">
<p>${formatMoney(item.minimumAmount)}</p> <p>${formatMoney(item.minimumAmount)}</p>
</span> </span>
<span> <span class="main-left-03">
<p>${item.duration}</p> <p>${item.duration}</p>
</span> </span>
</div> </div>
</div> </div>
<div> <div class="main-right">
<div> <div>
<h4>项目亮点</h4> <h4>项目亮点</h4>
<p>${item.summary}</p> <p>${item.summary}</p>
......
public/javascripts/products.min.js
View file @ c0b513fa
...@@ -21,7 +21,7 @@ function fetch(a, n) { ...@@ -21,7 +21,7 @@ function fetch(a, n) {
var s = i.items; var s = i.items;
if (s && s.length) { if (s && s.length) {
var r = s.map(function(a) { var r = s.map(function(a) {
return '<li data-id="' + a.id + '" class="product-item status-' + a.status + '">\n <i class="seal">' + (a.status == 11 && a.fundRaisedTarget - a.fundRaisedOver > 0 ? "<span>" + formatMoney(a.fundRaisedTarget - a.fundRaisedOver) + "</span>" : "") + '</i>\n <div class="clear">\n <div>\n <h2>' + a.itemShortTitle + "</h2>\n <h3>" + formatMoney(a.fundRaisedTarget) + '</h3>\n <div class="clear">\n <span>\n <p>' + a.commissionMaxDur + "</p>\n </span>\n <span>\n <p>" + formatMoney(a.minimumAmount) + "</p>\n </span>\n <span>\n <p>" + a.duration + "</p>\n </span>\n </div>\n </div>\n <div>\n <div>\n <h4>项目亮点</h4>\n <p>" + a.summary + '</p>\n </div>\n </div>\n </div>\n <i class="corner"></i>\n </li>'; return '<li data-id="' + a.id + '" class="product-item status-' + a.status + '">\n <i class="seal">' + (a.status == 11 && a.fundRaisedTarget - a.fundRaisedOver > 0 ? "<span>" + formatMoney(a.fundRaisedTarget - a.fundRaisedOver) + "</span>" : "") + '</i>\n <div class="clear main">\n <div class="main-left">\n <h2>' + a.itemShortTitle + "</h2>\n <h3>" + formatMoney(a.fundRaisedTarget) + '</h3>\n <div class="clear">\n <span class="main-left-01">\n <p>' + a.commissionMaxDur + '</p>\n </span>\n <span class="main-left-02">\n <p>' + formatMoney(a.minimumAmount) + '</p>\n </span>\n <span class="main-left-03">\n <p>' + a.duration + '</p>\n </span>\n </div>\n </div>\n <div class="main-right">\n <div>\n <h4>项目亮点</h4>\n <p>' + a.summary + '</p>\n </div>\n </div>\n </div>\n <i class="corner"></i>\n </li>';
}).join(""); }).join("");
$(".products", n).html(r); $(".products", n).html(r);
var c = []; var c = [];
......
public/javascripts/utils.js
View file @ c0b513fa
...@@ -148,7 +148,7 @@ var Tabs = function () { ...@@ -148,7 +148,7 @@ var Tabs = function () {
headers.push('<a class="tabs-headers-item" data-index="' + index + '" href="javascript:void(\'' + item + '\')">' + item + '</a>'); headers.push('<a class="tabs-headers-item" data-index="' + index + '" href="javascript:void(\'' + item + '\')">' + item + '</a>');
panels.push('<div class="tabs-panels-item" data-index="' + index + '"></div>'); panels.push('<div class="tabs-panels-item" data-index="' + index + '"></div>');
}); });
var html = '<div class="tabs">\n <header class="tabs-header">\n <div class="clear">\n ' + headers.join('') + '\n </div>\n </header>\n <section>\n ' + panels.join('') + '\n </section>\n </div>'; var html = '<div class="tabs">\n <div class="tabs-header">\n <div class="clear">\n ' + headers.join('') + '\n </div>\n </div>\n <div class="section">\n ' + panels.join('') + '\n </div>\n </div>';
this.element = $(html).appendTo(this.container); this.element = $(html).appendTo(this.container);
this.selectIndex(this.options.defaultIndex || 0); this.selectIndex(this.options.defaultIndex || 0);
......
public/javascripts/utils.js.map
View file @ c0b513fa
This diff is collapsed.
public/javascripts/utils.jsx
View file @ c0b513fa
...@@ -125,14 +125,14 @@ class Tabs { ...@@ -125,14 +125,14 @@ class Tabs {
panels.push(`<div class="tabs-panels-item" data-index="${index}"></div>`); panels.push(`<div class="tabs-panels-item" data-index="${index}"></div>`);
}); });
const html = `<div class="tabs"> const html = `<div class="tabs">
<header class="tabs-header"> <div class="tabs-header">
<div class="clear"> <div class="clear">
${headers.join('')} ${headers.join('')}
</div> </div>
</header> </div>
<section> <div class="section">
${panels.join('')} ${panels.join('')}
</section> </div>
</div>`; </div>`;
this.element = $(html).appendTo(this.container); this.element = $(html).appendTo(this.container);
......
public/javascripts/utils.min.js
View file @ c0b513fa
...@@ -175,7 +175,7 @@ var Tabs = function() { ...@@ -175,7 +175,7 @@ var Tabs = function() {
e.push('<a class="tabs-headers-item" data-index="' + a + '" href="javascript:void(\'' + n + "')\">" + n + "</a>"); e.push('<a class="tabs-headers-item" data-index="' + a + '" href="javascript:void(\'' + n + "')\">" + n + "</a>");
t.push('<div class="tabs-panels-item" data-index="' + a + '"></div>'); t.push('<div class="tabs-panels-item" data-index="' + a + '"></div>');
}); });
var a = '<div class="tabs">\n <header class="tabs-header">\n <div class="clear">\n ' + e.join("") + "\n </div>\n </header>\n <section>\n " + t.join("") + "\n </section>\n </div>"; var a = '<div class="tabs">\n <div class="tabs-header">\n <div class="clear">\n ' + e.join("") + '\n </div>\n </div>\n <div class="section">\n ' + t.join("") + "\n </div>\n </div>";
this.element = $(a).appendTo(this.container); this.element = $(a).appendTo(this.container);
this.selectIndex(this.options.defaultIndex || 0); this.selectIndex(this.options.defaultIndex || 0);
this.element.on("click", ".tabs-headers-item", function(e) { this.element.on("click", ".tabs-headers-item", function(e) {
......
public/stylesheets/index-ie8.css 0 → 100644
View file @ c0b513fa
/* .projects start */
.projects .section .section-left li:before {
content: '●';
width: 0;
position: absolute;
left: -20px;
font-size: 20px;
top: 0;
}
/* .projects end */
public/stylesheets/index-ie8.less 0 → 100644
View file @ c0b513fa
//IE8
/* .projects start */
.projects {
.section {
.section-left {
li:before {
content: '●';
width: 0;
width: 0;
position: absolute;
left: -20px;
font-size: 20px;
top: 0;
}
}
}
}
/* .projects end */
public/stylesheets/index.css
View file @ c0b513fa
This diff is collapsed.
public/stylesheets/index.less
View file @ c0b513fa
This diff is collapsed.
public/stylesheets/products-ie8.css 0 → 100644
View file @ c0b513fa
/*products start*/
.products li.status-31 .seal {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://res.fudou6.com/c/4/20160730/q9gaWNvbi15d2M=_236x236.png', sizingMethod='scale');
}
.products li.status-31 .corner {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://res.fudou6.com/c/4/20160730/52mc3RhdHVzXzIz_125x158.png', sizingMethod='scale');
}
/*products end*/
* {
behavior: url(/public/javascripts/ie-css3.htc);
}
public/stylesheets/products-ie8.less 0 → 100644
View file @ c0b513fa
//IE8
/*products start*/
.products {
li.status-31 {
.seal {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://res.fudou6.com/c/4/20160730/q9gaWNvbi15d2M=_236x236.png', sizingMethod='scale');
}
.corner {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://res.fudou6.com/c/4/20160730/52mc3RhdHVzXzIz_125x158.png', sizingMethod='scale');
}
}
}
/*products end*/
* {
behavior: url(/public/javascripts/ie-css3.htc);
}
\ No newline at end of file
public/stylesheets/products.css
View file @ c0b513fa
...@@ -9,16 +9,16 @@ ...@@ -9,16 +9,16 @@
font-size: 32px; font-size: 32px;
border: none !important; border: none !important;
} }
.tabs > header { .tabs .tabs-header {
background-color: #2d2f33; background-color: #2d2f33;
margin-bottom: 25px; margin-bottom: 25px;
} }
.tabs > header > div { .tabs .tabs-header div {
width: 1150px; width: 1150px;
margin: 0 auto; margin: 0 auto;
line-height: 1; line-height: 1;
} }
.tabs > header > div > a { .tabs .tabs-header div a {
display: block; display: block;
float: left; float: left;
padding: 20px 60px; padding: 20px 60px;
...@@ -26,19 +26,19 @@ ...@@ -26,19 +26,19 @@
font-weight: 300; font-weight: 300;
color: #fff; color: #fff;
} }
.tabs > header > div > a.active, .tabs .tabs-header div a.active,
.tabs > header > div > a:hover { .tabs .tabs-header div a:hover {
background-color: #ff4a4a; background-color: #ff4a4a;
} }
.tabs > section { .tabs .section {
min-height: 500px; min-height: 500px;
} }
.tabs > section > div { .tabs .section .tabs-panels-item {
width: 1150px; width: 1150px;
margin: 0 auto; margin: 0 auto;
display: none; display: none;
} }
.tabs > section > div.active { .tabs .section .tabs-panels-item.active {
display: block; display: block;
} }
.products li { .products li {
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
border: 1px solid #939393; border: 1px solid #939393;
margin-bottom: 20px; margin-bottom: 20px;
} }
.products li > .seal { .products li .seal {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 45px; left: 45px;
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
height: 150px; height: 150px;
margin-top: -75px; margin-top: -75px;
} }
.products li > .seal > span { .products li .seal span {
position: absolute; position: absolute;
top: 50%; top: 50%;
width: 100%; width: 100%;
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
font-style: normal; font-style: normal;
color: #ff4a4a; color: #ff4a4a;
} }
.products li > .corner { .products li .corner {
position: absolute; position: absolute;
top: 0; top: 0;
left: auto; left: auto;
...@@ -83,21 +83,22 @@ ...@@ -83,21 +83,22 @@
width: 80px; width: 80px;
height: 96px; height: 96px;
} }
.products li > div { .products li .main {
border-left: 8px solid transparent; border-left: 8px solid transparent;
padding: 0 60px 0 230px; padding: 0 60px 0 230px;
transition: border .5s; transition: border .5s;
} }
.products li > div > div { .products li .main .main-left,
.products li .main .main-right {
float: left; float: left;
color: #2d2f33; color: #2d2f33;
position: relative; position: relative;
} }
.products li > div > div:first-child { .products li .main .main-left {
width: 60%; width: 60%;
padding: 40px 0; padding: 40px 0;
} }
.products li > div > div:first-child:after { .products li .main .main-left:after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -108,108 +109,108 @@ ...@@ -108,108 +109,108 @@
height: 100%; height: 100%;
border-right: 1px solid #939393; border-right: 1px solid #939393;
} }
.products li > div > div:first-child h2 { .products li .main .main-left h2 {
font-size: 18px; font-size: 18px;
} }
.products li > div > div:first-child h3 { .products li .main .main-left h3 {
color: #ff4a4a; color: #ff4a4a;
font-size: 16px; font-size: 16px;
margin: 10px 0; margin: 10px 0;
} }
.products li > div > div:first-child h3:before { .products li .main .main-left h3:before {
margin-right: 1em; margin-right: 1em;
content: '总额度'; content: '总额度';
color: #2d2f33; color: #2d2f33;
} }
.products li > div > div:first-child > div span { .products li .main .main-left div span {
float: left; float: left;
width: 33%; width: 33%;
font-size: 16px; font-size: 16px;
line-height: 50px; line-height: 50px;
} }
.products li > div > div:first-child > div span > p { .products li .main .main-left div span p {
float: left; float: left;
text-align: center; text-align: center;
} }
.products li > div > div:first-child > div span > p:after { .products li .main .main-left div span p:after {
font-size: 16px; font-size: 16px;
color: #848484; color: #848484;
line-height: 16px; line-height: 16px;
display: block; display: block;
} }
.products li > div > div:first-child > div span:nth-child(1) { .products li .main .main-left div span.main-left-01 {
font-size: 30px; font-size: 30px;
color: #ff4a4a; color: #ff4a4a;
} }
.products li > div > div:first-child > div span:nth-child(1) > p:after { .products li .main .main-left div span.main-left-01 p:after {
content: '预期收益'; content: '预期收益';
} }
.products li > div > div:first-child > div span:nth-child(2) > p:after { .products li .main .main-left div span.main-left-02 p:after {
content: '起投(万)'; content: '起投(万)';
} }
.products li > div > div:first-child > div span:nth-child(3) > p:after { .products li .main .main-left div span.main-left-03 p:after {
content: '期限'; content: '期限';
} }
.products li > div > div:last-child { .products li .main .main-right {
width: 40%; width: 40%;
} }
.products li > div > div:last-child > div { .products li .main .main-right div {
padding: 20px 30px; padding: 20px 30px;
} }
.products li > div > div:last-child h4 { .products li .main .main-right h4 {
color: #000; color: #000;
font-size: 16px; font-size: 16px;
border-left: 5px solid #2d2f33; border-left: 5px solid #2d2f33;
padding-left: .5em; padding-left: .5em;
line-height: 1; line-height: 1;
} }
.products li > div > div:last-child p { .products li .main .main-right p {
font-size: 14px; font-size: 14px;
margin-top: 15px; margin-top: 15px;
} }
.products li.status-11 > .seal { .products li.status-11 .seal {
background-image: url('https://res.fudou6.com/c/4/20160730/yetaWNvbi1zeWVk_235x235.png'); background-image: url('https://res.fudou6.com/c/4/20160730/yetaWNvbi1zeWVk_235x235.png');
} }
.products li.status-11 > .corner { .products li.status-11 .corner {
background-image: url('https://res.fudou6.com/c/4/20160730/vjbc3RhdHVzXzAz_125x158.png'); background-image: url('https://res.fudou6.com/c/4/20160730/vjbc3RhdHVzXzAz_125x158.png');
} }
.products li.status-11:hover > div { .products li.status-11:hover .main {
border-left-color: #ff4a4a; border-left-color: #ff4a4a;
} }
.products li.status-5 > .seal { .products li.status-5 .seal {
background-image: url('https://res.fudou6.com/c/4/20160730/9m3aWNvbi13YWl0_236x236.png'); background-image: url('https://res.fudou6.com/c/4/20160730/9m3aWNvbi13YWl0_236x236.png');
} }
.products li.status-5 > .corner { .products li.status-5 .corner {
background-image: url('https://res.fudou6.com/c/4/20160730/37nc3RhdHVzXzEw_125x158.png'); background-image: url('https://res.fudou6.com/c/4/20160730/37nc3RhdHVzXzEw_125x158.png');
} }
.products li.status-5:hover > div { .products li.status-5:hover .main {
border-left-color: #000; border-left-color: #000;
} }
.products li.status-17 > .seal { .products li.status-17 .seal {
background-image: url('https://res.fudou6.com/c/4/20160730/9w0aWNvbi1wYXVzZQ==_236x236.png'); background-image: url('https://res.fudou6.com/c/4/20160730/9w0aWNvbi1wYXVzZQ==_236x236.png');
} }
.products li.status-17 > .corner { .products li.status-17 .corner {
background-image: url('https://res.fudou6.com/c/4/20160730/g33c3RhdHVzXzE1_125x158.png'); background-image: url('https://res.fudou6.com/c/4/20160730/g33c3RhdHVzXzE1_125x158.png');
} }
.products li.status-17:hover > div { .products li.status-17:hover .main {
border-left-color: #43abb6; border-left-color: #43abb6;
} }
.products li.status-21 > .seal { .products li.status-21 .seal {
background-image: url('https://res.fudou6.com/c/4/20160730/9r8aWNvbi15Zno=_236x236.png'); background-image: url('https://res.fudou6.com/c/4/20160730/9r8aWNvbi15Zno=_236x236.png');
} }
.products li.status-21 > .corner { .products li.status-21 .corner {
background-image: url('https://res.fudou6.com/c/4/20160730/cwnc3RhdHVzXzE5_125x158.png'); background-image: url('https://res.fudou6.com/c/4/20160730/cwnc3RhdHVzXzE5_125x158.png');
} }
.products li.status-21:hover > div { .products li.status-21:hover .main {
border-left-color: #7a7b7c; border-left-color: #7a7b7c;
} }
.products li.status-31 > .seal { .products li.status-31 .seal {
background-image: url('https://res.fudou6.com/c/4/20160730/q9gaWNvbi15d2M=_236x236.png'); background-image: url('https://res.fudou6.com/c/4/20160730/q9gaWNvbi15d2M=_236x236.png');
} }
.products li.status-31 > .corner { .products li.status-31 .corner {
background-image: url('https://res.fudou6.com/c/4/20160730/52mc3RhdHVzXzIz_125x158.png'); background-image: url('https://res.fudou6.com/c/4/20160730/52mc3RhdHVzXzIz_125x158.png');
} }
.products li.status-31:hover > div { .products li.status-31:hover .main {
border-left-color: #c5c5c5; border-left-color: #c5c5c5;
} }
.products .product-item { .products .product-item {
......
public/stylesheets/products.less
View file @ c0b513fa
...@@ -32,14 +32,14 @@ ...@@ -32,14 +32,14 @@
border: none !important; border: none !important;
} }
& > header { .tabs-header {
background-color: @color; background-color: @color;
margin-bottom: 25px; margin-bottom: 25px;
& > div { div {
width: @container-width; width: @container-width;
margin: 0 auto; margin: 0 auto;
line-height: 1; line-height: 1;
& > a { a {
display: block; display: block;
float: left; float: left;
padding: 20px 60px; padding: 20px 60px;
...@@ -53,9 +53,9 @@ ...@@ -53,9 +53,9 @@
} }
} }
} }
& > section { .section {
min-height: 500px; min-height: 500px;
& > div { .tabs-panels-item {
width: @container-width; width: @container-width;
margin: 0 auto; margin: 0 auto;
display: none; display: none;
...@@ -73,11 +73,11 @@ ...@@ -73,11 +73,11 @@
position: relative; position: relative;
border: 1px solid #939393; border: 1px solid #939393;
margin-bottom: 20px; margin-bottom: 20px;
& > .seal { .seal {
.absolute(50%, 45px); .absolute(50%, 45px);
.icon(@seal-size, @seal-size); .icon(@seal-size, @seal-size);
margin-top: -@seal-size/2; margin-top: -@seal-size/2;
& > span { span {
position: absolute; position: absolute;
top: 50%; top: 50%;
width: 100%; width: 100%;
...@@ -90,112 +90,112 @@ ...@@ -90,112 +90,112 @@
color: @highlightColor; color: @highlightColor;
} }
} }
& > .corner { .corner {
.absolute(0, auto, 0); .absolute(0, auto, 0);
.icon(@corner-width, @corner-height); .icon(@corner-width, @corner-height);
} }
& > div { .main {
border-left: 8px solid transparent; border-left: 8px solid transparent;
padding: 0 60px 0 230px; padding: 0 60px 0 230px;
transition: border .5s; transition: border .5s;
& > div { .main-left,
.main-right {
float: left; float: left;
//min-height: 300px; //min-height: 300px;
color: @color; color: @color;
position: relative; position: relative;
&:first-child { }
width: 60%; .main-left {
padding: 40px 0; width: 60%;
&:after { padding: 40px 0;
content: ''; &:after {
.absolute(0, 100%, 0, 0); content: '';
width: 0; .absolute(0, 100%, 0, 0);
height: 100%; width: 0;
border-right: 1px solid #939393; height: 100%;
} border-right: 1px solid #939393;
h2 { }
font-size: 18px; h2 {
font-size: 18px;
}
h3 {
color: @highlightColor;
font-size: 16px;
margin: 10px 0;
&:before {
margin-right: 1em;
content: '总额度';
color: @color;
} }
h3 { }
color: @highlightColor; div {
span {
float: left;
width: 33%;
//text-align: center;
font-size: 16px; font-size: 16px;
margin: 10px 0; line-height: 50px;
&:before { p {
margin-right: 1em;
content: '总额度';
color: @color;
}
}
& > div {
span {
float: left; float: left;
width: 33%; text-align: center;
//text-align: center; }
p:after {
font-size: 16px; font-size: 16px;
line-height: 50px; color: #848484;
& > p { line-height: 16px;
float: left; display: block;
text-align: center; }
} &.main-left-01 {
& > p:after { font-size: 30px;
font-size: 16px; color: @highlightColor;
color: #848484; p:after {
line-height: 16px; content: '预期收益';
display: block;
}
&:nth-child(1) {
font-size: 30px;
color: @highlightColor;
& > p:after {
content: '预期收益';
}
} }
&:nth-child(2) { }
& > p:after { &.main-left-02 {
content: '起投(万)'; p:after {
} content: '起投(万)';
} }
&:nth-child(3) { }
& > p:after { &.main-left-03 {
content: '期限'; p:after {
} content: '期限';
} }
} }
} }
} }
&:last-child { }
width: 40%; .main-right {
& > div { width: 40%;
padding: 20px 30px; div {
} padding: 20px 30px;
h4 { }
color: #000; h4 {
font-size: 16px; color: #000;
border-left: 5px solid @color; font-size: 16px;
padding-left: .5em; border-left: 5px solid @color;
line-height: 1; padding-left: .5em;
} line-height: 1;
p { }
font-size: 14px; p {
margin-top: 15px; font-size: 14px;
} margin-top: 15px;
} }
} }
} }
.status(@index, @seal, @corner, @color) { .status(@index, @seal, @corner, @color) {
&.status-@{index} { &.status-@{index} {
& > .seal { .seal {
background-image: url(@seal); background-image: url(@seal);
} }
& > .corner { .corner {
background-image: url(@corner); background-image: url(@corner);
} }
&:hover { &:hover {
& > div { .main {
border-left-color: @color; border-left-color: @color;
} }
} }
......
public/stylesheets/project-ie8.css 0 → 100644
View file @ c0b513fa
/* .hot-project-introducer start*/
.hot-project-introducer .subtabs li:before {
content: '●';
width: 0px;
height: 0px;
color: #bb342e;
}
/* .hot-project-introducer end*/
public/stylesheets/project-ie8.less 0 → 100644
View file @ c0b513fa
//IE8
/* .hot-project-introducer start*/
.hot-project-introducer {
.subtabs {
li:before {
content: '●';
width: 0px;
height: 0px;
color: #bb342e;
}
}
}
/* .hot-project-introducer end*/
public/stylesheets/project.css
View file @ c0b513fa
...@@ -24,10 +24,10 @@ ...@@ -24,10 +24,10 @@
padding: 0 0 60px 0; padding: 0 0 60px 0;
margin: 0 auto; margin: 0 auto;
} }
.hot-project-introducer > ul { .hot-project-introducer .subtabs {
height: 180px; height: 180px;
} }
.hot-project-introducer > ul li { .hot-project-introducer .subtabs li {
float: left; float: left;
width: 25%; width: 25%;
font-size: 18px; font-size: 18px;
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
.hot-project-introducer > ul li:before { .hot-project-introducer .subtabs li:before {
content: ''; content: '';
display: inline-block; display: inline-block;
position: relative; position: relative;
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
border-radius: 50%; border-radius: 50%;
background: #bb342e; background: #bb342e;
} }
.hot-project-introducer > ul li b { .hot-project-introducer .subtabs li b {
display: inline-block; display: inline-block;
position: relative; position: relative;
top: 20px; top: 20px;
...@@ -56,19 +56,19 @@ ...@@ -56,19 +56,19 @@
margin-right: 6px; margin-right: 6px;
background: url("https://res.fudou6.com/c/4/20160801/4u3OC5waWNfaGQ=_431x90.jpg") no-repeat -31px -21px; background: url("https://res.fudou6.com/c/4/20160801/4u3OC5waWNfaGQ=_431x90.jpg") no-repeat -31px -21px;
} }
.hot-project-introducer > ul li:nth-child(2) > b { .hot-project-introducer .subtabs li.subtabs-second b {
background-position: -150px -21px; background-position: -150px -21px;
} }
.hot-project-introducer > ul li:nth-child(3) > b { .hot-project-introducer .subtabs li.subtabs-thrid b {
background-position: -265px -22px; background-position: -265px -22px;
} }
.hot-project-introducer > ul li:nth-child(4) > b { .hot-project-introducer .subtabs li.subtabs-fourth b {
background-position: -363px -21px; background-position: -363px -21px;
} }
.hot-project-introducer > hr.line-separate { .hot-project-introducer hr.line-separate {
width: 100%; width: 100%;
} }
.hot-project-introducer > hr.line-separate:after { .hot-project-introducer hr.line-separate:after {
background: #01a9dd; background: #01a9dd;
} }
.hot-project-introducer .introducer { .hot-project-introducer .introducer {
...@@ -147,30 +147,30 @@ ...@@ -147,30 +147,30 @@
padding-bottom: 118px; padding-bottom: 118px;
position: relative; position: relative;
} }
.hot-project-address .hot-project-address-box > div:nth-child(1) { .hot-project-address .hot-project-address-box .title {
position: absolute; position: absolute;
color: #fff; color: #fff;
top: 40px; top: 40px;
left: -60px; left: -60px;
} }
.hot-project-address .hot-project-address-box > div:nth-child(1) h2 { .hot-project-address .hot-project-address-box .title h2 {
font-size: 32px; font-size: 32px;
font-weight: bold; font-weight: bold;
line-height: 42px; line-height: 42px;
} }
.hot-project-address .hot-project-address-box > div:nth-child(1) p { .hot-project-address .hot-project-address-box .title p {
font-size: 18px; font-size: 18px;
line-height: 53px; line-height: 53px;
} }
.hot-project-address .hot-project-address-box > div:nth-child(2) { .hot-project-address .hot-project-address-box .address-list {
width: 100%; width: 100%;
position: relative; position: relative;
left: -80px; left: -80px;
} }
.hot-project-address .hot-project-address-box > div:nth-child(2) img { .hot-project-address .hot-project-address-box .address-list img {
width: 100%; width: 100%;
} }
.hot-project-address .hot-project-address-box > div:nth-child(2) a { .hot-project-address .hot-project-address-box .address-list a {
width: 120px; width: 120px;
height: 40px; height: 40px;
text-align: center; text-align: center;
...@@ -184,32 +184,32 @@ ...@@ -184,32 +184,32 @@
right: -126px; right: -126px;
z-index: 3; z-index: 3;
} }
.hot-project-address .hot-project-address-box > div:nth-child(2) a:hover { .hot-project-address .hot-project-address-box .address-list a:hover {
background: #000; background: #000;
color: #fff; color: #fff;
} }
.hot-project-address .hot-project-address-box > div:nth-child(2) a:nth-child(2) { .hot-project-address .hot-project-address-box .address-list a.address01 {
top: 4%; top: 4%;
} }
.hot-project-address .hot-project-address-box > div:nth-child(2) a:nth-child(3) { .hot-project-address .hot-project-address-box .address-list a.address02 {
top: 24%; top: 24%;
} }
.hot-project-address .hot-project-address-box > div:nth-child(2) a:nth-child(4) { .hot-project-address .hot-project-address-box .address-list a.address03 {
top: 39%; top: 39%;
} }
.hot-project-address .hot-project-address-box > div:nth-child(2) a:nth-child(5) { .hot-project-address .hot-project-address-box .address-list a.address04 {
top: 57%; top: 57%;
} }
.hot-project-address .hot-project-address-box > div:nth-child(2) a:nth-child(6) { .hot-project-address .hot-project-address-box .address-list a.address05 {
top: 66%; top: 66%;
} }
.hot-project-address .hot-project-address-box > div:nth-child(2) a:nth-child(7) { .hot-project-address .hot-project-address-box .address-list a.address06 {
top: 75%; top: 75%;
} }
.hot-project-address .hot-project-address-box > div:nth-child(2) a:nth-child(8) { .hot-project-address .hot-project-address-box .address-list a.address07 {
top: 84%; top: 84%;
} }
.hot-project-address .hot-project-address-box > div:nth-child(2) a:nth-child(9) { .hot-project-address .hot-project-address-box .address-list a.address08 {
top: 93%; top: 93%;
} }
/* .hot-project-address end */ /* .hot-project-address end */
......
public/stylesheets/project.less
View file @ c0b513fa
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
.hot-project-introducer { .hot-project-introducer {
padding: 0 0 60px 0; padding: 0 0 60px 0;
margin: 0 auto; margin: 0 auto;
& > ul { .subtabs {
height: 180px; height: 180px;
li { li {
float: left; float: left;
...@@ -60,18 +60,18 @@ ...@@ -60,18 +60,18 @@
background: url("https://res.fudou6.com/c/4/20160801/4u3OC5waWNfaGQ=_431x90.jpg") no-repeat -31px -21px; background: url("https://res.fudou6.com/c/4/20160801/4u3OC5waWNfaGQ=_431x90.jpg") no-repeat -31px -21px;
} }
} }
li:nth-child(2) > b { li.subtabs-second b {
background-position: -150px -21px; background-position: -150px -21px;
} }
li:nth-child(3) > b { li.subtabs-thrid b {
background-position: -265px -22px; background-position: -265px -22px;
} }
li:nth-child(4) > b { li.subtabs-fourth b {
background-position: -363px -21px; background-position: -363px -21px;
} }
} }
& > hr.line-separate { hr.line-separate {
width: 100%; width: 100%;
&:after { &:after {
background: #01a9dd; background: #01a9dd;
...@@ -157,8 +157,7 @@ ...@@ -157,8 +157,7 @@
padding-top: 118px; padding-top: 118px;
padding-bottom: 118px; padding-bottom: 118px;
position: relative; position: relative;
& > div { .title {
&:nth-child(1) {
position: absolute; position: absolute;
color: #fff; color: #fff;
top: 40px; top: 40px;
...@@ -173,7 +172,7 @@ ...@@ -173,7 +172,7 @@
line-height: 53px; line-height: 53px;
} }
} }
&:nth-child(2) { .address-list {
width: 100%; width: 100%;
position: relative; position: relative;
left: -80px; left: -80px;
...@@ -197,33 +196,33 @@ ...@@ -197,33 +196,33 @@
background: #000; background: #000;
color: #fff; color: #fff;
} }
&:nth-child(2) { &.address01 {
top: 4%; top: 4%;
} }
&:nth-child(3) { &.address02 {
top: 24%; top: 24%;
} }
&:nth-child(4) { &.address03 {
top: 39%; top: 39%;
} }
&:nth-child(5) { &.address04 {
top: 57%; top: 57%;
} }
&:nth-child(6) { &.address05 {
top: 66%; top: 66%;
} }
&:nth-child(7) { &.address06 {
top: 75%; top: 75%;
} }
&:nth-child(8) { &.address07 {
top: 84%; top: 84%;
} }
&:nth-child(9) { &.address08 {
top: 93%; top: 93%;
} }
} }
} }
}
} }
} }
......
routes/index.js
View file @ c0b513fa
...@@ -47,35 +47,40 @@ router.get('/', function (req, res) { ...@@ -47,35 +47,40 @@ router.get('/', function (req, res) {
raiseTime: '28', raiseTime: '28',
raiseFunds: '4', raiseFunds: '4',
maxProfits: '8.5%', maxProfits: '8.5%',
link: '/products/20010' link: '/products/20010',
className: 'products-image-large'
}, { }, {
title: '中电投先融-天津市级政信', title: '中电投先融-天津市级政信',
img: 'http://res.fudou6.com/c/4/20160730/m3gMDQxYzBjYw==_1000x600.jpg', img: 'http://res.fudou6.com/c/4/20160730/m3gMDQxYzBjYw==_1000x600.jpg',
raiseTime: '28', raiseTime: '28',
raiseFunds: '5', raiseFunds: '5',
maxProfits: '8.3%', maxProfits: '8.3%',
link: '/products/20011' link: '/products/20011',
className: 'products-image-large'
}, { }, {
title: '中电投先融-锐金1-2号', title: '中电投先融-锐金1-2号',
img: 'http://res.fudou6.com/c/4/20160730/eedZmNmYmIwOA==_600x375.jpg', img: 'http://res.fudou6.com/c/4/20160730/eedZmNmYmIwOA==_600x375.jpg',
raiseTime: '21', raiseTime: '21',
raiseFunds: '2', raiseFunds: '2',
maxProfits: '8.7%', maxProfits: '8.7%',
link: '/products/20012' link: '/products/20012',
className: 'products-image-small'
}, { }, {
title: '金元南通新沿海1号', title: '金元南通新沿海1号',
img: 'http://res.fudou6.com/c/4/20160730/y3sNWNlN2NmOA==_1000x600.jpg', img: 'http://res.fudou6.com/c/4/20160730/y3sNWNlN2NmOA==_1000x600.jpg',
raiseTime: '20', raiseTime: '20',
raiseFunds: '2', raiseFunds: '2',
maxProfits: '8.5%', maxProfits: '8.5%',
link: '/products/20008' link: '/products/20008',
className: 'products-image-small'
}, { }, {
title: '国信证券<br/>巴中市高明新区壁州大道', title: '国信证券<br/>巴中市高明新区壁州大道',
img: 'http://res.fudou6.com/c/4/20160730/pdeMzhiZTc4ZA==_1000x600.jpg', img: 'http://res.fudou6.com/c/4/20160730/pdeMzhiZTc4ZA==_1000x600.jpg',
raiseTime: '52', raiseTime: '52',
raiseFunds: '1', raiseFunds: '1',
maxProfits: '10.6%', maxProfits: '10.6%',
link: '/products/20013' link: '/products/20013',
className: 'products-image-small last-one'
}, },
] ]
}); });
......
views/index.hbs
View file @ c0b513fa
...@@ -53,11 +53,11 @@ ...@@ -53,11 +53,11 @@
<ul class="clear"> <ul class="clear">
{{#each character}} {{#each character}}
<li> <li>
<div> <div class="projects-count">
<h3>{{this.sum}}</h3> <h3>{{this.sum}}</h3>
<h4>{{this.text}}</h4> <h4>{{this.text}}</h4>
</div> </div>
<div> <div class="projects-content">
<img src="{{this.img}}"/> <img src="{{this.img}}"/>
<h3>{{this.c1}}</h3> <h3>{{this.c1}}</h3>
<h4>{{this.c2}}</h4> <h4>{{this.c2}}</h4>
...@@ -67,51 +67,51 @@ ...@@ -67,51 +67,51 @@
</ul> </ul>
</div> </div>
<div class="projects"> <div class="projects">
<header class="clear"> <div class="clear projects-header">
<div> <div class="project-header-left">
<div> <div>
<a class="logo"></a> <a class="logo"></a>
</div> </div>
</div> </div>
<div> <div class="project-header-right">
<div> <div>
<h3><a href="/project" target="_blank">推荐优质项目 领取高额介绍费</a></h3> <h3><a href="/project" target="_blank">推荐优质项目 领取高额介绍费</a></h3>
</div> </div>
</div> </div>
</header> </div>
<section class="clear"> <div class="clear section">
<div> <ul class="section-left">
<p> <li>
精选稀缺产品<br/> 精选稀缺产品<br/>
非区非县，市级资产端一手政信 非区非县，市级资产端一手政信
</p> </li>
<p> <li>
尽享高额佣金<br/> 尽享高额佣金<br/>
远高市场佣金比例的返佣制度 远高市场佣金比例的返佣制度
</p> </li>
<p> <li>
完善风控体系<br/> 完善风控体系<br/>
原招商银行风控团队层层把关 原招商银行风控团队层层把关
</p> </li>
<p> <li>
佣金快速结算<br/> 佣金快速结算<br/>
项目成立 T+0 ，帮您快速结佣 项目成立 T+0 ，帮您快速结佣
</p> </li>
</div> </ul>
<div> <div class="section-right">
<div class="computer"></div> <div class="computer"></div>
</div> </div>
</section> </div>
</div> </div>
<div class="products"> <div class="products">
<ul class="clear"> <ul class="clear">
{{#each products}} {{#each products}}
<li class="clear"> <li class="clear {{this.className}}">
<div style="background-image:url({{this.img}})"></div> <div style="background-image:url({{this.img}})" class="products-image"></div>
<div> <div class="products-detail">
<h3>{{{this.title}}}</h3> <h3>{{{this.title}}}</h3>
<hr/> <hr class="line-separate"/>
<div class="clear"> <div class="clear products-data">
<span> <span>
<strong>{{this.raiseTime}}</strong>天<br/>募集时间 <strong>{{this.raiseTime}}</strong>天<br/>募集时间
</span> </span>
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
<strong>{{this.maxProfits}}</strong><br/>客户收益 <strong>{{this.maxProfits}}</strong><br/>客户收益
</span> </span>
</div> </div>
<div> <div class="products-link">
<a href="{{this.link}}">查看详情 &gt;</a> <a href="{{this.link}}">查看详情 &gt;</a>
</div> </div>
</div> </div>
......
views/layout.hbs
View file @ c0b513fa
...@@ -19,9 +19,16 @@ ...@@ -19,9 +19,16 @@
<!--[if lte IE 10]> <!--[if lte IE 10]>
<script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script> <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]--> <![endif]-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<link rel="stylesheet" href="/stylesheets/index-ie8.css"/>
<link rel="stylesheet" href="/stylesheets/project-ie8.css"/>
<link rel="stylesheet" href="/stylesheets/products-ie8.css"/>
<![endif]-->
</head> </head>
<body> <body>
<header id="header"> <div id="header">
<div class="container"> <div class="container">
<a class="logo" href="/"><img src="/images/logo.png" alt="logo"></a> <a class="logo" href="/"><img src="/images/logo.png" alt="logo"></a>
<nav class="clear"> <nav class="clear">
...@@ -31,18 +38,18 @@ ...@@ -31,18 +38,18 @@
<span><a href="/about" class="{{navAbout}}">关于我们 / ABOUT</a></span> <span><a href="/about" class="{{navAbout}}">关于我们 / ABOUT</a></span>
</nav> </nav>
</div> </div>
</header> </div>
<section id="container"> <div id="container">
{{{body}}} {{{body}}}
</section> </div>
<footer id="footer"> <div id="footer">
<h3>全国客服热线 9:30-18:30</h3> <h3>全国客服热线 9:30-18:30</h3>
<h2>400-879-9900</h2> <h2>400-879-9900</h2>
<!--<hr class="line-separate"/>--> <!--<hr class="line-separate"/>-->
<p class="copyright">&copy;2016 <span>shuniu</span> All Right Reserved&copy;2014-2015 杭州枢纽科技有限公司 版权所有</p> <p class="copyright">&copy;2016 <span>shuniu</span> All Right Reserved&copy;2014-2015 杭州枢纽科技有限公司 版权所有</p>
<address>浙江省杭州市余杭区良睦路1288号梦想小镇5-305 E-mail: <a href="mailto:hr@shuniu.com">hr@shuniu.com</a></address> <address>浙江省杭州市余杭区良睦路1288号梦想小镇5-305 E-mail: <a href="mailto:hr@shuniu.com">hr@shuniu.com</a></address>
<address>上海市浦东新区福山路458号同盛大厦1808室</address> <address>上海市浦东新区福山路458号同盛大厦1808室</address>
</footer> </div>
<script src="/javascripts/jquery-1.8.3.min.js"></script> <script src="/javascripts/jquery-1.8.3.min.js"></script>
{{#if env}} {{#if env}}
{{#each scripts}} {{#each scripts}}
......
views/project.hbs
View file @ c0b513fa
...@@ -3,20 +3,20 @@ ...@@ -3,20 +3,20 @@
<p>枢纽科技旗下专为地方性项目或企业提供有保障的融资渠道、合理对接资金需求的互联网平台，拥有数个大型项目资金问题解决方案</p> <p>枢纽科技旗下专为地方性项目或企业提供有保障的融资渠道、合理对接资金需求的互联网平台，拥有数个大型项目资金问题解决方案</p>
</div> </div>
<div class="hot-project-introducer"> <div class="hot-project-introducer">
<ul class="clear"> <ul class="clear subtabs">
<li> <li class="subtabs-first">
<b></b> <b></b>
<span>债权融资</span> <span>债权融资</span>
</li> </li>
<li> <li class="subtabs-second">
<b></b> <b></b>
<span>项目融资</span> <span>项目融资</span>
</li> </li>
<li> <li class="subtabs-thrid">
<b></b> <b></b>
<span>融资租赁</span> <span>融资租赁</span>
</li> </li>
<li> <li class="subtabs-fourth">
<b></b> <b></b>
<span>扩展融资渠道</span> <span>扩展融资渠道</span>
</li> </li>
...@@ -41,20 +41,20 @@ ...@@ -41,20 +41,20 @@
</div> </div>
<div class="hot-project-address"> <div class="hot-project-address">
<div class="hot-project-address-box"> <div class="hot-project-address-box">
<div> <div class="title">
<h2>热点项目</h2> <h2>热点项目</h2>
<p>※国内各地在进行项目分布图</p> <p>※国内各地在进行项目分布图</p>
</div> </div>
<div> <div class="address-list">
<img src="https://res.fudou6.com/c/4/20160730/g3zbWFw_1075x722.png" alt="map"> <img src="https://res.fudou6.com/c/4/20160730/g3zbWFw_1075x722.png" alt="map">
<a data-index="0" href="javascrpt:;">天津</a> <a data-index="0" href="javascrpt:;" class="address01">天津</a>
<a data-index="1" href="javascrpt:;">西安灞桥</a> <a data-index="1" href="javascrpt:;" class="address02">西安灞桥</a>
<a data-index="2" href="javascrpt:;">江苏海安</a> <a data-index="2" href="javascrpt:;" class="address03">江苏海安</a>
<a data-index="3" href="javascrpt:;">成都金堂</a> <a data-index="3" href="javascrpt:;" class="address04">成都金堂</a>
<a data-index="4" href="javascrpt:;">四川巴中</a> <a data-index="4" href="javascrpt:;" class="address05">四川巴中</a>
<a data-index="5" href="javascrpt:;">贵州铜仁</a> <a data-index="5" href="javascrpt:;" class="address06">贵州铜仁</a>
<a data-index="6" href="javascrpt:;">贵州余庆</a> <a data-index="6" href="javascrpt:;" class="address07">贵州余庆</a>
<a data-index="7" href="javascrpt:;">贵州黔南州</a> <a data-index="7" href="javascrpt:;" class="address08">贵州黔南州</a>
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment