Commit ede609d0 authored by liaili's avatar liaili

update-four

parent d1b65ce2
...@@ -7,56 +7,26 @@ ...@@ -7,56 +7,26 @@
(function () { (function () {
var explorer = window.navigator.userAgent; var explorer = window.navigator.userAgent;
var sw = $(window).width(); var sw = $(window).width();
var cw = 0; // var cw = 0;
function setClientWidth(sw, cw) { function setClientWidth(sw, cw) {
if (explorer.indexOf('MSIE') >= 0) { if (explorer.indexOf('MSIE') >= 0) {
if (sw >= 1441) {
cw = sw > 1441 ? 1360 : sw > 1281 ? 1150 : 990; $('#containerBox').css('className', '').addClass('container-width-large');
} else if (sw >= 1281) {
//index $('#containerBox').css('className', '').addClass('container-width');
$('.banner-box').width(cw); } else if (sw >= 869) {
$('.download').width(cw); $('#containerBox').css('className', '').addClass('container-width-small');
$('ul', '.character').width(cw); }
$('.section', '.projects').width(cw);
$('.project-header-left', '.projects-header').width(sw / 10 * 4);
$('.project-header-right', '.projects-header').width(sw / 10 * 6);
$('.products ul').width(cw);
$('.products-image-large').css({
marginTop: cw / 33,
marginBottom: cw / 33
});
$('.products-image', '.products-image-large').css({
width: (cw + cw / 33) / 3 * 2 - cw / 33,
marginRight: cw / 33
});
$('.products-detail').width((cw + cw / 33) / 3 - cw / 33);
$('.products-image-small').css({
width: (cw + cw / 33) / 3 - cw / 33,
marginRight: cw / 33
});
$('.products-image-small:last').css('marginRight', 0);
//project
$('p', '.hot-project-banner').width(cw / 2);
$('.hot-project-introducer').width(cw);
$('.hot-project-tabs ul').width(cw);
$('.container', '#header').width(cw);
$('.nav', '#header').css('paddingLeft', cw / 4);
//about
$('p', '.about-us-banner-bottom').width(cw);
$('.company-introduction-box').width(cw);
} }
} }
//初始化 //初始化
setClientWidth(sw, cw); setClientWidth(sw);
$(window).resize(function () { $(window).resize(function () {
sw = $(undefined).width(); sw = $(undefined).width();
setClientWidth(sw, cw); setClientWidth(sw);
}); });
})(); })();
......
{"version":3,"sources":["layout-ie8.jsx"],"names":[],"mappings":";;AAAA;;;AAGA;AACA,CAAC,YAAK;AACF,QAAI,WAAW,OAAO,SAAP,CAAiB,SAAhC;AACA,QAAI,KAAK,EAAE,MAAF,EAAU,KAAV,EAAT;AACA,QAAI,KAAK,CAAT;;AAEA,aAAS,cAAT,CAAwB,EAAxB,EAA4B,EAA5B,EAAgC;AAC5B,YAAI,SAAS,OAAT,CAAiB,MAAjB,KAA4B,CAAhC,EAAmC;;AAE/B,iBAAK,KAAK,IAAL,GAAY,IAAZ,GAAmB,KAAK,IAAL,GAAY,IAAZ,GAAmB,GAA3C;;AAEA;AACA,cAAE,aAAF,EAAiB,KAAjB,CAAuB,EAAvB;AACA,cAAE,WAAF,EAAe,KAAf,CAAqB,EAArB;AACA,cAAE,IAAF,EAAO,YAAP,EAAqB,KAArB,CAA2B,EAA3B;AACA,cAAE,UAAF,EAAa,WAAb,EAA0B,KAA1B,CAAgC,EAAhC;;AAEA,cAAE,sBAAF,EAAyB,kBAAzB,EAA6C,KAA7C,CAAmD,KAAG,EAAH,GAAM,CAAzD;AACA,cAAE,uBAAF,EAA0B,kBAA1B,EAA8C,KAA9C,CAAoD,KAAG,EAAH,GAAM,CAA1D;AACA,cAAE,cAAF,EAAkB,KAAlB,CAAwB,EAAxB;AACA,cAAE,uBAAF,EAA2B,GAA3B,CAA+B;AAC3B,2BAAY,KAAK,EADU;AAE3B,8BAAe,KAAK;AAFO,aAA/B;AAIA,cAAE,iBAAF,EAAoB,uBAApB,EAA6C,GAA7C,CAAiD;AAC7C,uBAAO,CAAC,KAAM,KAAK,EAAZ,IAAmB,CAAnB,GAAuB,CAAvB,GAA4B,KAAK,EADK;AAE7C,6BAAa,KAAK;AAF2B,aAAjD;AAIA,cAAE,kBAAF,EAAsB,KAAtB,CAA4B,CAAC,KAAM,KAAK,EAAZ,IAAmB,CAAnB,GAAwB,KAAK,EAAzD;AACA,cAAE,uBAAF,EAA2B,GAA3B,CAA+B;AAC3B,uBAAM,CAAC,KAAM,KAAK,EAAZ,IAAmB,CAAnB,GAAwB,KAAK,EADR;AAE3B,6BAAY,KAAG;AAFY,aAA/B;AAIA,cAAE,4BAAF,EAAgC,GAAhC,CAAoC,aAApC,EAAkD,CAAlD;;AAGA;AACA,cAAE,GAAF,EAAM,qBAAN,EAA6B,KAA7B,CAAmC,KAAK,CAAxC;AACA,cAAE,yBAAF,EAA6B,KAA7B,CAAmC,EAAnC;AACA,cAAE,sBAAF,EAA0B,KAA1B,CAAgC,EAAhC;AACA,cAAE,YAAF,EAAe,SAAf,EAA0B,KAA1B,CAAgC,EAAhC;AACA,cAAE,MAAF,EAAS,SAAT,EAAoB,GAApB,CAAwB,aAAxB,EAAsC,KAAG,CAAzC;;AAEA;AACA,cAAE,GAAF,EAAM,yBAAN,EAAiC,KAAjC,CAAuC,EAAvC;AACA,cAAE,2BAAF,EAA+B,KAA/B,CAAqC,EAArC;AACH;AACJ;;AAED;AACA,mBAAe,EAAf,EAAmB,EAAnB;;AAEA,MAAE,MAAF,EAAU,MAAV,CAAkB,YAAM;AACpB,aAAK,aAAQ,KAAR,EAAL;AACA,uBAAe,EAAf,EAAmB,EAAnB;AACH,KAHD;AAIH,CAvDD","file":"layout-ie8.js","sourcesContent":["/**\n * Created by liaili on 16/8/16.\n */\n//判断IE浏览器\n(()=> {\n var explorer = window.navigator.userAgent;\n var sw = $(window).width();\n var cw = 0;\n\n function setClientWidth(sw, cw) {\n if (explorer.indexOf('MSIE') >= 0) {\n\n cw = sw > 1441 ? 1360 : sw > 1281 ? 1150 : 990;\n\n //index\n $('.banner-box').width(cw);\n $('.download').width(cw);\n $('ul','.character').width(cw);\n $('.section','.projects').width(cw);\n\n $('.project-header-left','.projects-header').width(sw/10*4);\n $('.project-header-right','.projects-header').width(sw/10*6);\n $('.products ul').width(cw);\n $('.products-image-large').css({\n marginTop: (cw / 33),\n marginBottom: (cw / 33)\n });\n $('.products-image','.products-image-large').css({\n width: (cw + (cw / 33)) / 3 * 2 - (cw / 33),\n marginRight: cw / 33\n });\n $('.products-detail').width((cw + (cw / 33)) / 3 - (cw / 33));\n $('.products-image-small').css({\n width:(cw + (cw / 33)) / 3 - (cw / 33),\n marginRight:cw/33\n });\n $('.products-image-small:last').css('marginRight',0);\n\n\n //project\n $('p','.hot-project-banner').width(cw / 2);\n $('.hot-project-introducer').width(cw);\n $('.hot-project-tabs ul').width(cw);\n $('.container','#header').width(cw);\n $('.nav','#header').css('paddingLeft',cw/4);\n\n //about\n $('p','.about-us-banner-bottom').width(cw);\n $('.company-introduction-box').width(cw);\n }\n }\n\n //初始化\n setClientWidth(sw, cw);\n\n $(window).resize( () => {\n sw = $(this).width();\n setClientWidth(sw, cw);\n })\n})();"]} {"version":3,"sources":["layout-ie8.jsx"],"names":[],"mappings":";;AAAA;;;AAGA;AACA,CAAC,YAAK;AACF,QAAI,WAAW,OAAO,SAAP,CAAiB,SAAhC;AACA,QAAI,KAAK,EAAE,MAAF,EAAU,KAAV,EAAT;AACA;;AAEA,aAAS,cAAT,CAAwB,EAAxB,EAA4B,EAA5B,EAAgC;AAC5B,YAAI,SAAS,OAAT,CAAiB,MAAjB,KAA4B,CAAhC,EAAmC;AAC/B,gBAAG,MAAI,IAAP,EAAY;AACR,kBAAE,eAAF,EAAmB,GAAnB,CAAuB,WAAvB,EAAmC,EAAnC,EAAuC,QAAvC,CAAgD,uBAAhD;AACH,aAFD,MAEM,IAAG,MAAI,IAAP,EAAY;AACd,kBAAE,eAAF,EAAmB,GAAnB,CAAuB,WAAvB,EAAmC,EAAnC,EAAuC,QAAvC,CAAgD,iBAAhD;AACH,aAFK,MAEA,IAAG,MAAI,GAAP,EAAW;AACb,kBAAE,eAAF,EAAmB,GAAnB,CAAuB,WAAvB,EAAmC,EAAnC,EAAuC,QAAvC,CAAgD,uBAAhD;AACH;AACJ;AACJ;;AAED;AACA,mBAAe,EAAf;;AAEA,MAAE,MAAF,EAAU,MAAV,CAAkB,YAAM;AACpB,aAAK,aAAQ,KAAR,EAAL;AACA,uBAAe,EAAf;AACH,KAHD;AAIH,CAxBD","file":"layout-ie8.js","sourcesContent":["/**\n * Created by liaili on 16/8/16.\n */\n//判断IE浏览器\n(()=> {\n var explorer = window.navigator.userAgent;\n var sw = $(window).width();\n // var cw = 0;\n\n function setClientWidth(sw, cw) {\n if (explorer.indexOf('MSIE') >= 0) {\n if(sw>=1441){\n $('#containerBox').css('className','').addClass('container-width-large')\n }else if(sw>=1281){\n $('#containerBox').css('className','').addClass('container-width')\n }else if(sw>=869){\n $('#containerBox').css('className','').addClass('container-width-small')\n }\n }\n }\n\n //初始化\n setClientWidth(sw);\n \n $(window).resize( () => {\n sw = $(this).width();\n setClientWidth(sw);\n })\n})();"]}
\ No newline at end of file \ No newline at end of file
...@@ -5,56 +5,25 @@ ...@@ -5,56 +5,25 @@
(()=> { (()=> {
var explorer = window.navigator.userAgent; var explorer = window.navigator.userAgent;
var sw = $(window).width(); var sw = $(window).width();
var cw = 0; // var cw = 0;
function setClientWidth(sw, cw) { function setClientWidth(sw, cw) {
if (explorer.indexOf('MSIE') >= 0) { if (explorer.indexOf('MSIE') >= 0) {
if(sw>=1441){
cw = sw > 1441 ? 1360 : sw > 1281 ? 1150 : 990; $('#containerBox').css('className','').addClass('container-width-large')
}else if(sw>=1281){
//index $('#containerBox').css('className','').addClass('container-width')
$('.banner-box').width(cw); }else if(sw>=869){
$('.download').width(cw); $('#containerBox').css('className','').addClass('container-width-small')
$('ul','.character').width(cw); }
$('.section','.projects').width(cw);
$('.project-header-left','.projects-header').width(sw/10*4);
$('.project-header-right','.projects-header').width(sw/10*6);
$('.products ul').width(cw);
$('.products-image-large').css({
marginTop: (cw / 33),
marginBottom: (cw / 33)
});
$('.products-image','.products-image-large').css({
width: (cw + (cw / 33)) / 3 * 2 - (cw / 33),
marginRight: cw / 33
});
$('.products-detail').width((cw + (cw / 33)) / 3 - (cw / 33));
$('.products-image-small').css({
width:(cw + (cw / 33)) / 3 - (cw / 33),
marginRight:cw/33
});
$('.products-image-small:last').css('marginRight',0);
//project
$('p','.hot-project-banner').width(cw / 2);
$('.hot-project-introducer').width(cw);
$('.hot-project-tabs ul').width(cw);
$('.container','#header').width(cw);
$('.nav','#header').css('paddingLeft',cw/4);
//about
$('p','.about-us-banner-bottom').width(cw);
$('.company-introduction-box').width(cw);
} }
} }
//初始化 //初始化
setClientWidth(sw, cw); setClientWidth(sw);
$(window).resize( () => { $(window).resize( () => {
sw = $(this).width(); sw = $(this).width();
setClientWidth(sw, cw); setClientWidth(sw);
}) })
})(); })();
\ No newline at end of file
"use strict"; "use strict";
(function() { (function() {
var t = window.navigator.userAgent; var i = window.navigator.userAgent;
var i = $(window).width(); var n = $(window).width();
var e = 0; function s(n, s) {
function r(i, e) { if (i.indexOf("MSIE") >= 0) {
if (t.indexOf("MSIE") >= 0) { if (n >= 1441) {
e = i > 1441 ? 1360 : i > 1281 ? 1150 : 990; $("#containerBox").css("className", "").addClass("container-width-large");
$(".banner-box").width(e); } else if (n >= 1281) {
$(".download").width(e); $("#containerBox").css("className", "").addClass("container-width");
$("ul", ".character").width(e); } else if (n >= 869) {
$(".section", ".projects").width(e); $("#containerBox").css("className", "").addClass("container-width-small");
$(".project-header-left", ".projects-header").width(i / 10 * 4); }
$(".project-header-right", ".projects-header").width(i / 10 * 6);
$(".products ul").width(e);
$(".products-image-large").css({
marginTop: e / 33,
marginBottom: e / 33
});
$(".products-image", ".products-image-large").css({
width: (e + e / 33) / 3 * 2 - e / 33,
marginRight: e / 33
});
$(".products-detail").width((e + e / 33) / 3 - e / 33);
$(".products-image-small").css({
width: (e + e / 33) / 3 - e / 33,
marginRight: e / 33
});
$(".products-image-small:last").css("marginRight", 0);
$("p", ".hot-project-banner").width(e / 2);
$(".hot-project-introducer").width(e);
$(".hot-project-tabs ul").width(e);
$(".container", "#header").width(e);
$(".nav", "#header").css("paddingLeft", e / 4);
$("p", ".about-us-banner-bottom").width(e);
$(".company-introduction-box").width(e);
} }
} }
r(i, e); s(n);
$(window).resize(function() { $(window).resize(function() {
i = $(undefined).width(); n = $(undefined).width();
r(i, e); s(n);
}); });
})(); })();
\ No newline at end of file
...@@ -3,18 +3,7 @@ ...@@ -3,18 +3,7 @@
border-right: none; border-right: none;
} }
/*公共样式 结束*/ /*公共样式 结束*/
/* .about-us-banner start */
.about-us-banner .banner-box {
padding: 160px 0 130px;
}
/* .about-us-banner end */
/* .company-introduction start */ /* .company-introduction start */
.company-introduction .company-introduction-box {
margin: 0 auto;
}
.company-introduction .gudong-list li {
height: auto;
}
.company-introduction .friend-list a.clear-bl:before { .company-introduction .friend-list a.clear-bl:before {
border-left: none; border-left: none;
} }
...@@ -22,3 +11,36 @@ ...@@ -22,3 +11,36 @@
border-top: none; border-top: none;
} }
/* .company-introduction end */ /* .company-introduction end */
.container-width-small .company-introduction > .company-introduction-box,
.container-width-small .about-us-banner .banner-box {
width: 990px;
}
.container-width-small .company-introduction .friend-list a {
width: 247.5px;
height: 247.5px;
}
.container-width-small .about-us-banner-bottom p {
width: 990px;
}
.container-width .company-introduction > .company-introduction-box,
.container-width .about-us-banner .banner-box {
width: 1150px;
}
.container-width .company-introduction .friend-list a {
width: 287.5px;
height: 287.5px;
}
.container-width .about-us-banner-bottom p {
width: 1150px;
}
.container-width-large .company-introduction > .company-introduction-box,
.container-width-large .about-us-banner .banner-box {
width: 1360px;
}
.container-width-large .company-introduction .friend-list a {
width: 340px;
height: 340px;
}
.container-width-large .about-us-banner-bottom p {
width: 1360px;
}
//IE8 //IE8
@import "variable";
/*公共样式 开始*/ /*公共样式 开始*/
.clear-br { .clear-br {
border-right: none; border-right: none;
} }
/*公共样式 结束*/ /*公共样式 结束*/
/* .about-us-banner start */
.about-us-banner {
.banner-box {
padding: 160px 0 130px;
}
}
/* .about-us-banner end */
/* .company-introduction start */ /* .company-introduction start */
.company-introduction { .company-introduction {
.company-introduction-box {
//width: 950px;
margin: 0 auto;
}
.gudong-list {
li {
height: auto;
}
}
.friend-list { .friend-list {
a{ a{
&.clear-bl:before { &.clear-bl:before {
...@@ -42,3 +22,55 @@ ...@@ -42,3 +22,55 @@
} }
/* .company-introduction end */ /* .company-introduction end */
.container-width-small{
.company-introduction > .company-introduction-box,
.about-us-banner .banner-box {
width: @container-width-small;
}
.company-introduction {
.friend-list a {
width: @container-width-small/4;
height: @container-width-small/4;
}
}
.about-us-banner-bottom {
p {
width: @container-width-small;
}
}
}
.container-width{
.company-introduction > .company-introduction-box,
.about-us-banner .banner-box {
width: @container-width;
}
.company-introduction {
.friend-list a {
width: @container-width/4;
height: @container-width/4;
}
}
.about-us-banner-bottom {
p {
width: @container-width;
}
}
}
.container-width-large{
.company-introduction > .company-introduction-box,
.about-us-banner .banner-box {
width: @container-width-large;
}
.company-introduction {
.friend-list a {
width: @container-width-large/4;
height: @container-width-large/4;
}
}
.about-us-banner-bottom {
p {
width: @container-width-large;
}
}
}
\ No newline at end of file
...@@ -192,7 +192,7 @@ ...@@ -192,7 +192,7 @@
} }
/* .address-map */ /* .address-map */
@media screen and (min-width: 769px) { @media screen and (min-width: 769px) {
body .company-introduction > div, body .company-introduction > .company-introduction-box,
body .about-us-banner .banner-box { body .about-us-banner .banner-box {
width: 990px; width: 990px;
} }
...@@ -205,7 +205,7 @@ ...@@ -205,7 +205,7 @@
} }
} }
@media screen and (min-width: 1281px) { @media screen and (min-width: 1281px) {
body .company-introduction > div, body .company-introduction > .company-introduction-box,
body .about-us-banner .banner-box { body .about-us-banner .banner-box {
width: 1150px; width: 1150px;
} }
...@@ -218,7 +218,7 @@ ...@@ -218,7 +218,7 @@
} }
} }
@media screen and (min-width: 1441px) { @media screen and (min-width: 1441px) {
body .company-introduction > div, body .company-introduction > .company-introduction-box,
body .about-us-banner .banner-box { body .about-us-banner .banner-box {
width: 1360px; width: 1360px;
} }
......
...@@ -223,7 +223,7 @@ ...@@ -223,7 +223,7 @@
} }
.rules(@cw) { .rules(@cw) {
.company-introduction > div, .company-introduction > .company-introduction-box,
.about-us-banner .banner-box { .about-us-banner .banner-box {
width: @cw; width: @cw;
} }
......
/*.banner begin*/ /*projects start*/
/*.banner end*/ .projects .section .section-left li:before {
/*.download begin*/ content: '●';
.download .android, width: 0;
.download .iphone { height: 0;
position: absolute; margin-top: -14px;
left: 10%; font-size: 22px;
} color: #565656;
.download .qr-code { }
position: absolute; /*projects end*/
left: 50%;
}
/*download end*/
/*product begin*/ /*product begin*/
.products ul li.products-image-large { .products ul li.products-image-large {
margin-bottom: 25px; margin-bottom: 25px;
...@@ -32,3 +29,153 @@ ...@@ -32,3 +29,153 @@
margin-right: 25px; margin-right: 25px;
} }
/*product end*/ /*product end*/
.container-width-small .banner .banner-box {
width: 990px;
}
.container-width-small .download {
width: 990px;
}
.container-width-small .download .android,
.container-width-small .download .iphone {
margin-left: -467px;
}
.container-width-small .download .app-screen {
margin-left: 10px;
}
.container-width-small .character ul {
width: 990px;
}
.container-width-small .projects .projects-header .project-header-left div {
width: 297.5px;
margin-right: 197.5px;
}
.container-width-small .projects .projects-header .project-header-right div {
width: 692.5px;
margin-left: -197.5px;
}
.container-width-small .projects .section {
width: 990px;
}
.container-width-small .projects .section .section-left {
width: 374px;
}
.container-width-small .projects .section .section-right {
width: 595px;
}
.container-width-small .products ul {
width: 990px;
}
.container-width-small .products ul li.products-image-large {
margin-bottom: 30px;
}
.container-width-small .products ul li.products-image-large .products-image {
width: 650px;
margin-right: 30px;
}
.container-width-small .products ul li.products-image-large .products-detail {
width: 310px;
}
.container-width-small .products ul li.products-image-small {
width: 310px;
margin-right: 30px;
}
.container-width .banner .banner-box {
width: 1150px;
}
.container-width .download {
width: 1150px;
}
.container-width .download .android,
.container-width .download .iphone {
margin-left: -500px;
}
.container-width .download .app-screen {
margin-left: 50px;
}
.container-width .character ul {
width: 1150px;
}
.container-width .projects .projects-header .project-header-left div {
width: 337.5px;
margin-right: 237.5px;
}
.container-width .projects .projects-header .project-header-right div {
width: 812.5px;
margin-left: -237.5px;
}
.container-width .projects .section {
width: 1150px;
}
.container-width .projects .section .section-left {
width: 454px;
}
.container-width .projects .section .section-right {
width: 675px;
}
.container-width .products ul {
width: 1150px;
}
.container-width .products ul li.products-image-large {
margin-bottom: 34.84848485px;
}
.container-width .products ul li.products-image-large .products-image {
width: 755.05050505px;
margin-right: 34.84848485px;
}
.container-width .products ul li.products-image-large .products-detail {
width: 360.1010101px;
}
.container-width .products ul li.products-image-small {
width: 360.1010101px;
margin-right: 34.84848485px;
}
.container-width-large .banner .banner-box {
width: 1360px;
}
.container-width-large .download {
width: 1360px;
}
.container-width-large .download .android,
.container-width-large .download .iphone {
margin-left: -540px;
}
.container-width-large .download .app-screen {
margin-left: 120px;
}
.container-width-large .character ul {
width: 1360px;
}
.container-width-large .projects .projects-header .project-header-left div {
width: 390px;
margin-right: 290px;
}
.container-width-large .projects .projects-header .project-header-right div {
width: 970px;
margin-left: -290px;
}
.container-width-large .projects .section {
width: 1360px;
}
.container-width-large .projects .section .section-left {
width: 559px;
}
.container-width-large .projects .section .section-right {
width: 780px;
}
.container-width-large .products ul {
width: 1360px;
}
.container-width-large .products ul li.products-image-large {
margin-bottom: 41.21212121px;
}
.container-width-large .products ul li.products-image-large .products-image {
width: 892.92929293px;
margin-right: 41.21212121px;
}
.container-width-large .products ul li.products-image-large .products-detail {
width: 425.85858586px;
}
.container-width-large .products ul li.products-image-small {
width: 425.85858586px;
margin-right: 41.21212121px;
}
//IE8 //IE8
@import 'variable';
/*.banner begin*/ /*projects start*/
.banner { .projects {
.banner-box { .section {
//width: 950px; .section-left li:before {
} content: '●';
} width: 0;
/*.banner end*/ height: 0;
margin-top: -14px;
font-size: 22px;
/*.download begin*/ color: #565656;
.download {
//width: 950px;
.android,
.iphone {
position: absolute;
left:10%;
} }
.qr-code {
position: absolute;
left:50%;
} }
} }
/*download end*/ /*projects end*/
/*product begin*/ /*product begin*/
.products { .products {
ul { ul {
...@@ -50,7 +40,236 @@ ...@@ -50,7 +40,236 @@
} }
} }
} }
/*product end*/
///////////////////////
/*product end*/ .container-width-small{
.banner {
.banner-box {
width: @container-width-small;
}
}
.download {
width: @container-width-small;
.download-element(-467px, 10px);
.download-element(@a, @b) {
.android,
.iphone {
margin-left: @a;
}
.app-screen {
margin-left: @b;
}
}
}
.character {
ul {
width: @container-width-small;
}
}
.projects {
.projects-header {
.project-header-left{
div {
width: @container-width-small/4 + 50;
margin-right: @container-width-small/4 - 50;
}
}
.project-header-right{
div {
width: @container-width-small / 4 * 3 - 50;
margin-left: -@container-width-small/4 + 50;
}
}
}
.section {
width: @container-width-small;
.section-left {
width: @container-width-small/2-121;
}
.section-right {
width: @container-width-small/2+100;
}
}
}
.products {
ul {
width: @container-width-small;
@mr: @container-width-small/33;
li {
&.products-image-large {
margin-bottom: @mr;
.products-image {
width: (@container-width-small + @mr)/3*2-@mr;
margin-right: @mr;
}
.products-detail {
width: (@container-width-small + @mr)/3-@mr;
}
margin-bottom: @mr;
}
&.products-image-small {
width: (@container-width-small + @mr)/3-@mr;
margin-right: @mr;
}
}
}
}
}
.container-width{
.banner {
.banner-box {
width: @container-width;
}
}
.download {
width: @container-width;
.download-element(-500px, 50px);
.download-element(@a, @b) {
.android,
.iphone {
margin-left: @a;
}
.app-screen {
margin-left: @b;
}
}
}
.character {
ul {
width: @container-width;
}
}
.projects {
.projects-header {
.project-header-left{
div {
width: @container-width/4 + 50;
margin-right: @container-width/4 - 50;
}
}
.project-header-right{
div {
width: @container-width/ 4 * 3 - 50;
margin-left: -@container-width/4 + 50;
}
}
}
.section {
width: @container-width;
.section-left {
width: @container-width/2-121;
}
.section-right {
width: @container-width/2+100;
}
}
}
.products {
ul {
width: @container-width;
@mr: @container-width/33;
li {
&.products-image-large {
margin-bottom: @mr;
.products-image {
width: (@container-width + @mr)/3*2-@mr;
margin-right: @mr;
}
.products-detail {
width: (@container-width + @mr)/3-@mr;
}
margin-bottom: @mr;
}
&.products-image-small {
width: (@container-width + @mr)/3-@mr;
margin-right: @mr;
}
}
}
}
}
.container-width-large{
.banner {
.banner-box {
width: @container-width-large;
}
}
.download {
width: @container-width-large;
.download-element(-540px, 120px);
.download-element(@a, @b) {
.android,
.iphone {
margin-left: @a;
}
.app-screen {
margin-left: @b;
}
}
}
.character {
ul {
width: @container-width-large;
}
}
.projects {
.projects-header {
.project-header-left{
div {
width: @container-width-large/4 + 50;
margin-right: @container-width-large/4 - 50;
}
}
.project-header-right{
div {
width: @container-width-large / 4 * 3 - 50;
margin-left: -@container-width-large/4 + 50;
}
}
}
.section {
width: @container-width-large;
.section-left {
width: @container-width-large/2-121;
}
.section-right {
width: @container-width-large/2+100;
}
}
}
.products {
ul {
width: @container-width-large;
@mr: @container-width-large/33;
li {
&.products-image-large {
margin-bottom: @mr;
.products-image {
width: (@container-width-large + @mr)/3*2-@mr;
margin-right: @mr;
}
.products-detail {
width: (@container-width-large + @mr)/3-@mr;
}
margin-bottom: @mr;
}
&.products-image-small {
width: (@container-width-large + @mr)/3-@mr;
margin-right: @mr;
}
}
}
}
}
...@@ -221,18 +221,16 @@ ...@@ -221,18 +221,16 @@
padding-bottom: 45px; padding-bottom: 45px;
margin-top: -64px; margin-top: -64px;
font-size: 48px; font-size: 48px;
background: url(/images/index/icon_02.jpg) no-repeat left bottom; background: url(https://res.fudou6.com/c/4/20160818/8twaWNvbl8wMg==_237x45.jpg) no-repeat left bottom;
} }
.projects .projects-header .project-header-right h3 a { .projects .projects-header .project-header-right h3 a {
color: #fff; color: #fff;
} }
.projects .section { .projects .section {
width: 1150px;
height: 500px; height: 500px;
margin: 0 auto; margin: 0 auto;
} }
.projects .section .section-left { .projects .section .section-left {
width: 454px;
float: left; float: left;
margin-top: 50px; margin-top: 50px;
margin-left: 20px; margin-left: 20px;
...@@ -257,7 +255,6 @@ ...@@ -257,7 +255,6 @@
top: 10px; top: 10px;
} }
.projects .section .section-right { .projects .section .section-right {
width: 675px;
float: left; float: left;
position: relative; position: relative;
} }
...@@ -292,7 +289,6 @@ ...@@ -292,7 +289,6 @@
background-size: cover; background-size: cover;
} }
.products ul li.products-image-large .products-detail { .products ul li.products-image-large .products-detail {
width: 363.33333333px;
background-color: #2e2e2e; background-color: #2e2e2e;
text-align: center; text-align: center;
} }
...@@ -332,7 +328,7 @@ ...@@ -332,7 +328,7 @@
margin-right: 30px; margin-right: 30px;
} }
.products ul li.products-image-small.last-one { .products ul li.products-image-small.last-one {
margin-right: 0; margin-right: 0 !important;
} }
.products ul li.products-image-small .products-image, .products ul li.products-image-small .products-image,
.products ul li.products-image-small .products-detail { .products ul li.products-image-small .products-detail {
......
...@@ -223,7 +223,7 @@ ...@@ -223,7 +223,7 @@
padding-bottom: 45px; padding-bottom: 45px;
margin-top: -64px; margin-top: -64px;
font-size: 48px; font-size: 48px;
background: url(/images/index/icon_02.jpg) no-repeat left bottom; background: url(https://res.fudou6.com/c/4/20160818/8twaWNvbl8wMg==_237x45.jpg) no-repeat left bottom;
a { a {
color: #fff; color: #fff;
} }
...@@ -231,11 +231,9 @@ ...@@ -231,11 +231,9 @@
} }
} }
.section { .section {
width: @container-width;
height: 500px; height: 500px;
margin: 0 auto; margin: 0 auto;
.section-left { .section-left {
width: @container-width/2-121;
float: left; float: left;
margin-top: 50px; margin-top: 50px;
margin-left: 20px; margin-left: 20px;
...@@ -261,7 +259,6 @@ ...@@ -261,7 +259,6 @@
} }
.section-right { .section-right {
width: @container-width/2+100;
float: left; float: left;
position: relative; position: relative;
.computer { .computer {
...@@ -303,7 +300,7 @@ ...@@ -303,7 +300,7 @@
} }
.products-detail { .products-detail {
width: (@container-width + 30)/3-30; //width: (@container-width + 30)/3-30;
background-color: #2e2e2e; background-color: #2e2e2e;
text-align: center; text-align: center;
h3 { h3 {
...@@ -344,7 +341,7 @@ ...@@ -344,7 +341,7 @@
position: relative; position: relative;
margin-right: 30px; margin-right: 30px;
&.last-one { &.last-one {
margin-right: 0; margin-right: 0 !important;
} }
.products-image, .products-image,
.products-detail { .products-detail {
......
/* .hot-project-banner start */
/* .hot-project-banner end */
/* .hot-project-introducer start*/ /* .hot-project-introducer start*/
.hot-project-introducer .subtabs li:before { .hot-project-introducer .subtabs li:before {
content: '●'; content: '●';
...@@ -42,3 +40,24 @@ ...@@ -42,3 +40,24 @@
transform: scale(1); transform: scale(1);
} }
/* .hot-project-tabs end */ /* .hot-project-tabs end */
.container-width-small .hot-project-introducer,
.container-width-small .hot-project-tabs ul {
width: 990px;
}
.container-width-small .hot-project-banner p {
width: 495px;
}
.container-width .hot-project-introducer,
.container-width .hot-project-tabs ul {
width: 1150px;
}
.container-width .hot-project-banner p {
width: 575px;
}
.container-width-large .hot-project-introducer,
.container-width-large .hot-project-tabs ul {
width: 1360px;
}
.container-width-large .hot-project-banner p {
width: 680px;
}
//IE8 //IE8
/* .hot-project-banner start */ @import "variable";
.hot-project-banner {
p {
//width: 950px;
}
}
/* .hot-project-banner end */
/* .hot-project-introducer start*/ /* .hot-project-introducer start*/
.hot-project-introducer { .hot-project-introducer {
//width: 950px; //width: 950px;
...@@ -25,7 +18,6 @@ ...@@ -25,7 +18,6 @@
.hot-project-tabs { .hot-project-tabs {
ul { ul {
//width: 950px;
margin: 0 auto; margin: 0 auto;
border: 1px solid #f6f6f6; border: 1px solid #f6f6f6;
li { li {
...@@ -65,3 +57,37 @@ ...@@ -65,3 +57,37 @@
/* .hot-project-tabs end */ /* .hot-project-tabs end */
.container-width-small {
.hot-project-introducer,
.hot-project-tabs ul {
width: @container-width-small;
}
.hot-project-banner {
p {
width: @container-width-small/2;
}
}
}
.container-width {
.hot-project-introducer,
.hot-project-tabs ul {
width: @container-width;
}
.hot-project-banner {
p {
width: @container-width/2;
}
}
}
.container-width-large {
.hot-project-introducer,
.hot-project-tabs ul {
width: @container-width-large;
}
.hot-project-banner {
p {
width: @container-width-large/2;
}
}
}
.container-width-small #header .container {
width: 990px;
}
.container-width-small #header .container .nav {
padding-left: 247.5px;
}
.container-width-small .banner .banner-box {
width: 990px;
}
.container-width #header .container {
width: 1150px;
}
.container-width #header .container .nav {
padding-left: 287.5px;
}
.container-width .banner .banner-box {
width: 1150px;
}
.container-width-large #header .container {
width: 1360px;
}
.container-width-large #header .container .nav {
padding-left: 340px;
}
.container-width-large .banner .banner-box {
width: 1360px;
}
//ie8
@import 'variable';
.container-width-small{
#header {
.container {
width: @container-width-small;
.nav {
padding-left: @container-width-small / 4;
}
}
}
.banner {
.banner-box {
width: @container-width-small;
}
}
}
.container-width{
#header {
.container {
width: @container-width;
.nav {
padding-left: @container-width / 4;
}
}
}
.banner {
.banner-box {
width: @container-width;
}
}
}
.container-width-large{
#header {
.container {
width: @container-width-large;
.nav {
padding-left: @container-width-large / 4;
}
}
}
.banner {
.banner-box {
width: @container-width-large;
}
}
}
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
} }
})(navigator.userAgent); })(navigator.userAgent);
</script> </script>
<div class="banner"> <div class="banner">
<div class="banner-box"> <div class="banner-box">
<h1>海量资源 轻松抢单</h1> <h1>海量资源 轻松抢单</h1>
......
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
<![endif]--> <![endif]-->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<link rel="stylesheet" href="/stylesheets/style-ie8.css"/>
<link rel="stylesheet" href="/stylesheets/index-ie8.css"/> <link rel="stylesheet" href="/stylesheets/index-ie8.css"/>
<link rel="stylesheet" href="/stylesheets/project-ie8.css"/> <link rel="stylesheet" href="/stylesheets/project-ie8.css"/>
<link rel="stylesheet" href="/stylesheets/products-ie8.css"/> <link rel="stylesheet" href="/stylesheets/products-ie8.css"/>
...@@ -29,7 +30,8 @@ ...@@ -29,7 +30,8 @@
<![endif]--> <![endif]-->
</head> </head>
<body> <body>
<div id="header"> <div id="containerBox">
<div id="header">
<div class="container"> <div class="container">
<a class="logo" href="/"><img src="/images/logo.png" alt="logo"></a> <a class="logo" href="/"><img src="/images/logo.png" alt="logo"></a>
<div class="clear nav"> <div class="clear nav">
...@@ -39,17 +41,18 @@ ...@@ -39,17 +41,18 @@
<span class="last-one"><a href="/about" class="{{navAbout}}">关于我们 / ABOUT</a></span> <span class="last-one"><a href="/about" class="{{navAbout}}">关于我们 / ABOUT</a></span>
</div> </div>
</div> </div>
</div> </div>
<div id="container"> <div id="container">
{{{body}}} {{{body}}}
</div> </div>
<div id="footer"> <div id="footer">
<h3>全国客服热线 9:30-18:30</h3> <h3>全国客服热线 9:30-18:30</h3>
<h2>400-879-9900</h2> <h2>400-879-9900</h2>
<!--<hr class="line-separate"/>--> <!--<hr class="line-separate"/>-->
<p class="copyright">&copy;2016 <span>shuniu</span> All Right Reserved&copy;2014-2015 杭州枢纽科技有限公司 版权所有</p> <p class="copyright">&copy;2016 <span>shuniu</span> All Right Reserved&copy;2014-2015 杭州枢纽科技有限公司 版权所有</p>
<address>浙江省杭州市余杭区良睦路1288号梦想小镇5-305 E-mail: <a href="mailto:hr@shuniu.com">hr@shuniu.com</a></address> <address>浙江省杭州市余杭区良睦路1288号梦想小镇5-305 E-mail: <a href="mailto:hr@shuniu.com">hr@shuniu.com</a></address>
<address>上海市浦东新区福山路458号同盛大厦1808室</address> <address>上海市浦东新区福山路458号同盛大厦1808室</address>
</div>
</div> </div>
<script src="/javascripts/jquery-1.8.3.min.js"></script> <script src="/javascripts/jquery-1.8.3.min.js"></script>
{{#if env}} {{#if env}}
......
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