Commit ede609d0 authored by liaili's avatar liaili

update-four

parent d1b65ce2
......@@ -7,56 +7,26 @@
(function () {
var explorer = window.navigator.userAgent;
var sw = $(window).width();
var cw = 0;
// var cw = 0;
function setClientWidth(sw, cw) {
if (explorer.indexOf('MSIE') >= 0) {
cw = sw > 1441 ? 1360 : sw > 1281 ? 1150 : 990;
//index
$('.banner-box').width(cw);
$('.download').width(cw);
$('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);
if (sw >= 1441) {
$('#containerBox').css('className', '').addClass('container-width-large');
} else if (sw >= 1281) {
$('#containerBox').css('className', '').addClass('container-width');
} else if (sw >= 869) {
$('#containerBox').css('className', '').addClass('container-width-small');
}
}
}
//初始化
setClientWidth(sw, cw);
setClientWidth(sw);
$(window).resize(function () {
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})();"]}
\ No newline at end of file
{"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
......@@ -5,56 +5,25 @@
(()=> {
var explorer = window.navigator.userAgent;
var sw = $(window).width();
var cw = 0;
// var cw = 0;
function setClientWidth(sw, cw) {
if (explorer.indexOf('MSIE') >= 0) {
cw = sw > 1441 ? 1360 : sw > 1281 ? 1150 : 990;
//index
$('.banner-box').width(cw);
$('.download').width(cw);
$('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);
if(sw>=1441){
$('#containerBox').css('className','').addClass('container-width-large')
}else if(sw>=1281){
$('#containerBox').css('className','').addClass('container-width')
}else if(sw>=869){
$('#containerBox').css('className','').addClass('container-width-small')
}
}
}
//初始化
setClientWidth(sw, cw);
setClientWidth(sw);
$(window).resize( () => {
sw = $(this).width();
setClientWidth(sw, cw);
setClientWidth(sw);
})
})();
\ No newline at end of file
"use strict";
(function() {
var t = window.navigator.userAgent;
var i = $(window).width();
var e = 0;
function r(i, e) {
if (t.indexOf("MSIE") >= 0) {
e = i > 1441 ? 1360 : i > 1281 ? 1150 : 990;
$(".banner-box").width(e);
$(".download").width(e);
$("ul", ".character").width(e);
$(".section", ".projects").width(e);
$(".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);
var i = window.navigator.userAgent;
var n = $(window).width();
function s(n, s) {
if (i.indexOf("MSIE") >= 0) {
if (n >= 1441) {
$("#containerBox").css("className", "").addClass("container-width-large");
} else if (n >= 1281) {
$("#containerBox").css("className", "").addClass("container-width");
} else if (n >= 869) {
$("#containerBox").css("className", "").addClass("container-width-small");
}
}
}
r(i, e);
s(n);
$(window).resize(function() {
i = $(undefined).width();
r(i, e);
n = $(undefined).width();
s(n);
});
})();
\ No newline at end of file
......@@ -3,18 +3,7 @@
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 .company-introduction-box {
margin: 0 auto;
}
.company-introduction .gudong-list li {
height: auto;
}
.company-introduction .friend-list a.clear-bl:before {
border-left: none;
}
......@@ -22,3 +11,36 @@
border-top: none;
}
/* .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
@import "variable";
/*公共样式 开始*/
.clear-br {
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 {
.company-introduction-box {
//width: 950px;
margin: 0 auto;
}
.gudong-list {
li {
height: auto;
}
}
.friend-list {
a{
&.clear-bl:before {
......@@ -41,4 +21,56 @@
}
}
/* .company-introduction end */
\ No newline at end of file
/* .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 @@
}
/* .address-map */
@media screen and (min-width: 769px) {
body .company-introduction > div,
body .company-introduction > .company-introduction-box,
body .about-us-banner .banner-box {
width: 990px;
}
......@@ -205,7 +205,7 @@
}
}
@media screen and (min-width: 1281px) {
body .company-introduction > div,
body .company-introduction > .company-introduction-box,
body .about-us-banner .banner-box {
width: 1150px;
}
......@@ -218,7 +218,7 @@
}
}
@media screen and (min-width: 1441px) {
body .company-introduction > div,
body .company-introduction > .company-introduction-box,
body .about-us-banner .banner-box {
width: 1360px;
}
......
......@@ -223,7 +223,7 @@
}
.rules(@cw) {
.company-introduction > div,
.company-introduction > .company-introduction-box,
.about-us-banner .banner-box {
width: @cw;
}
......
/*.banner begin*/
/*.banner end*/
/*.download begin*/
.download .android,
.download .iphone {
position: absolute;
left: 10%;
}
.download .qr-code {
position: absolute;
left: 50%;
}
/*download end*/
/*projects start*/
.projects .section .section-left li:before {
content: '●';
width: 0;
height: 0;
margin-top: -14px;
font-size: 22px;
color: #565656;
}
/*projects end*/
/*product begin*/
.products ul li.products-image-large {
margin-bottom: 25px;
......@@ -32,3 +29,153 @@
margin-right: 25px;
}
/*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
/*.banner begin*/
.banner {
.banner-box {
//width: 950px;
}
}
/*.banner end*/
/*.download begin*/
.download {
//width: 950px;
.android,
.iphone {
position: absolute;
left:10%;
}
.qr-code {
position: absolute;
left:50%;
@import 'variable';
/*projects start*/
.projects {
.section {
.section-left li:before {
content: '●';
width: 0;
height: 0;
margin-top: -14px;
font-size: 22px;
color: #565656;
}
}
}
/*download end*/
/*projects end*/
/*product begin*/
.products {
ul {
......@@ -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 @@
padding-bottom: 45px;
margin-top: -64px;
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 {
color: #fff;
}
.projects .section {
width: 1150px;
height: 500px;
margin: 0 auto;
}
.projects .section .section-left {
width: 454px;
float: left;
margin-top: 50px;
margin-left: 20px;
......@@ -257,7 +255,6 @@
top: 10px;
}
.projects .section .section-right {
width: 675px;
float: left;
position: relative;
}
......@@ -292,7 +289,6 @@
background-size: cover;
}
.products ul li.products-image-large .products-detail {
width: 363.33333333px;
background-color: #2e2e2e;
text-align: center;
}
......@@ -332,7 +328,7 @@
margin-right: 30px;
}
.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-detail {
......
......@@ -223,7 +223,7 @@
padding-bottom: 45px;
margin-top: -64px;
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 {
color: #fff;
}
......@@ -231,11 +231,9 @@
}
}
.section {
width: @container-width;
height: 500px;
margin: 0 auto;
.section-left {
width: @container-width/2-121;
float: left;
margin-top: 50px;
margin-left: 20px;
......@@ -261,7 +259,6 @@
}
.section-right {
width: @container-width/2+100;
float: left;
position: relative;
.computer {
......@@ -303,7 +300,7 @@
}
.products-detail {
width: (@container-width + 30)/3-30;
//width: (@container-width + 30)/3-30;
background-color: #2e2e2e;
text-align: center;
h3 {
......@@ -344,7 +341,7 @@
position: relative;
margin-right: 30px;
&.last-one {
margin-right: 0;
margin-right: 0 !important;
}
.products-image,
.products-detail {
......
/* .hot-project-banner start */
/* .hot-project-banner end */
/* .hot-project-introducer start*/
.hot-project-introducer .subtabs li:before {
content: '●';
......@@ -42,3 +40,24 @@
transform: scale(1);
}
/* .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
/* .hot-project-banner start */
.hot-project-banner {
p {
//width: 950px;
}
}
/* .hot-project-banner end */
@import "variable";
/* .hot-project-introducer start*/
.hot-project-introducer {
//width: 950px;
......@@ -25,7 +18,6 @@
.hot-project-tabs {
ul {
//width: 950px;
margin: 0 auto;
border: 1px solid #f6f6f6;
li {
......@@ -65,3 +57,37 @@
/* .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 @@
}
})(navigator.userAgent);
</script>
<div class="banner">
<div class="banner-box">
<h1>海量资源 轻松抢单</h1>
......
......@@ -21,6 +21,7 @@
<![endif]-->
<!--[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/project-ie8.css"/>
<link rel="stylesheet" href="/stylesheets/products-ie8.css"/>
......@@ -29,27 +30,29 @@
<![endif]-->
</head>
<body>
<div id="header">
<div class="container">
<a class="logo" href="/"><img src="/images/logo.png" alt="logo"></a>
<div class="clear nav">
<span><a href="/" class="{{navIndex}}">首页 / HOME</a></span>
<span><a href="/project" class="{{navProject}}">项目合作 / PROJECT</a></span>
<span><a href="/products" class="{{navProducts}}">最新产品 / PRODUCT</a></span>
<span class="last-one"><a href="/about" class="{{navAbout}}">关于我们 / ABOUT</a></span>
<div id="containerBox">
<div id="header">
<div class="container">
<a class="logo" href="/"><img src="/images/logo.png" alt="logo"></a>
<div class="clear nav">
<span><a href="/" class="{{navIndex}}">首页 / HOME</a></span>
<span><a href="/project" class="{{navProject}}">项目合作 / PROJECT</a></span>
<span><a href="/products" class="{{navProducts}}">最新产品 / PRODUCT</a></span>
<span class="last-one"><a href="/about" class="{{navAbout}}">关于我们 / ABOUT</a></span>
</div>
</div>
</div>
</div>
<div id="container">
{{{body}}}
</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>
<div id="container">
{{{body}}}
</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>
</div>
</div>
<script src="/javascripts/jquery-1.8.3.min.js"></script>
{{#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