Skip to content

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

ie8-layout

parent a5c901b6
Expand all Show 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) {
if (items && items.length) {
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('');
$('.products', panel).html(html);
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) {
(item.status == 11 && (item.fundRaisedTarget - item.fundRaisedOver > 0)) ?
'<span>' + formatMoney(item.fundRaisedTarget - item.fundRaisedOver) + '</span>' : ''
}</i>
<div class="clear">
<div>
<div class="clear main">
<div class="main-left">
<h2>${item.itemShortTitle}</h2>
<h3>${formatMoney(item.fundRaisedTarget)}</h3>
<div class="clear">
<span>
<span class="main-left-01">
<p>${item.commissionMaxDur}</p>
</span>
<span>
<span class="main-left-02">
<p>${formatMoney(item.minimumAmount)}</p>
</span>
<span>
<span class="main-left-03">
<p>${item.duration}</p>
</span>
</div>
</div>
<div>
<div class="main-right">
<div>
<h4>项目亮点</h4>
<p>${item.summary}</p>
......
public/javascripts/products.min.js
View file @ c0b513fa
......@@ -21,7 +21,7 @@ function fetch(a, n) {
var s = i.items;
if (s && s.length) {
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("");
$(".products", n).html(r);
var c = [];
......
public/javascripts/utils.js
View file @ c0b513fa
......@@ -148,7 +148,7 @@ var Tabs = function () {
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>');
});
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.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 {
panels.push(`<div class="tabs-panels-item" data-index="${index}"></div>`);
});
const html = `<div class="tabs">
<header class="tabs-header">
<div class="tabs-header">
<div class="clear">
${headers.join('')}
</div>
</header>
<section>
</div>
<div class="section">
${panels.join('')}
</section>
</div>
</div>`;
this.element = $(html).appendTo(this.container);
......
public/javascripts/utils.min.js
View file @ c0b513fa
......@@ -175,7 +175,7 @@ var Tabs = function() {
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>');
});
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.selectIndex(this.options.defaultIndex || 0);
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
......@@ -95,7 +95,6 @@
width: 95%;
}
}
/*download end*/
/*character begin*/
@keyframes stretch-delay {
......@@ -118,7 +117,8 @@
height: 160px;
text-align: center;
position: relative;
& > div {
.projects-count,
.projects-content {
position: absolute;
top: 0;
left: 0;
......@@ -130,7 +130,8 @@
animation-duration: 10s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
&:first-child {
}
.projects-count {
h3 {
margin-top: 50px;
font-size: 44px;
......@@ -140,9 +141,10 @@
font-size: 16px;
color: #888;
}
//position: static\9;
display: none \9; /*IE8 隐藏*/
}
&:last-child {
.projects-content {
img {
display: block;
margin: auto;
......@@ -154,7 +156,6 @@
font-size: 14px;
}
}
}
.loop(@c) when (@c > 0) {
.loop((@c - 1));
&:nth-child(@{c}) {
......@@ -174,18 +175,22 @@
}
/* character end */
/* projects begin */
.projects {
background-color: #f6f6f6;
& > header {
& > div {
.projects-header {
.project-header-left,
.project-header-right {
float: left;
height: 300px;
position: relative;
width: 50%;
&:first-child {
}
.project-header-left {
background-color: #111d2b;
& > div {
div {
position: relative;
float: right;
height: 300px;
......@@ -201,9 +206,9 @@
}
}
}
&:last-child {
.project-header-right {
background-color: #2e2e2e;
& > div {
div {
position: relative;
background-color: #2e2e2e;
height: 300px;
......@@ -223,20 +228,17 @@
}
}
}
}
& > section {
.section {
width: @container-width;
height: 500px;
margin: 0 auto;
& > div {
&:first-child {
.section-left {
width: @container-width/2-121;
float: left;
margin-top: 50px;
margin-left: 20px;
border-right: 1px solid #7f7f7f;
p {
li {
position: relative;
margin-top: 20px;
font-size: 23px;
......@@ -256,7 +258,7 @@
}
}
&:last-child {
.section-right {
width: @container-width/2+100;
float: left;
position: relative;
......@@ -270,7 +272,6 @@
}
}
}
}
}
/* projects end*/
......@@ -279,26 +280,27 @@
.products {
background-color: #f6f6f6;
ul {
width: @container-width;
//width: @container-width;
margin: 0 auto;
padding-bottom: 50px;
li {
position: relative;
color: #fff;
&:nth-child(1),
&:nth-child(2) {
margin-bottom: 30px;
& > div {
&.products-image-large {
//margin-bottom: 30px;
.products-image,
.products-detail {
height: 400px;
float: left;
&:first-child {
width: (@container-width + 30)/3*2-30;
}
.products-image {
//width: (@container-width + 30)/3*2-30;
margin-right: 30px;
background-size: cover;
}
&:last-child {
.products-detail {
width: (@container-width + 30)/3-30;
background-color: #2e2e2e;
text-align: center;
......@@ -313,7 +315,7 @@
border-bottom: 1px solid #979797;
margin: 7px auto 20px;
}
& > div {
div {
width: 100%;
margin-bottom: 24px;
span {
......@@ -333,24 +335,25 @@
}
}
}
}
&:nth-child(n+3) {
&.products-image-small {
float: left;
width: (@container-width + 30)/3-30;
//width: (@container-width-large + 30)/3-30;
height: 400px;
position: relative;
margin-right: 30px;
&:last-child {
&.last-one {
margin-right: 0;
}
& > div {
.products-image,
.products-detail {
position: absolute;
width: 100%;
height: 100%;
&:first-child {
}
.products-image {
background-size: cover;
}
&:last-child {
.products-detail {
position: relative;
transition: background .3s;
&:hover {
......@@ -366,7 +369,7 @@
hr {
border: transparent;
}
& > div:nth-child(3) {
.products-data {
width: 100%;
margin-bottom: 24px;
position: absolute;
......@@ -384,7 +387,7 @@
}
}
}
& > div:last-child {
.products-link{
position: absolute;
top: 270px;
left: 0;
......@@ -399,7 +402,6 @@
}
}
}
}
}
/*product end*/
......@@ -456,53 +458,47 @@
}
}
.projects {
& > header {
& > div {
&:first-child {
& > div {
.projects-header {
.project-header-left{
div {
width: @cw/4 + 50;
margin-right: @cw/4 - 50;
}
}
&:last-child {
& > div {
.project-header-right{
div {
width: @cw / 4 * 3 - 50;
margin-left: -@cw/4 + 50;
}
}
}
}
& > section {
.section {
width: @cw;
& > div {
&:first-child {
.section-left {
width: @cw/2-121;
}
&:last-child {
.section-right {
width: @cw/2+100;
}
}
}
}
.products {
ul {
width: @cw;
@mr: @cw/33;
li {
&:nth-child(1),
&:nth-child(2) {
& > div {
&:first-child {
&.products-image-large {
margin-bottom: @mr;
.products-image {
width: (@cw + @mr)/3*2-@mr;
margin-right: @mr;
}
&:last-child {
.products-detail {
width: (@cw + @mr)/3-@mr;
}
}
margin-bottom: @mr;
}
&:nth-child(n+3) {
&.products-image-small {
width: (@cw + @mr)/3-@mr;
margin-right: @mr;
}
......
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 @@
font-size: 32px;
border: none !important;
}
.tabs > header {
.tabs .tabs-header {
background-color: #2d2f33;
margin-bottom: 25px;
}
.tabs > header > div {
.tabs .tabs-header div {
width: 1150px;
margin: 0 auto;
line-height: 1;
}
.tabs > header > div > a {
.tabs .tabs-header div a {
display: block;
float: left;
padding: 20px 60px;
......@@ -26,19 +26,19 @@
font-weight: 300;
color: #fff;
}
.tabs > header > div > a.active,
.tabs > header > div > a:hover {
.tabs .tabs-header div a.active,
.tabs .tabs-header div a:hover {
background-color: #ff4a4a;
}
.tabs > section {
.tabs .section {
min-height: 500px;
}
.tabs > section > div {
.tabs .section .tabs-panels-item {
width: 1150px;
margin: 0 auto;
display: none;
}
.tabs > section > div.active {
.tabs .section .tabs-panels-item.active {
display: block;
}
.products li {
......@@ -46,7 +46,7 @@
border: 1px solid #939393;
margin-bottom: 20px;
}
.products li > .seal {
.products li .seal {
position: absolute;
top: 50%;
left: 45px;
......@@ -59,7 +59,7 @@
height: 150px;
margin-top: -75px;
}
.products li > .seal > span {
.products li .seal span {
position: absolute;
top: 50%;
width: 100%;
......@@ -71,7 +71,7 @@
font-style: normal;
color: #ff4a4a;
}
.products li > .corner {
.products li .corner {
position: absolute;
top: 0;
left: auto;
......@@ -83,21 +83,22 @@
width: 80px;
height: 96px;
}
.products li > div {
.products li .main {
border-left: 8px solid transparent;
padding: 0 60px 0 230px;
transition: border .5s;
}
.products li > div > div {
.products li .main .main-left,
.products li .main .main-right {
float: left;
color: #2d2f33;
position: relative;
}
.products li > div > div:first-child {
.products li .main .main-left {
width: 60%;
padding: 40px 0;
}
.products li > div > div:first-child:after {
.products li .main .main-left:after {
content: '';
position: absolute;
top: 0;
......@@ -108,108 +109,108 @@
height: 100%;
border-right: 1px solid #939393;
}
.products li > div > div:first-child h2 {
.products li .main .main-left h2 {
font-size: 18px;
}
.products li > div > div:first-child h3 {
.products li .main .main-left h3 {
color: #ff4a4a;
font-size: 16px;
margin: 10px 0;
}
.products li > div > div:first-child h3:before {
.products li .main .main-left h3:before {
margin-right: 1em;
content: '总额度';
color: #2d2f33;
}
.products li > div > div:first-child > div span {
.products li .main .main-left div span {
float: left;
width: 33%;
font-size: 16px;
line-height: 50px;
}
.products li > div > div:first-child > div span > p {
.products li .main .main-left div span p {
float: left;
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;
color: #848484;
line-height: 16px;
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;
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: '预期收益';
}
.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: '起投(万)';
}
.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: '期限';
}
.products li > div > div:last-child {
.products li .main .main-right {
width: 40%;
}
.products li > div > div:last-child > div {
.products li .main .main-right div {
padding: 20px 30px;
}
.products li > div > div:last-child h4 {
.products li .main .main-right h4 {
color: #000;
font-size: 16px;
border-left: 5px solid #2d2f33;
padding-left: .5em;
line-height: 1;
}
.products li > div > div:last-child p {
.products li .main .main-right p {
font-size: 14px;
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');
}
.products li.status-11 > .corner {
.products li.status-11 .corner {
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;
}
.products li.status-5 > .seal {
.products li.status-5 .seal {
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');
}
.products li.status-5:hover > div {
.products li.status-5:hover .main {
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');
}
.products li.status-17 > .corner {
.products li.status-17 .corner {
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;
}
.products li.status-21 > .seal {
.products li.status-21 .seal {
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');
}
.products li.status-21:hover > div {
.products li.status-21:hover .main {
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');
}
.products li.status-31 > .corner {
.products li.status-31 .corner {
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;
}
.products .product-item {
......
public/stylesheets/products.less
View file @ c0b513fa
......@@ -32,14 +32,14 @@
border: none !important;
}
& > header {
.tabs-header {
background-color: @color;
margin-bottom: 25px;
& > div {
div {
width: @container-width;
margin: 0 auto;
line-height: 1;
& > a {
a {
display: block;
float: left;
padding: 20px 60px;
......@@ -53,9 +53,9 @@
}
}
}
& > section {
.section {
min-height: 500px;
& > div {
.tabs-panels-item {
width: @container-width;
margin: 0 auto;
display: none;
......@@ -73,11 +73,11 @@
position: relative;
border: 1px solid #939393;
margin-bottom: 20px;
& > .seal {
.seal {
.absolute(50%, 45px);
.icon(@seal-size, @seal-size);
margin-top: -@seal-size/2;
& > span {
span {
position: absolute;
top: 50%;
width: 100%;
......@@ -90,21 +90,23 @@
color: @highlightColor;
}
}
& > .corner {
.corner {
.absolute(0, auto, 0);
.icon(@corner-width, @corner-height);
}
& > div {
.main {
border-left: 8px solid transparent;
padding: 0 60px 0 230px;
transition: border .5s;
& > div {
.main-left,
.main-right {
float: left;
//min-height: 300px;
color: @color;
position: relative;
&:first-child {
}
.main-left {
width: 60%;
padding: 40px 0;
&:after {
......@@ -128,47 +130,46 @@
color: @color;
}
}
& > div {
div {
span {
float: left;
width: 33%;
//text-align: center;
font-size: 16px;
line-height: 50px;
& > p {
p {
float: left;
text-align: center;
}
& > p:after {
p:after {
font-size: 16px;
color: #848484;
line-height: 16px;
display: block;
}
&:nth-child(1) {
&.main-left-01 {
font-size: 30px;
color: @highlightColor;
& > p:after {
p:after {
content: '预期收益';
}
}
&:nth-child(2) {
& > p:after {
&.main-left-02 {
p:after {
content: '起投(万)';
}
}
&:nth-child(3) {
& > p:after {
&.main-left-03 {
p:after {
content: '期限';
}
}
}
}
}
&:last-child {
.main-right {
width: 40%;
& > div {
div {
padding: 20px 30px;
}
h4 {
......@@ -184,18 +185,17 @@
}
}
}
}
.status(@index, @seal, @corner, @color) {
&.status-@{index} {
& > .seal {
.seal {
background-image: url(@seal);
}
& > .corner {
.corner {
background-image: url(@corner);
}
&:hover {
& > div {
.main {
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 @@
padding: 0 0 60px 0;
margin: 0 auto;
}
.hot-project-introducer > ul {
.hot-project-introducer .subtabs {
height: 180px;
}
.hot-project-introducer > ul li {
.hot-project-introducer .subtabs li {
float: left;
width: 25%;
font-size: 18px;
......@@ -36,7 +36,7 @@
text-align: center;
font-weight: bold;
}
.hot-project-introducer > ul li:before {
.hot-project-introducer .subtabs li:before {
content: '';
display: inline-block;
position: relative;
......@@ -47,7 +47,7 @@
border-radius: 50%;
background: #bb342e;
}
.hot-project-introducer > ul li b {
.hot-project-introducer .subtabs li b {
display: inline-block;
position: relative;
top: 20px;
......@@ -56,19 +56,19 @@
margin-right: 6px;
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;
}
.hot-project-introducer > ul li:nth-child(3) > b {
.hot-project-introducer .subtabs li.subtabs-thrid b {
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;
}
.hot-project-introducer > hr.line-separate {
.hot-project-introducer hr.line-separate {
width: 100%;
}
.hot-project-introducer > hr.line-separate:after {
.hot-project-introducer hr.line-separate:after {
background: #01a9dd;
}
.hot-project-introducer .introducer {
......@@ -147,30 +147,30 @@
padding-bottom: 118px;
position: relative;
}
.hot-project-address .hot-project-address-box > div:nth-child(1) {
.hot-project-address .hot-project-address-box .title {
position: absolute;
color: #fff;
top: 40px;
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-weight: bold;
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;
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%;
position: relative;
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%;
}
.hot-project-address .hot-project-address-box > div:nth-child(2) a {
.hot-project-address .hot-project-address-box .address-list a {
width: 120px;
height: 40px;
text-align: center;
......@@ -184,32 +184,32 @@
right: -126px;
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;
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%;
}
.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%;
}
.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%;
}
.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%;
}
.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%;
}
.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%;
}
.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%;
}
.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%;
}
/* .hot-project-address end */
......
public/stylesheets/project.less
View file @ c0b513fa
......@@ -29,7 +29,7 @@
.hot-project-introducer {
padding: 0 0 60px 0;
margin: 0 auto;
& > ul {
.subtabs {
height: 180px;
li {
float: left;
......@@ -60,18 +60,18 @@
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;
}
li:nth-child(3) > b {
li.subtabs-thrid b {
background-position: -265px -22px;
}
li:nth-child(4) > b {
li.subtabs-fourth b {
background-position: -363px -21px;
}
}
& > hr.line-separate {
hr.line-separate {
width: 100%;
&:after {
background: #01a9dd;
......@@ -157,8 +157,7 @@
padding-top: 118px;
padding-bottom: 118px;
position: relative;
& > div {
&:nth-child(1) {
.title {
position: absolute;
color: #fff;
top: 40px;
......@@ -173,7 +172,7 @@
line-height: 53px;
}
}
&:nth-child(2) {
.address-list {
width: 100%;
position: relative;
left: -80px;
......@@ -197,33 +196,33 @@
background: #000;
color: #fff;
}
&:nth-child(2) {
&.address01 {
top: 4%;
}
&:nth-child(3) {
&.address02 {
top: 24%;
}
&:nth-child(4) {
&.address03 {
top: 39%;
}
&:nth-child(5) {
&.address04 {
top: 57%;
}
&:nth-child(6) {
&.address05 {
top: 66%;
}
&:nth-child(7) {
&.address06 {
top: 75%;
}
&:nth-child(8) {
&.address07 {
top: 84%;
}
&:nth-child(9) {
&.address08 {
top: 93%;
}
}
}
}
}
}
......
routes/index.js
View file @ c0b513fa
......@@ -47,35 +47,40 @@ router.get('/', function (req, res) {
raiseTime: '28',
raiseFunds: '4',
maxProfits: '8.5%',
link: '/products/20010'
link: '/products/20010',
className: 'products-image-large'
}, {
title: '中电投先融-天津市级政信',
img: 'http://res.fudou6.com/c/4/20160730/m3gMDQxYzBjYw==_1000x600.jpg',
raiseTime: '28',
raiseFunds: '5',
maxProfits: '8.3%',
link: '/products/20011'
link: '/products/20011',
className: 'products-image-large'
}, {
title: '中电投先融-锐金1-2号',
img: 'http://res.fudou6.com/c/4/20160730/eedZmNmYmIwOA==_600x375.jpg',
raiseTime: '21',
raiseFunds: '2',
maxProfits: '8.7%',
link: '/products/20012'
link: '/products/20012',
className: 'products-image-small'
}, {
title: '金元南通新沿海1号',
img: 'http://res.fudou6.com/c/4/20160730/y3sNWNlN2NmOA==_1000x600.jpg',
raiseTime: '20',
raiseFunds: '2',
maxProfits: '8.5%',
link: '/products/20008'
link: '/products/20008',
className: 'products-image-small'
}, {
title: '国信证券<br/>巴中市高明新区壁州大道',
img: 'http://res.fudou6.com/c/4/20160730/pdeMzhiZTc4ZA==_1000x600.jpg',
raiseTime: '52',
raiseFunds: '1',
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 @@
<ul class="clear">
{{#each character}}
<li>
<div>
<div class="projects-count">
<h3>{{this.sum}}</h3>
<h4>{{this.text}}</h4>
</div>
<div>
<div class="projects-content">
<img src="{{this.img}}"/>
<h3>{{this.c1}}</h3>
<h4>{{this.c2}}</h4>
......@@ -67,51 +67,51 @@
</ul>
</div>
<div class="projects">
<header class="clear">
<div>
<div class="clear projects-header">
<div class="project-header-left">
<div>
<a class="logo"></a>
</div>
</div>
<div>
<div class="project-header-right">
<div>
<h3><a href="/project" target="_blank">推荐优质项目 领取高额介绍费</a></h3>
</div>
</div>
</header>
<section class="clear">
<div>
<p>
</div>
<div class="clear section">
<ul class="section-left">
<li>
精选稀缺产品<br/>
非区非县，市级资产端一手政信
</p>
<p>
</li>
<li>
尽享高额佣金<br/>
远高市场佣金比例的返佣制度
</p>
<p>
</li>
<li>
完善风控体系<br/>
原招商银行风控团队层层把关
</p>
<p>
</li>
<li>
佣金快速结算<br/>
项目成立 T+0 ，帮您快速结佣
</p>
</div>
<div>
</li>
</ul>
<div class="section-right">
<div class="computer"></div>
</div>
</section>
</div>
</div>
<div class="products">
<ul class="clear">
{{#each products}}
<li class="clear">
<div style="background-image:url({{this.img}})"></div>
<div>
<li class="clear {{this.className}}">
<div style="background-image:url({{this.img}})" class="products-image"></div>
<div class="products-detail">
<h3>{{{this.title}}}</h3>
<hr/>
<div class="clear">
<hr class="line-separate"/>
<div class="clear products-data">
<span>
<strong>{{this.raiseTime}}</strong>天<br/>募集时间
</span>
......@@ -122,7 +122,7 @@
<strong>{{this.maxProfits}}</strong><br/>客户收益
</span>
</div>
<div>
<div class="products-link">
<a href="{{this.link}}">查看详情 &gt;</a>
</div>
</div>
......
views/layout.hbs
View file @ c0b513fa
......@@ -19,9 +19,16 @@
<!--[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>
<![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>
<body>
<header id="header">
<div id="header">
<div class="container">
<a class="logo" href="/"><img src="/images/logo.png" alt="logo"></a>
<nav class="clear">
......@@ -31,18 +38,18 @@
<span><a href="/about" class="{{navAbout}}">关于我们 / ABOUT</a></span>
</nav>
</div>
</header>
<section id="container">
</div>
<div id="container">
{{{body}}}
</section>
<footer id="footer">
</div>
<div id="footer">
<h3>全国客服热线 9:30-18:30</h3>
<h2>400-879-9900</h2>
<!--<hr class="line-separate"/>-->
<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>上海市浦东新区福山路458号同盛大厦1808室</address>
</footer>
</div>
<script src="/javascripts/jquery-1.8.3.min.js"></script>
{{#if env}}
{{#each scripts}}
......
views/project.hbs
View file @ c0b513fa
......@@ -3,20 +3,20 @@
<p>枢纽科技旗下专为地方性项目或企业提供有保障的融资渠道、合理对接资金需求的互联网平台，拥有数个大型项目资金问题解决方案</p>
</div>
<div class="hot-project-introducer">
<ul class="clear">
<li>
<ul class="clear subtabs">
<li class="subtabs-first">
<b></b>
<span>债权融资</span>
</li>
<li>
<li class="subtabs-second">
<b></b>
<span>项目融资</span>
</li>
<li>
<li class="subtabs-thrid">
<b></b>
<span>融资租赁</span>
</li>
<li>
<li class="subtabs-fourth">
<b></b>
<span>扩展融资渠道</span>
</li>
......@@ -41,20 +41,20 @@
</div>
<div class="hot-project-address">
<div class="hot-project-address-box">
<div>
<div class="title">
<h2>热点项目</h2>
<p>※国内各地在进行项目分布图</p>
</div>
<div>
<div class="address-list">
<img src="https://res.fudou6.com/c/4/20160730/g3zbWFw_1075x722.png" alt="map">
<a data-index="0" href="javascrpt:;">天津</a>
<a data-index="1" href="javascrpt:;">西安灞桥</a>
<a data-index="2" href="javascrpt:;">江苏海安</a>
<a data-index="3" href="javascrpt:;">成都金堂</a>
<a data-index="4" href="javascrpt:;">四川巴中</a>
<a data-index="5" href="javascrpt:;">贵州铜仁</a>
<a data-index="6" href="javascrpt:;">贵州余庆</a>
<a data-index="7" href="javascrpt:;">贵州黔南州</a>
<a data-index="0" href="javascrpt:;" class="address01">天津</a>
<a data-index="1" href="javascrpt:;" class="address02">西安灞桥</a>
<a data-index="2" href="javascrpt:;" class="address03">江苏海安</a>
<a data-index="3" href="javascrpt:;" class="address04">成都金堂</a>
<a data-index="4" href="javascrpt:;" class="address05">四川巴中</a>
<a data-index="5" href="javascrpt:;" class="address06">贵州铜仁</a>
<a data-index="6" href="javascrpt:;" class="address07">贵州余庆</a>
<a data-index="7" href="javascrpt:;" class="address08">贵州黔南州</a>
</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