Skip to content

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

ie8-layout

parent a5c901b6
Show whitespace changes
Inline Side-by-side
Showing with 937 additions and 538 deletions
public/javascripts/ie-css3.htc 0 → 100644
View file @ c0b513fa
--Do not remove this if you are using--
Original Author: Remiz Rahnas
Original Author URL: http://www.htmlremix.com
Published date: 2008/09/24
Changes by Nick Fetchak:
- IE8 standards mode compatibility
- VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
- Added partial support for 'box-shadow' style
- Checks for VML support before doing anything
- Updates VML element size and position via timer and also via window resize event
- lots of other small things
Published date : 2010/03/14
http://fetchak.com/ie-css3
Thanks to TheBrightLines.com (http://www.thebrightlines.com/2009/12/03/using-ies-filter-in-a-cross-browser-way) for enlightening me about the DropShadow filter
<public:attach event="ondocumentready" onevent="ondocumentready('v08vnSVo78t4JfjH')" />
<script type="text/javascript">
timer_length = 200; // Milliseconds
border_opacity = false; // Use opacity on borders of rounded-corner elements? Note: This causes antialiasing issues
// supportsVml() borrowed from http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser
function supportsVml() {
if (typeof supportsVml.supported == "undefined") {
var a = document.body.appendChild(document.createElement('div'));
a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
var b = a.firstChild;
b.style.behavior = "url(#default#VML)";
supportsVml.supported = b ? typeof b.adj == "object": true;
a.parentNode.removeChild(a);
}
return supportsVml.supported
}
// findPos() borrowed from http://www.quirksmode.org/js/findpos.html
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return({
'x': curleft,
'y': curtop
});
}
function createBoxShadow(element, vml_parent) {
var style = element.currentStyle['iecss3-box-shadow'] || element.currentStyle['-moz-box-shadow'] || element.currentStyle['-webkit-box-shadow'] || element.currentStyle['box-shadow'] || '';
var match = style.match(/^(\d+)px (\d+)px (\d+)px/);
if (!match) { return(false); }
var shadow = document.createElement('v:roundrect');
shadow.userAttrs = {
'x': parseInt(RegExp.$1 || 0),
'y': parseInt(RegExp.$2 || 0),
'radius': parseInt(RegExp.$3 || 0) / 2
};
shadow.position_offset = {
'y': (0 - vml_parent.pos_ieCSS3.y - shadow.userAttrs.radius + shadow.userAttrs.y),
'x': (0 - vml_parent.pos_ieCSS3.x - shadow.userAttrs.radius + shadow.userAttrs.x)
};
shadow.size_offset = {
'width': 0,
'height': 0
};
shadow.arcsize = element.arcSize +'px';
shadow.style.display = 'block';
shadow.style.position = 'absolute';
shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px';
shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px';
shadow.style.width = element.offsetWidth +'px';
shadow.style.height = element.offsetHeight +'px';
shadow.style.antialias = true;
shadow.className = 'vml_box_shadow';
shadow.style.zIndex = element.zIndex - 1;
shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity='+ element.opacity +')';
element.parentNode.appendChild(shadow);
//element.parentNode.insertBefore(shadow, element.element);
// For window resizing
element.vml.push(shadow);
return(true);
}
function createBorderRect(element, vml_parent) {
if (isNaN(element.borderRadius)) { return(false); }
element.style.background = 'transparent';
element.style.borderColor = 'transparent';
var rect = document.createElement('v:roundrect');
rect.position_offset = {
'y': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.y,
'x': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.x
};
rect.size_offset = {
'width': 0 - element.strokeWeight,
'height': 0 - element.strokeWeight
};
rect.arcsize = element.arcSize +'px';
rect.strokeColor = element.strokeColor;
rect.strokeWeight = element.strokeWeight +'px';
rect.stroked = element.stroked;
rect.className = 'vml_border_radius';
rect.style.display = 'block';
rect.style.position = 'absolute';
rect.style.top = (element.pos_ieCSS3.y + rect.position_offset.y) +'px';
rect.style.left = (element.pos_ieCSS3.x + rect.position_offset.x) +'px';
rect.style.width = (element.offsetWidth + rect.size_offset.width) +'px';
rect.style.height = (element.offsetHeight + rect.size_offset.height) +'px';
rect.style.antialias = true;
rect.style.zIndex = element.zIndex - 1;
if (border_opacity && (element.opacity < 1)) {
rect.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity='+ parseFloat(element.opacity * 100) +')';
}
var fill = document.createElement('v:fill');
fill.color = element.fillColor;
fill.src = element.fillSrc;
fill.className = 'vml_border_radius_fill';
fill.type = 'tile';
fill.opacity = element.opacity;
// Hack: IE6 doesn't support transparent borders, use padding to offset original element
isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
if (isIE6 && (element.strokeWeight > 0)) {
element.style.borderStyle = 'none';
element.style.paddingTop = parseInt(element.currentStyle.paddingTop || 0) + element.strokeWeight;
element.style.paddingBottom = parseInt(element.currentStyle.paddingBottom || 0) + element.strokeWeight;
}
rect.appendChild(fill);
element.parentNode.appendChild(rect);
//element.parentNode.insertBefore(rect, element.element);
// For window resizing
element.vml.push(rect);
return(true);
}
function createTextShadow(element, vml_parent) {
if (!element.textShadow) { return(false); }
var match = element.textShadow.match(/^(\d+)px (\d+)px (\d+)px (#?\w+)/);
if (!match) { return(false); }
//var shadow = document.createElement('span');
var shadow = element.cloneNode(true);
var radius = parseInt(RegExp.$3 || 0);
shadow.userAttrs = {
'x': parseInt(RegExp.$1 || 0) - (radius),
'y': parseInt(RegExp.$2 || 0) - (radius),
'radius': radius / 2,
'color': (RegExp.$4 || '#000')
};
shadow.position_offset = {
'y': (0 - vml_parent.pos_ieCSS3.y + shadow.userAttrs.y),
'x': (0 - vml_parent.pos_ieCSS3.x + shadow.userAttrs.x)
};
shadow.size_offset = {
'width': 0,
'height': 0
};
shadow.style.color = shadow.userAttrs.color;
shadow.style.position = 'absolute';
shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px';
shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px';
shadow.style.antialias = true;
shadow.style.behavior = null;
shadow.className = 'ieCSS3_text_shadow';
shadow.innerHTML = element.innerHTML;
// For some reason it only looks right with opacity at 75%
shadow.style.filter = '\
progid:DXImageTransform.Microsoft.Alpha(Opacity=75)\
progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=false,shadowOpacity=100)\
';
var clone = element.cloneNode(true);
clone.position_offset = {
'y': (0 - vml_parent.pos_ieCSS3.y),
'x': (0 - vml_parent.pos_ieCSS3.x)
};
clone.size_offset = {
'width': 0,
'height': 0
};
clone.style.behavior = null;
clone.style.position = 'absolute';
clone.style.top = (element.pos_ieCSS3.y + clone.position_offset.y) +'px';
clone.style.left = (element.pos_ieCSS3.x + clone.position_offset.x) +'px';
clone.className = 'ieCSS3_text_shadow';
element.parentNode.appendChild(shadow);
element.parentNode.appendChild(clone);
element.style.visibility = 'hidden';
// For window resizing
element.vml.push(clone);
element.vml.push(shadow);
return(true);
}
function ondocumentready(classID) {
if (!supportsVml()) { return(false); }
if (this.className.match(classID)) { return(false); }
this.className = this.className.concat(' ', classID);
// Add a namespace for VML (IE8 requires it)
if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }
// Check to see if we've run once before on this page
if (typeof(window.ieCSS3) == 'undefined') {
// Create global ieCSS3 object
window.ieCSS3 = {
'vmlified_elements': new Array(),
'update_timer': setInterval(updatePositionAndSize, timer_length)
};
if (typeof(window.onresize) == 'function') { window.ieCSS3.previous_onresize = window.onresize; }
// Attach window resize event
window.onresize = updatePositionAndSize;
}
// These attrs are for the script and have no meaning to the browser:
this.borderRadius = parseInt(this.currentStyle['iecss3-border-radius'] ||
this.currentStyle['-moz-border-radius'] ||
this.currentStyle['-webkit-border-radius'] ||
this.currentStyle['border-radius'] ||
this.currentStyle['-khtml-border-radius']);
this.arcSize = Math.min(this.borderRadius / Math.min(this.offsetWidth, this.offsetHeight), 1);
this.fillColor = this.currentStyle.backgroundColor;
this.fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
this.strokeColor = this.currentStyle.borderColor;
this.strokeWeight = parseInt(this.currentStyle.borderWidth);
this.stroked = 'true';
if (isNaN(this.strokeWeight) || (this.strokeWeight == 0)) {
this.strokeWeight = 0;
this.strokeColor = fillColor;
this.stroked = 'false';
}
this.opacity = parseFloat(this.currentStyle.opacity || 1);
this.textShadow = this.currentStyle['text-shadow'];
this.element.vml = new Array();
this.zIndex = parseInt(this.currentStyle.zIndex);
if (isNaN(this.zIndex)) { this.zIndex = 0; }
// Find which element provides position:relative for the target element (default to BODY)
vml_parent = this;
var limit = 100, i = 0;
do {
vml_parent = vml_parent.parentElement;
i++;
if (i >= limit) { return(false); }
} while ((typeof(vml_parent) != 'undefined') && (vml_parent.currentStyle.position != 'relative') && (vml_parent.tagName != 'BODY'));
vml_parent.pos_ieCSS3 = findPos(vml_parent);
this.pos_ieCSS3 = findPos(this);
var rv1 = createBoxShadow(this, vml_parent);
var rv2 = createBorderRect(this, vml_parent);
var rv3 = createTextShadow(this, vml_parent);
if (rv1 || rv2 || rv3) { window.ieCSS3.vmlified_elements.push(this.element); }
if (typeof(vml_parent.document.ieCSS3_stylesheet) == 'undefined') {
vml_parent.document.ieCSS3_stylesheet = vml_parent.document.createStyleSheet();
vml_parent.document.ieCSS3_stylesheet.addRule("v\\:roundrect", "behavior: url(#default#VML)");
vml_parent.document.ieCSS3_stylesheet.addRule("v\\:fill", "behavior: url(#default#VML)");
// Compatibility with IE7.js
vml_parent.document.ieCSS3_stylesheet.ie7 = true;
}
}
function updatePositionAndSize() {
if (typeof(window.ieCSS3.vmlified_elements) != 'object') { return(false); }
for (var i in window.ieCSS3.vmlified_elements) {
var el = window.ieCSS3.vmlified_elements[i];
if (typeof(el.vml) != 'object') { continue; }
for (var z in el.vml) {
//var parent_pos = findPos(el.vml[z].parentNode);
var new_pos = findPos(el);
new_pos.x = (new_pos.x + el.vml[z].position_offset.x) + 'px';
new_pos.y = (new_pos.y + el.vml[z].position_offset.y) + 'px';
if (el.vml[z].style.left != new_pos.x) { el.vml[z].style.left = new_pos.x; }
if (el.vml[z].style.top != new_pos.y) { el.vml[z].style.top = new_pos.y; }
var new_size = {
'width': parseInt(el.offsetWidth + el.vml[z].size_offset.width),
'height': parseInt(el.offsetHeight + el.vml[z].size_offset.height)
}
if (el.vml[z].offsetWidth != new_size.width) { el.vml[z].style.width = new_size.width +'px'; }
if (el.vml[z].offsetHeight != new_size.height) { el.vml[z].style.height = new_size.height +'px'; }
}
}
if (event && (event.type == 'resize') && typeof(window.ieCSS3.previous_onresize) == 'function') { window.ieCSS3.previous_onresize(); }
}
</script>
\ No newline at end of file
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
{"version":3,"sources":["products.jsx"],"names":[],"mappings":"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","file":"products.js","sourcesContent":["// import \"babel-polyfill\";\n\nfunction fetch(query, panel) {\n const data = {...query, p: (parseInt(query.p, 10) || 1) - 1};\n\n request('/api/1.0/prod/hList.json', data).done(({hasNext, items})=> {\n if (items && items.length) {\n let html = items.map(item=> {\n return `<li data-id=\"${item.id}\" class=\"product-item status-${item.status}\">\n <i class=\"seal\">${\n (item.status == 11 && (item.fundRaisedTarget - item.fundRaisedOver > 0)) ?\n '<span>' + formatMoney(item.fundRaisedTarget - item.fundRaisedOver) + '</span>' : ''\n }</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>`;\n }).join('');\n $('.products', panel).html(html);\n const pagination = [];\n if (hasNext) {\n pagination.push(`<a data-cate-id=\"${data.cateId}\" data-p=\"${data.p + 2}\" data-s=\"${data.s}\" href=\"javascript:void('下一页');\">下一页</a>`);\n }\n\n if (data.p >= 1) {\n pagination.unshift(`<a data-cate-id=\"${data.cateId}\" data-p=\"${data.p}\" data-s=\"${data.s}\" href=\"javascript:void('上一页');\">上一页</a>`);\n }\n $('.pagination', panel).html(pagination.join(''));\n history.replaceState && history.replaceState(null, null, location.pathname + '?' + serialize(query));\n }\n }).fail(err=> {\n console.log(err);\n });\n}\n\n\nfunction fetchCates(query) {\n request('/api/1.0/cate/cates.json').done(({pCates})=> {\n const cates = [];\n pCates.unshift({\n name: '全部',\n id: 'all'\n });\n pCates.forEach(cate=> {\n !cate.selfPick && cates.push(cate.name);\n });\n const tabs = new Tabs({\n container: '.tabs',\n headers: cates,\n initializePanel: function (index, header, panel) {\n let cate = pCates[index];\n let fetchQuery = cate.id == query.cateId ? query : {cateId: cate.id, p: 1, s: query.s || 10};\n panel.html('<ul class=\"products\"><li class=\"loading\">正在努力加载中...</li></ul><ul class=\"pagination\"></ul>');\n fetch(fetchQuery, panel);\n }\n });\n tabs.initialize();\n tabs.element.on('click', '.pagination a', function (e) {\n e.preventDefault();\n const data = $(this).data();\n fetch(data, tabs.findPanel(tabs.activeIndex));\n $(this).text('加载中...')\n }).on('click', '.product-item', function (e) {\n e.preventDefault();\n const id = $(this).data('id');\n location.href = location.pathname + '/' + id;\n })\n });\n}\n\nfetchCates(deserialize());\n"]}
\ No newline at end of file
{"version":3,"sources":["products.jsx"],"names":[],"mappings":";;;;AAAA;;AAEA,SAAS,KAAT,CAAe,KAAf,EAAsB,KAAtB,EAA6B;AACzB,QAAM,oBAAW,KAAX,IAAkB,GAAG,CAAC,SAAS,MAAM,CAAf,EAAkB,EAAlB,KAAyB,CAA1B,IAA+B,CAApD,GAAN;;AAEA,YAAQ,0BAAR,EAAoC,IAApC,EAA0C,IAA1C,CAA+C,gBAAqB;AAAA,YAAnB,OAAmB,QAAnB,OAAmB;AAAA,YAAV,KAAU,QAAV,KAAU;;AAChE,YAAI,SAAS,MAAM,MAAnB,EAA2B;AACvB,gBAAI,OAAO,MAAM,GAAN,CAAU,gBAAO;AACxB,yCAAuB,KAAK,EAA5B,qCAA8D,KAAK,MAAnE,6CAEK,KAAK,MAAL,IAAe,EAAf,IAAsB,KAAK,gBAAL,GAAwB,KAAK,cAA7B,GAA8C,CAArE,GACA,WAAW,YAAY,KAAK,gBAAL,GAAwB,KAAK,cAAzC,CAAX,GAAsE,SADtE,GACkF,EAHtF,kIAOc,KAAK,cAPnB,2CAQc,YAAY,KAAK,gBAAjB,CARd,wJAWqB,KAAK,gBAX1B,+IAcqB,YAAY,KAAK,aAAjB,CAdrB,+IAiBqB,KAAK,QAjB1B,sQAwBiB,KAAK,OAxBtB;AA8BH,aA/BU,EA+BR,IA/BQ,CA+BH,EA/BG,CAAX;AAgCA,cAAE,WAAF,EAAe,KAAf,EAAsB,IAAtB,CAA2B,IAA3B;AACA,gBAAM,aAAa,EAAnB;AACA,gBAAI,OAAJ,EAAa;AACT,2BAAW,IAAX,uBAAoC,KAAK,MAAzC,mBAA4D,KAAK,CAAL,GAAS,CAArE,mBAAmF,KAAK,CAAxF;AACH;;AAED,gBAAI,KAAK,CAAL,IAAU,CAAd,EAAiB;AACb,2BAAW,OAAX,uBAAuC,KAAK,MAA5C,kBAA+D,KAAK,CAApE,kBAAkF,KAAK,CAAvF;AACH;AACD,cAAE,aAAF,EAAiB,KAAjB,EAAwB,IAAxB,CAA6B,WAAW,IAAX,CAAgB,EAAhB,CAA7B;AACA,oBAAQ,YAAR,IAAwB,QAAQ,YAAR,CAAqB,IAArB,EAA2B,IAA3B,EAAiC,SAAS,QAAT,GAAoB,GAApB,GAA0B,UAAU,KAAV,CAA3D,CAAxB;AACH;AACJ,KA9CD,EA8CG,IA9CH,CA8CQ,eAAM;AACV,gBAAQ,GAAR,CAAY,GAAZ;AACH,KAhDD;AAiDH;;AAGD,SAAS,UAAT,CAAoB,KAApB,EAA2B;AACvB,YAAQ,0BAAR,EAAoC,IAApC,CAAyC,iBAAa;AAAA,YAAX,MAAW,SAAX,MAAW;;AAClD,YAAM,QAAQ,EAAd;AACA,eAAO,OAAP,CAAe;AACX,kBAAM,IADK;AAEX,gBAAI;AAFO,SAAf;AAIA,eAAO,OAAP,CAAe,gBAAO;AAClB,aAAC,KAAK,QAAN,IAAkB,MAAM,IAAN,CAAW,KAAK,IAAhB,CAAlB;AACH,SAFD;AAGA,YAAM,OAAO,IAAI,IAAJ,CAAS;AAClB,uBAAW,OADO;AAElB,qBAAS,KAFS;AAGlB,6BAAiB,yBAAU,KAAV,EAAiB,MAAjB,EAAyB,KAAzB,EAAgC;AAC7C,oBAAI,OAAO,OAAO,KAAP,CAAX;AACA,oBAAI,aAAa,KAAK,EAAL,IAAW,MAAM,MAAjB,GAA0B,KAA1B,GAAkC,EAAC,QAAQ,KAAK,EAAd,EAAkB,GAAG,CAArB,EAAwB,GAAG,MAAM,CAAN,IAAW,EAAtC,EAAnD;AACA,sBAAM,IAAN,CAAW,2FAAX;AACA,sBAAM,UAAN,EAAkB,KAAlB;AACH;AARiB,SAAT,CAAb;AAUA,aAAK,UAAL;AACA,aAAK,OAAL,CAAa,EAAb,CAAgB,OAAhB,EAAyB,eAAzB,EAA0C,UAAU,CAAV,EAAa;AACnD,cAAE,cAAF;AACA,gBAAM,OAAO,EAAE,IAAF,EAAQ,IAAR,EAAb;AACA,kBAAM,IAAN,EAAY,KAAK,SAAL,CAAe,KAAK,WAApB,CAAZ;AACA,cAAE,IAAF,EAAQ,IAAR,CAAa,QAAb;AACH,SALD,EAKG,EALH,CAKM,OALN,EAKe,eALf,EAKgC,UAAU,CAAV,EAAa;AACzC,cAAE,cAAF;AACA,gBAAM,KAAK,EAAE,IAAF,EAAQ,IAAR,CAAa,IAAb,CAAX;AACA,qBAAS,IAAT,GAAgB,SAAS,QAAT,GAAoB,GAApB,GAA0B,EAA1C;AACH,SATD;AAUH,KA9BD;AA+BH;;AAED,WAAW,aAAX","file":"products.js","sourcesContent":["// import \"babel-polyfill\";\n\nfunction fetch(query, panel) {\n const data = {...query, p: (parseInt(query.p, 10) || 1) - 1};\n\n request('/api/1.0/prod/hList.json', data).done(({hasNext, items})=> {\n if (items && items.length) {\n let html = items.map(item=> {\n return `<li data-id=\"${item.id}\" class=\"product-item status-${item.status}\">\n <i class=\"seal\">${\n (item.status == 11 && (item.fundRaisedTarget - item.fundRaisedOver > 0)) ?\n '<span>' + formatMoney(item.fundRaisedTarget - item.fundRaisedOver) + '</span>' : ''\n }</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>`;\n }).join('');\n $('.products', panel).html(html);\n const pagination = [];\n if (hasNext) {\n pagination.push(`<a data-cate-id=\"${data.cateId}\" data-p=\"${data.p + 2}\" data-s=\"${data.s}\" href=\"javascript:void('下一页');\">下一页</a>`);\n }\n\n if (data.p >= 1) {\n pagination.unshift(`<a data-cate-id=\"${data.cateId}\" data-p=\"${data.p}\" data-s=\"${data.s}\" href=\"javascript:void('上一页');\">上一页</a>`);\n }\n $('.pagination', panel).html(pagination.join(''));\n history.replaceState && history.replaceState(null, null, location.pathname + '?' + serialize(query));\n }\n }).fail(err=> {\n console.log(err);\n });\n}\n\n\nfunction fetchCates(query) {\n request('/api/1.0/cate/cates.json').done(({pCates})=> {\n const cates = [];\n pCates.unshift({\n name: '全部',\n id: 'all'\n });\n pCates.forEach(cate=> {\n !cate.selfPick && cates.push(cate.name);\n });\n const tabs = new Tabs({\n container: '.tabs',\n headers: cates,\n initializePanel: function (index, header, panel) {\n let cate = pCates[index];\n let fetchQuery = cate.id == query.cateId ? query : {cateId: cate.id, p: 1, s: query.s || 10};\n panel.html('<ul class=\"products\"><li class=\"loading\">正在努力加载中...</li></ul><ul class=\"pagination\"></ul>');\n fetch(fetchQuery, panel);\n }\n });\n tabs.initialize();\n tabs.element.on('click', '.pagination a', function (e) {\n e.preventDefault();\n const data = $(this).data();\n fetch(data, tabs.findPanel(tabs.activeIndex));\n $(this).text('加载中...')\n }).on('click', '.product-item', function (e) {\n e.preventDefault();\n const id = $(this).data('id');\n location.href = location.pathname + '/' + id;\n })\n });\n}\n\nfetchCates(deserialize());\n"]}
\ No newline at end of file
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
{"version":3,"sources":["utils.jsx"],"names":[],"mappings":";;;;;;;;;;AACA,SAAS,OAAT,CAAiB,GAAjB,EAAsB,IAAtB,EAA4C;AAAA,QAAhB,MAAgB,yDAAP,KAAO;;AACxC,QAAI,UAAU,EAAE,QAAF,EAAd;AACA,MAAE,IAAF,CAAO,GAAP,EAAY;AACR,cAAM,MADE;AAER,kBAAU,MAFF;AAGR,kBAHQ;AAIR,iBAAS,sBAAM;AACX,gBAAI,OAAO,IAAI,MAAJ,IAAc,CAAzB,EAA4B;AACxB,wBAAQ,OAAR,CAAgB,IAAI,MAApB;AACH,aAFD,MAEO;AACH,wBAAQ,MAAR,CAAe;AACX,0BAAM,OAAO,IAAI,IAAX,IAAmB,CADd;AAEX,6BAAS,OAAO,IAAI,GAAX,IAAkB,IAAI,OAAtB,IAAiC;AAF/B,iBAAf;AAIH;AACJ,SAbO;AAcR,eAAO,eAAC,GAAD,EAAM,MAAN,EAAc,IAAd,EAAsB;AACzB,oBAAQ,GAAR,CAAY,GAAZ,EAAiB,MAAjB,EAAyB,IAAzB;AACA,oBAAQ,MAAR,CAAe;AACX,sBAAM,OAAO,IAAI,MAAX,IAAqB,MADhB;AAEX,yBAAS;AAFE,aAAf;AAIH;AApBO,KAAZ;AAsBA,WAAO,OAAP;AACH;;AAID,SAAS,WAAT,GAAgC;AAAA,QAAX,KAAW,yDAAH,CAAG;;AAC5B,QAAI,YAAJ;AACA,QAAI,MAAM,KAAN,CAAJ,EAAkB;AACd,cAAM,GAAN;AACH,KAFD,MAEO,IAAI,SAAS,IAAb,EAAmB;AACtB,cAAO,QAAQ,IAAT,GAAiB,GAAvB;AACH,KAFM,MAEA,IAAI,SAAS,GAAb,EAAkB;AACrB,cAAO,QAAQ,GAAT,GAAgB,GAAtB;AACH,KAFM,MAEA;AACH,cAAO,QAAQ,GAAf;AACH;AACD,WAAO,GAAP;AACH;;AAED,SAAS,WAAT,GAA4C;AAAA,QAAvB,GAAuB,yDAAjB,SAAS,MAAQ;;AACxC,QAAM,QAAQ,EAAd;AACA,KAAC,MAAM,EAAP,EAAW,OAAX,CAAmB,MAAnB,EAA2B,EAA3B,EAA+B,KAA/B,CAAqC,GAArC,EAA0C,OAA1C,CAAkD,gBAAO;AACrD,YAAI,MAAM,CAAC,OAAO,EAAR,EAAY,KAAZ,CAAkB,GAAlB,CAAV;AACA,YAAI,IAAI,MAAR,EAAgB;AACZ,kBAAM,mBAAmB,IAAI,CAAJ,CAAnB,CAAN,IAAoC,mBAAmB,IAAI,CAAJ,CAAnB,CAApC;AACH;AACJ,KALD;AAMA,WAAO,KAAP;AACH;;AAED,SAAS,SAAT,CAAmB,GAAnB,EAAwB,MAAxB,EAAgC;AAC5B,QAAI,MAAM,EAAV;AACA,WAAO,IAAP,CAAY,GAAZ,EAAiB,GAAjB,CAAqB,aAAI;AACrB,YAAI,IAAI,IAAI,CAAJ,CAAR;AACA,YAAI,KAAK,OAAO,CAAP,KAAa,WAAtB,EAAmC;AAC/B,gBAAI,IAAI,SAAS,SAAS,GAAT,GAAe,CAAxB,GAA4B,CAApC;AACA,gBAAI,QAAO,CAAP,yCAAO,CAAP,MAAY,QAAhB,EAA0B;AACtB,oBAAI,UAAU,CAAV,EAAa,CAAb,CAAJ;AACA,oBAAI,CAAJ,EAAO;AACH,wBAAI,IAAJ,CAAS,CAAT;AACH;AACJ,aALD,MAKO;AACH,oBAAI,IAAJ,CAAS,mBAAmB,CAAnB,IAAwB,GAAxB,GAA8B,mBAAmB,CAAnB,CAAvC;AACH;AACJ;AACJ,KAbD;AAcA,WAAO,IAAI,MAAJ,GAAa,IAAI,IAAJ,CAAS,GAAT,CAAb,GAA6B,EAApC;AACH;;IAEK,I;AACF,kBAAY,OAAZ,EAAqB;AAAA;;AACjB,aAAK,OAAL,cAAgB,aAAa,QAA7B,IAA0C,OAA1C;AACH;;;;qCAEY;AACT,iBAAK,SAAL,GAAiB,EAAE,KAAK,OAAL,CAAa,SAAb,IAA0B,MAA5B,EAAoC,KAApC,EAAjB;AACA,iBAAK,MAAL;AACA,mBAAO,IAAP;AACH;;;mCAEU,K,EAAO;AACd,mBAAO,KAAK,OAAL,CAAa,IAAb,CAAkB,2BAA2B,KAA3B,GAAmC,GAArD,CAAP;AACH;;;kCAES,K,EAAO;AACb,mBAAO,KAAK,OAAL,CAAa,IAAb,CAAkB,0BAA0B,KAA1B,GAAkC,GAApD,CAAP;AACH;;;oCAEW,K,EAAO;;AAEf,gBAAI,SAAS,KAAK,UAAL,CAAgB,KAAK,WAArB,CAAb;AACA,gBAAI,QAAQ,KAAK,SAAL,CAAe,KAAK,WAApB,CAAZ;;AAEA,gBAAI,OAAO,KAAP,KAAiB,QAAjB,IAA6B,UAAU,KAAK,WAAhD,EAA6D;AAAA,+BAClB,KAAK,OADa;AAAA,oBAClD,WADkD,YAClD,WADkD;AAAA,oBACrC,eADqC,YACrC,eADqC;;AAEzD,uBAAO,WAAP,CAAmB,WAAnB;AACA,sBAAM,WAAN,CAAkB,WAAlB;AACA,qBAAK,WAAL,GAAmB,KAAnB;AACA,yBAAS,KAAK,UAAL,CAAgB,KAAhB,EAAuB,QAAvB,CAAgC,WAAhC,CAAT;AACA,wBAAQ,KAAK,SAAL,CAAe,KAAf,EAAsB,QAAtB,CAA+B,WAA/B,CAAR;AACA,oBAAI,CAAC,MAAM,IAAN,CAAW,aAAX,CAAL,EAAgC;AAC5B,wBAAI,OAAO,eAAP,KAA2B,UAA/B,EAA2C;AACvC,wCAAgB,IAAhB,CAAqB,IAArB,EAA2B,KAA3B,EAAkC,MAAlC,EAA0C,KAA1C;AACH;AACD,0BAAM,IAAN,CAAW,aAAX,EAA0B,IAA1B;AACH;AACJ;AACD,mBAAO;AACH,8BADG;AAEH;AAFG,aAAP;AAIH;;;iCAEQ;AACL,gBAAM,UAAU,EAAhB;AACA,gBAAM,SAAS,EAAf;AACA,gBAAM,OAAO,IAAb;AACA,iBAAK,OAAL,CAAa,OAAb,CAAqB,OAArB,CAA6B,UAAC,IAAD,EAAO,KAAP,EAAgB;AACzC,wBAAQ,IAAR,+CAAyD,KAAzD,kCAA0F,IAA1F,aAAqG,IAArG;AACA,uBAAO,IAAP,gDAAyD,KAAzD;AACH,aAHD;AAIA,gBAAM,kLAGuB,QAAQ,IAAR,CAAa,EAAb,CAHvB,gKAOoB,OAAO,IAAP,CAAY,EAAZ,CAPpB,6EAAN;AAUA,iBAAK,OAAL,GAAe,EAAE,IAAF,EAAQ,QAAR,CAAiB,KAAK,SAAtB,CAAf;;AAEA,iBAAK,WAAL,CAAiB,KAAK,OAAL,CAAa,YAAb,IAA6B,CAA9C;;AAEA,iBAAK,OAAL,CAAa,EAAb,CAAgB,OAAhB,EAAyB,oBAAzB,EAA+C,UAAU,CAAV,EAAa;AACxD,kBAAE,cAAF;AACA,oBAAM,YAAY,EAAE,IAAF,CAAlB;AACA,oBAAM,QAAQ,UAAU,IAAV,CAAe,OAAf,CAAd;AACA,oBAAI,SAAS,KAAK,WAAlB,EAA+B;AAC3B,yBAAK,WAAL,CAAiB,KAAjB;AACH;AACJ,aAPD;AAQA,mBAAO,IAAP;AACH","file":"utils.js","sourcesContent":["\nfunction request(url, data, method = 'GET') {\n let promise = $.Deferred();\n $.ajax(url, {\n type: method,\n dataType: 'json',\n data,\n success: res=> {\n if (res && res.status == 1) {\n promise.resolve(res.result);\n } else {\n promise.reject({\n code: res && res.code || 0,\n message: res && res.msg || res.message || '系统错误,请稍后再试!'\n });\n }\n },\n error: (xhr, status, text)=> {\n console.log(xhr, status, text);\n promise.reject({\n code: xhr && xhr.status || status,\n message: text\n });\n }\n });\n return promise;\n}\n\n\n\nfunction formatMoney(money = 0) {\n let ret;\n if (isNaN(money)) {\n ret = '0';\n } else if (money >= 1E10) {\n ret = (money / 1E10) + '亿';\n } else if (money >= 1E6) {\n ret = (money / 1E6) + '万';\n } else {\n ret = (money / 1E2);\n }\n return ret;\n}\n\nfunction deserialize(str = location.search) {\n const query = {};\n (str + '').replace(/^\\?/g, '').split('&').forEach(item=> {\n let tmp = (item + '').split('=');\n if (tmp.length) {\n query[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp[1]);\n }\n });\n return query;\n}\n\nfunction serialize(obj, prefix) {\n var str = [];\n Object.keys(obj).map(p=> {\n let v = obj[p];\n if (p && typeof v !== 'undefined') {\n let k = prefix ? prefix + \".\" + p : p;\n if (typeof v == 'object') {\n v = serialize(v, k);\n if (v) {\n str.push(v);\n }\n } else {\n str.push(encodeURIComponent(k) + \"=\" + encodeURIComponent(v));\n }\n }\n });\n return str.length ? str.join(\"&\") : '';\n}\n\nclass Tabs {\n constructor(options) {\n this.options = {activeClass: 'active', ...options};\n }\n\n initialize() {\n this.container = $(this.options.container || 'body').empty();\n this.render();\n return this;\n }\n\n findHeader(index) {\n return this.element.find('.tabs-headers-item:eq(' + index + ')');\n }\n\n findPanel(index) {\n return this.element.find('.tabs-panels-item:eq(' + index + ')');\n }\n\n selectIndex(index) {\n\n let header = this.findHeader(this.activeIndex);\n let panel = this.findPanel(this.activeIndex);\n\n if (typeof index === 'number' && index !== this.activeIndex) {\n const {activeClass, initializePanel} = this.options;\n header.removeClass(activeClass);\n panel.removeClass(activeClass);\n this.activeIndex = index;\n header = this.findHeader(index).addClass(activeClass);\n panel = this.findPanel(index).addClass(activeClass);\n if (!panel.attr('initialized')) {\n if (typeof initializePanel === 'function') {\n initializePanel.call(this, index, header, panel);\n }\n panel.attr('initialized', true);\n }\n }\n return {\n header,\n panel\n };\n }\n\n render() {\n const headers = [];\n const panels = [];\n const self = this;\n this.options.headers.forEach((item, index)=> {\n headers.push(`<a class=\"tabs-headers-item\" data-index=\"${index}\" href=\"javascript:void('${item}')\">${item}</a>`);\n panels.push(`<div class=\"tabs-panels-item\" data-index=\"${index}\"></div>`);\n });\n const 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>`;\n this.element = $(html).appendTo(this.container);\n\n this.selectIndex(this.options.defaultIndex || 0);\n\n this.element.on('click', '.tabs-headers-item', function (e) {\n e.preventDefault();\n const tabHeader = $(this);\n const index = tabHeader.data('index');\n if (index != self.activeIndex) {\n self.selectIndex(index);\n }\n });\n return this;\n }\n\n\n}\n"]}
\ No newline at end of file
{"version":3,"sources":["utils.jsx"],"names":[],"mappings":"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","file":"utils.js","sourcesContent":["\nfunction request(url, data, method = 'GET') {\n let promise = $.Deferred();\n $.ajax(url, {\n type: method,\n dataType: 'json',\n data,\n success: res=> {\n if (res && res.status == 1) {\n promise.resolve(res.result);\n } else {\n promise.reject({\n code: res && res.code || 0,\n message: res && res.msg || res.message || '系统错误,请稍后再试!'\n });\n }\n },\n error: (xhr, status, text)=> {\n console.log(xhr, status, text);\n promise.reject({\n code: xhr && xhr.status || status,\n message: text\n });\n }\n });\n return promise;\n}\n\n\n\nfunction formatMoney(money = 0) {\n let ret;\n if (isNaN(money)) {\n ret = '0';\n } else if (money >= 1E10) {\n ret = (money / 1E10) + '亿';\n } else if (money >= 1E6) {\n ret = (money / 1E6) + '万';\n } else {\n ret = (money / 1E2);\n }\n return ret;\n}\n\nfunction deserialize(str = location.search) {\n const query = {};\n (str + '').replace(/^\\?/g, '').split('&').forEach(item=> {\n let tmp = (item + '').split('=');\n if (tmp.length) {\n query[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp[1]);\n }\n });\n return query;\n}\n\nfunction serialize(obj, prefix) {\n var str = [];\n Object.keys(obj).map(p=> {\n let v = obj[p];\n if (p && typeof v !== 'undefined') {\n let k = prefix ? prefix + \".\" + p : p;\n if (typeof v == 'object') {\n v = serialize(v, k);\n if (v) {\n str.push(v);\n }\n } else {\n str.push(encodeURIComponent(k) + \"=\" + encodeURIComponent(v));\n }\n }\n });\n return str.length ? str.join(\"&\") : '';\n}\n\nclass Tabs {\n constructor(options) {\n this.options = {activeClass: 'active', ...options};\n }\n\n initialize() {\n this.container = $(this.options.container || 'body').empty();\n this.render();\n return this;\n }\n\n findHeader(index) {\n return this.element.find('.tabs-headers-item:eq(' + index + ')');\n }\n\n findPanel(index) {\n return this.element.find('.tabs-panels-item:eq(' + index + ')');\n }\n\n selectIndex(index) {\n\n let header = this.findHeader(this.activeIndex);\n let panel = this.findPanel(this.activeIndex);\n\n if (typeof index === 'number' && index !== this.activeIndex) {\n const {activeClass, initializePanel} = this.options;\n header.removeClass(activeClass);\n panel.removeClass(activeClass);\n this.activeIndex = index;\n header = this.findHeader(index).addClass(activeClass);\n panel = this.findPanel(index).addClass(activeClass);\n if (!panel.attr('initialized')) {\n if (typeof initializePanel === 'function') {\n initializePanel.call(this, index, header, panel);\n }\n panel.attr('initialized', true);\n }\n }\n return {\n header,\n panel\n };\n }\n\n render() {\n const headers = [];\n const panels = [];\n const self = this;\n this.options.headers.forEach((item, index)=> {\n headers.push(`<a class=\"tabs-headers-item\" data-index=\"${index}\" href=\"javascript:void('${item}')\">${item}</a>`);\n panels.push(`<div class=\"tabs-panels-item\" data-index=\"${index}\"></div>`);\n });\n const 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>`;\n this.element = $(html).appendTo(this.container);\n\n this.selectIndex(this.options.defaultIndex || 0);\n\n this.element.on('click', '.tabs-headers-item', function (e) {\n e.preventDefault();\n const tabHeader = $(this);\n const index = tabHeader.data('index');\n if (index != self.activeIndex) {\n self.selectIndex(index);\n }\n });\n return this;\n }\n\n\n}\n"]}
\ No newline at end of file
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
......@@ -113,7 +113,8 @@
text-align: center;
position: relative;
}
.character ul li > div {
.character ul li .projects-count,
.character ul li .projects-content {
position: absolute;
top: 0;
left: 0;
......@@ -126,23 +127,27 @@
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
.character ul li > div:first-child h3 {
.character ul li .projects-count {
display: none \9;
/*IE8 隐藏*/
}
.character ul li .projects-count h3 {
margin-top: 50px;
font-size: 44px;
color: #111d2b;
}
.character ul li > div:first-child h4 {
.character ul li .projects-count h4 {
font-size: 16px;
color: #888;
}
.character ul li > div:last-child img {
.character ul li .projects-content img {
display: block;
margin: auto;
}
.character ul li > div:last-child h3 {
.character ul li .projects-content h3 {
font-size: 36px;
}
.character ul li > div:last-child h4 {
.character ul li .projects-content h4 {
font-size: 14px;
}
.character ul li:nth-child(1) > div:first-child {
......@@ -174,21 +179,22 @@
.projects {
background-color: #f6f6f6;
}
.projects > header > div {
.projects .projects-header .project-header-left,
.projects .projects-header .project-header-right {
float: left;
height: 300px;
position: relative;
width: 50%;
}
.projects > header > div:first-child {
.projects .projects-header .project-header-left {
background-color: #111d2b;
}
.projects > header > div:first-child > div {
.projects .projects-header .project-header-left div {
position: relative;
float: right;
height: 300px;
}
.projects > header > div:first-child > div .logo {
.projects .projects-header .project-header-left div .logo {
position: absolute;
top: 50%;
right: 50px;
......@@ -198,15 +204,15 @@
background: url(/images/index/icon_01.png) no-repeat;
background-size: cover;
}
.projects > header > div:last-child {
.projects .projects-header .project-header-right {
background-color: #2e2e2e;
}
.projects > header > div:last-child > div {
.projects .projects-header .project-header-right div {
position: relative;
background-color: #2e2e2e;
height: 300px;
}
.projects > header > div:last-child h3 {
.projects .projects-header .project-header-right h3 {
position: absolute;
top: 50%;
left: 20px;
......@@ -216,29 +222,29 @@
font-size: 48px;
background: url(/images/index/icon_02.jpg) no-repeat left bottom;
}
.projects > header > div:last-child h3 a {
.projects .projects-header .project-header-right h3 a {
color: #fff;
}
.projects > section {
.projects .section {
width: 1150px;
height: 500px;
margin: 0 auto;
}
.projects > section > div:first-child {
.projects .section .section-left {
width: 454px;
float: left;
margin-top: 50px;
margin-left: 20px;
border-right: 1px solid #7f7f7f;
}
.projects > section > div:first-child p {
.projects .section .section-left li {
position: relative;
margin-top: 20px;
font-size: 23px;
line-height: 30px;
color: #565656;
}
.projects > section > div:first-child p:before {
.projects .section .section-left li:before {
content: '';
width: .2em;
height: .2em;
......@@ -249,12 +255,12 @@
font-size: 50px;
top: 10px;
}
.projects > section > div:last-child {
.projects .section .section-right {
width: 675px;
float: left;
position: relative;
}
.projects > section > div:last-child .computer {
.projects .section .section-right .computer {
position: absolute;
top: -80px;
right: 0;
......@@ -268,7 +274,6 @@
background-color: #f6f6f6;
}
.products ul {
width: 1150px;
margin: 0 auto;
padding-bottom: 50px;
}
......@@ -276,115 +281,102 @@
position: relative;
color: #fff;
}
.products ul li:nth-child(1),
.products ul li:nth-child(2) {
margin-bottom: 30px;
}
.products ul li:nth-child(1) > div,
.products ul li:nth-child(2) > div {
.products ul li.products-image-large .products-image,
.products ul li.products-image-large .products-detail {
height: 400px;
float: left;
}
.products ul li:nth-child(1) > div:first-child,
.products ul li:nth-child(2) > div:first-child {
width: 756.66666667px;
.products ul li.products-image-large .products-image {
margin-right: 30px;
background-size: cover;
}
.products ul li:nth-child(1) > div:last-child,
.products ul li:nth-child(2) > div:last-child {
.products ul li.products-image-large .products-detail {
width: 363.33333333px;
background-color: #2e2e2e;
text-align: center;
}
.products ul li:nth-child(1) > div:last-child h3,
.products ul li:nth-child(2) > div:last-child h3 {
.products ul li.products-image-large .products-detail h3 {
font-size: 25px;
margin-top: 80px;
text-align: center;
}
.products ul li:nth-child(1) > div:last-child hr,
.products ul li:nth-child(2) > div:last-child hr {
.products ul li.products-image-large .products-detail hr {
width: 237px;
border: none;
border-bottom: 1px solid #979797;
margin: 7px auto 20px;
}
.products ul li:nth-child(1) > div:last-child > div,
.products ul li:nth-child(2) > div:last-child > div {
.products ul li.products-image-large .products-detail div {
width: 100%;
margin-bottom: 24px;
}
.products ul li:nth-child(1) > div:last-child > div span,
.products ul li:nth-child(2) > div:last-child > div span {
.products ul li.products-image-large .products-detail div span {
width: 33%;
display: block;
float: left;
font-size: 16px;
}
.products ul li:nth-child(1) > div:last-child > div span strong,
.products ul li:nth-child(2) > div:last-child > div span strong {
.products ul li.products-image-large .products-detail div span strong {
font-size: 32px;
font-weight: normal;
}
.products ul li:nth-child(1) > div:last-child a,
.products ul li:nth-child(2) > div:last-child a {
.products ul li.products-image-large .products-detail a {
font-size: 14px;
color: #fff;
}
.products ul li:nth-child(n+3) {
.products ul li.products-image-small {
float: left;
width: 363.33333333px;
height: 400px;
position: relative;
margin-right: 30px;
}
.products ul li:nth-child(n+3):last-child {
.products ul li.products-image-small.last-one {
margin-right: 0;
}
.products ul li:nth-child(n+3) > div {
.products ul li.products-image-small .products-image,
.products ul li.products-image-small .products-detail {
position: absolute;
width: 100%;
height: 100%;
}
.products ul li:nth-child(n+3) > div:first-child {
.products ul li.products-image-small .products-image {
background-size: cover;
}
.products ul li:nth-child(n+3) > div:last-child {
.products ul li.products-image-small .products-detail {
position: relative;
transition: background .3s;
}
.products ul li:nth-child(n+3) > div:last-child:hover {
.products ul li.products-image-small .products-detail:hover {
background-color: rgba(0, 0, 0, 0.75);
}
.products ul li:nth-child(n+3) > div:last-child h3 {
.products ul li.products-image-small .products-detail h3 {
font-size: 25px;
padding-top: 80px;
text-align: center;
line-height: 30px;
}
.products ul li:nth-child(n+3) > div:last-child hr {
.products ul li.products-image-small .products-detail hr {
border: transparent;
}
.products ul li:nth-child(n+3) > div:last-child > div:nth-child(3) {
.products ul li.products-image-small .products-detail .products-data {
width: 100%;
margin-bottom: 24px;
position: absolute;
left: 0;
top: 152px;
}
.products ul li:nth-child(n+3) > div:last-child > div:nth-child(3) span {
.products ul li.products-image-small .products-detail .products-data span {
width: 33%;
display: block;
float: left;
font-size: 16px;
text-align: center;
}
.products ul li:nth-child(n+3) > div:last-child > div:nth-child(3) span strong {
.products ul li.products-image-small .products-detail .products-data span strong {
font-size: 32px;
font-weight: normal;
}
.products ul li:nth-child(n+3) > div:last-child > div:last-child {
.products ul li.products-image-small .products-detail .products-link {
position: absolute;
top: 270px;
left: 0;
......@@ -392,7 +384,7 @@
text-align: center;
font-size: 14px;
}
.products ul li:nth-child(n+3) > div:last-child > div:last-child a {
.products ul li.products-image-small .products-detail .products-link a {
color: #fff;
}
/*product end*/
......@@ -413,40 +405,37 @@
body .character ul {
width: 990px;
}
body .projects > header > div:first-child > div {
body .projects .projects-header .project-header-left div {
width: 297.5px;
margin-right: 197.5px;
}
body .projects > header > div:last-child > div {
body .projects .projects-header .project-header-right div {
width: 692.5px;
margin-left: -197.5px;
}
body .projects > section {
body .projects .section {
width: 990px;
}
body .projects > section > div:first-child {
body .projects .section .section-left {
width: 374px;
}
body .projects > section > div:last-child {
body .projects .section .section-right {
width: 595px;
}
body .products ul {
width: 990px;
}
body .products ul li:nth-child(1),
body .products ul li:nth-child(2) {
body .products ul li.products-image-large {
margin-bottom: 30px;
}
body .products ul li:nth-child(1) > div:first-child,
body .products ul li:nth-child(2) > div:first-child {
body .products ul li.products-image-large .products-image {
width: 650px;
margin-right: 30px;
}
body .products ul li:nth-child(1) > div:last-child,
body .products ul li:nth-child(2) > div:last-child {
body .products ul li.products-image-large .products-detail {
width: 310px;
}
body .products ul li:nth-child(n+3) {
body .products ul li.products-image-small {
width: 310px;
margin-right: 30px;
}
......@@ -468,40 +457,37 @@
body .character ul {
width: 1150px;
}
body .projects > header > div:first-child > div {
body .projects .projects-header .project-header-left div {
width: 337.5px;
margin-right: 237.5px;
}
body .projects > header > div:last-child > div {
body .projects .projects-header .project-header-right div {
width: 812.5px;
margin-left: -237.5px;
}
body .projects > section {
body .projects .section {
width: 1150px;
}
body .projects > section > div:first-child {
body .projects .section .section-left {
width: 454px;
}
body .projects > section > div:last-child {
body .projects .section .section-right {
width: 675px;
}
body .products ul {
width: 1150px;
}
body .products ul li:nth-child(1),
body .products ul li:nth-child(2) {
body .products ul li.products-image-large {
margin-bottom: 34.84848485px;
}
body .products ul li:nth-child(1) > div:first-child,
body .products ul li:nth-child(2) > div:first-child {
body .products ul li.products-image-large .products-image {
width: 755.05050505px;
margin-right: 34.84848485px;
}
body .products ul li:nth-child(1) > div:last-child,
body .products ul li:nth-child(2) > div:last-child {
body .products ul li.products-image-large .products-detail {
width: 360.1010101px;
}
body .products ul li:nth-child(n+3) {
body .products ul li.products-image-small {
width: 360.1010101px;
margin-right: 34.84848485px;
}
......@@ -523,40 +509,37 @@
body .character ul {
width: 1360px;
}
body .projects > header > div:first-child > div {
body .projects .projects-header .project-header-left div {
width: 390px;
margin-right: 290px;
}
body .projects > header > div:last-child > div {
body .projects .projects-header .project-header-right div {
width: 970px;
margin-left: -290px;
}
body .projects > section {
body .projects .section {
width: 1360px;
}
body .projects > section > div:first-child {
body .projects .section .section-left {
width: 559px;
}
body .projects > section > div:last-child {
body .projects .section .section-right {
width: 780px;
}
body .products ul {
width: 1360px;
}
body .products ul li:nth-child(1),
body .products ul li:nth-child(2) {
body .products ul li.products-image-large {
margin-bottom: 41.21212121px;
}
body .products ul li:nth-child(1) > div:first-child,
body .products ul li:nth-child(2) > div:first-child {
body .products ul li.products-image-large .products-image {
width: 892.92929293px;
margin-right: 41.21212121px;
}
body .products ul li:nth-child(1) > div:last-child,
body .products ul li:nth-child(2) > div:last-child {
body .products ul li.products-image-large .products-detail {
width: 425.85858586px;
}
body .products ul li:nth-child(n+3) {
body .products ul li.products-image-small {
width: 425.85858586px;
margin-right: 41.21212121px;
}
......
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