Skip to content

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

Merge branch 'express' of http://gitlab.yanky.cn/liaili/www.fudou6.com into express

parents 7fd1be80 d994d517
Hide whitespace changes
Inline Side-by-side
Showing with 137 additions and 135 deletions
public/stylesheets/index.css
View file @ 6a8ed8f1
...@@ -32,7 +32,6 @@ ...@@ -32,7 +32,6 @@
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 140px; top: 140px;
margin-left: -575px;
height: 68px; height: 68px;
width: 268px; width: 268px;
line-height: 68px; line-height: 68px;
...@@ -73,7 +72,6 @@ ...@@ -73,7 +72,6 @@
position: absolute; position: absolute;
left: 50%; left: 50%;
top: -140px; top: -140px;
margin-left: 133.33333333px;
width: 467px; width: 467px;
height: 558px; height: 558px;
background: url(http://res.fudou6.com/c/4/20160730/tq9bW9iaWxlXzAx_467x558.png) no-repeat; background: url(http://res.fudou6.com/c/4/20160730/tq9bW9iaWxlXzAx_467x558.png) no-repeat;
...@@ -148,28 +146,28 @@ ...@@ -148,28 +146,28 @@
font-size: 14px; font-size: 14px;
} }
.character ul li:nth-child(1) > div:first-child { .character ul li:nth-child(1) > div:first-child {
animation-delay: 0s; animation-delay: 0.25s;
} }
.character ul li:nth-child(1) > div:last-child { .character ul li:nth-child(1) > div:last-child {
animation-delay: 5s; animation-delay: 5.25s;
} }
.character ul li:nth-child(2) > div:first-child { .character ul li:nth-child(2) > div:first-child {
animation-delay: .25s; animation-delay: 0.5s;
} }
.character ul li:nth-child(2) > div:last-child { .character ul li:nth-child(2) > div:last-child {
animation-delay: 5.25s; animation-delay: 5.5s;
} }
.character ul li:nth-child(3) > div:first-child { .character ul li:nth-child(3) > div:first-child {
animation-delay: .5s; animation-delay: 0.75s;
} }
.character ul li:nth-child(3) > div:last-child { .character ul li:nth-child(3) > div:last-child {
animation-delay: 5.5s; animation-delay: 5.75s;
} }
.character ul li:nth-child(4) > div:first-child { .character ul li:nth-child(4) > div:first-child {
animation-delay: .75s; animation-delay: 1s;
} }
.character ul li:nth-child(4) > div:last-child { .character ul li:nth-child(4) > div:last-child {
animation-delay: 5.75s; animation-delay: 6s;
} }
/* character end */ /* character end */
/* projects begin */ /* projects begin */
...@@ -285,7 +283,6 @@ ...@@ -285,7 +283,6 @@
.products ul li:nth-child(2) > div:first-child { .products ul li:nth-child(2) > div:first-child {
width: 756.66666667px; width: 756.66666667px;
margin-right: 30px; margin-right: 30px;
-webkit-background-size: cover;
background-size: cover; background-size: cover;
} }
.products ul li:nth-child(1) > div:last-child, .products ul li:nth-child(1) > div:last-child,
...@@ -396,10 +393,10 @@ ...@@ -396,10 +393,10 @@
} }
body .download .android, body .download .android,
body .download .iphone { body .download .iphone {
margin-left: -445.5px; margin-left: -467px;
} }
body .download .app-screen { body .download .app-screen {
margin-left: -6px; margin-left: 10px;
} }
body .character ul { body .character ul {
width: 990px; width: 990px;
...@@ -424,6 +421,10 @@ ...@@ -424,6 +421,10 @@
body .products ul { body .products ul {
width: 990px; width: 990px;
} }
body .products ul li:nth-child(1),
body .products ul li:nth-child(2) {
margin-bottom: 30px;
}
body .products ul li:nth-child(1) > div:first-child, body .products ul li:nth-child(1) > div:first-child,
body .products ul li:nth-child(2) > div:first-child { body .products ul li:nth-child(2) > div:first-child {
width: 650px; width: 650px;
...@@ -435,6 +436,7 @@ ...@@ -435,6 +436,7 @@
} }
body .products ul li:nth-child(n+3) { body .products ul li:nth-child(n+3) {
width: 310px; width: 310px;
margin-right: 30px;
} }
} }
@media screen and (min-width: 1281px) { @media screen and (min-width: 1281px) {
...@@ -446,10 +448,10 @@ ...@@ -446,10 +448,10 @@
} }
body .download .android, body .download .android,
body .download .iphone { body .download .iphone {
margin-left: -517.5px; margin-left: -500px;
} }
body .download .app-screen { body .download .app-screen {
margin-left: 90px; margin-left: 50px;
} }
body .character ul { body .character ul {
width: 1150px; width: 1150px;
...@@ -474,17 +476,22 @@ ...@@ -474,17 +476,22 @@
body .products ul { body .products ul {
width: 1150px; width: 1150px;
} }
body .products ul li:nth-child(1),
body .products ul li:nth-child(2) {
margin-bottom: 34.84848485px;
}
body .products ul li:nth-child(1) > div:first-child, body .products ul li:nth-child(1) > div:first-child,
body .products ul li:nth-child(2) > div:first-child { body .products ul li:nth-child(2) > div:first-child {
width: 756.66666667px; width: 755.05050505px;
margin-right: 30px; margin-right: 34.84848485px;
} }
body .products ul li:nth-child(1) > div:last-child, body .products ul li:nth-child(1) > div:last-child,
body .products ul li:nth-child(2) > div:last-child { body .products ul li:nth-child(2) > div:last-child {
width: 363.33333333px; width: 360.1010101px;
} }
body .products ul li:nth-child(n+3) { body .products ul li:nth-child(n+3) {
width: 363.33333333px; width: 360.1010101px;
margin-right: 34.84848485px;
} }
} }
@media screen and (min-width: 1441px) { @media screen and (min-width: 1441px) {
...@@ -496,10 +503,10 @@ ...@@ -496,10 +503,10 @@
} }
body .download .android, body .download .android,
body .download .iphone { body .download .iphone {
margin-left: -612px; margin-left: -540px;
} }
body .download .app-screen { body .download .app-screen {
margin-left: 216px; margin-left: 120px;
} }
body .character ul { body .character ul {
width: 1360px; width: 1360px;
...@@ -524,16 +531,21 @@ ...@@ -524,16 +531,21 @@
body .products ul { body .products ul {
width: 1360px; width: 1360px;
} }
body .products ul li:nth-child(1),
body .products ul li:nth-child(2) {
margin-bottom: 41.21212121px;
}
body .products ul li:nth-child(1) > div:first-child, body .products ul li:nth-child(1) > div:first-child,
body .products ul li:nth-child(2) > div:first-child { body .products ul li:nth-child(2) > div:first-child {
width: 896.66666667px; width: 892.92929293px;
margin-right: 30px; margin-right: 41.21212121px;
} }
body .products ul li:nth-child(1) > div:last-child, body .products ul li:nth-child(1) > div:last-child,
body .products ul li:nth-child(2) > div:last-child { body .products ul li:nth-child(2) > div:last-child {
width: 433.33333333px; width: 425.85858586px;
} }
body .products ul li:nth-child(n+3) { body .products ul li:nth-child(n+3) {
width: 433.33333333px; width: 425.85858586px;
margin-right: 41.21212121px;
} }
} }
public/stylesheets/index.less
View file @ 6a8ed8f1
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 140px; top: 140px;
margin-left: -@container-width / 2; //margin-left: -@container-width / 2;
//margin-left: -467px; //margin-left: -467px;
height: 68px; height: 68px;
width: 268px; width: 268px;
...@@ -75,10 +75,10 @@ ...@@ -75,10 +75,10 @@
position: absolute; position: absolute;
left: 50%; left: 50%;
top: -140px; top: -140px;
margin-left: (@container-width - 990) / 1.2; //margin-left: (@container-width - 990) / 1.2;
//margin-left: 60px; //margin-left: 10px;
width: 467px; // 405px; width: 467px;
height: 558px; // 515px; height: 558px;
background: url(http://res.fudou6.com/c/4/20160730/tq9bW9iaWxlXzAx_467x558.png) no-repeat; background: url(http://res.fudou6.com/c/4/20160730/tq9bW9iaWxlXzAx_467x558.png) no-repeat;
&:after { &:after {
content: ''; content: '';
...@@ -101,13 +101,14 @@ ...@@ -101,13 +101,14 @@
@keyframes stretch-delay { @keyframes stretch-delay {
0%, 50%, 100% { 0%, 50%, 100% {
transform: scale(0); transform: scale(0);
opacity:0; opacity: 0;
} }
5%, 45% { 5%, 45% {
transform: scale(1); transform: scale(1);
opacity:1; opacity: 1;
} }
} }
.character { .character {
ul { ul {
margin: 80px auto; margin: 80px auto;
...@@ -154,46 +155,20 @@ ...@@ -154,46 +155,20 @@
} }
} }
} }
&:nth-child(1){ .loop(@c) when (@c > 0){
& > div{ .loop((@c - 1));
&:first-child { &:nth-child(@{c}) {
animation-delay: 0s; & > div {
} &:first-child {
&:last-child { animation-delay: @c*0.25s;
animation-delay: 5s; }
} &:last-child {
} animation-delay: 5 + @c*0.25s;
} }
&:nth-child(2){
& > div{
&:first-child {
animation-delay: .25s;
}
&:last-child {
animation-delay: 5.25s;
}
}
}
&:nth-child(3){
& > div{
&:first-child {
animation-delay: .5s;
}
&:last-child {
animation-delay: 5.5s;
}
}
}
&:nth-child(4){
& > div{
&:first-child {
animation-delay: .75s;
}
&:last-child {
animation-delay: 5.75s;
} }
} }
} }
.loop(4);
} }
} }
} }
...@@ -314,7 +289,6 @@ ...@@ -314,7 +289,6 @@
&:first-child { &:first-child {
width: (@container-width + 30)/3*2-30; width: (@container-width + 30)/3*2-30;
margin-right: 30px; margin-right: 30px;
-webkit-background-size: cover;
background-size: cover; background-size: cover;
} }
...@@ -413,7 +387,6 @@ ...@@ -413,7 +387,6 @@
} }
} }
} }
} }
/*product end*/ /*product end*/
...@@ -422,90 +395,107 @@ ...@@ -422,90 +395,107 @@
.media(@screen-width-small, @container-width-small); .media(@screen-width-small, @container-width-small);
.media(@screen-width, @container-width); .media(@screen-width, @container-width);
.media(@screen-width-large, @container-width-large); .media(@screen-width-large, @container-width-large);
}
.media(@sw, @cw) { .media(@sw, @cw) {
@media screen and (min-width: @sw) { @media screen and (min-width: @sw) {
.rules(@cw); .rules(@cw);
}
}
.rules(@container-width) {
.banner {
.banner-box {
width: @container-width;
} }
} }
.download {
width: @container-width; .rules(@cw) {
.android, .banner {
.iphone { .banner-box {
margin-left: @container-width / 20 - @container-width/2; width: @cw;
} }
.app-screen {
margin-left: (@container-width - 1000) * 1.2 / 2;
}
}
.character {
ul {
width: @container-width;
} }
} .download {
.projects { width: @cw;
.mixin(@cw);
& > header { .download-element(@a, @b){
& > div { .android,
&:first-child { .iphone {
margin-left: @a;
}
.app-screen {
margin-left: @b;
}
}
& > div { .mixin(@cw) when (@cw = @container-width-small) {
width: @container-width/4 + 50; .download-element(-467px, 10px);
margin-right: @container-width/4 - 50; }
.mixin(@cw) when (@cw = @container-width) {
.download-element(-500px, 50px);
}
.mixin(@cw) when (@cw = @container-width-large) {
.download-element(-540px, 120px);
}
}
.character {
ul {
width: @cw;
}
}
.projects {
& > header {
& > div {
&:first-child {
& > div {
width: @cw/4 + 50;
margin-right: @cw/4 - 50;
}
} }
} &:last-child {
&:last-child { & > div {
& > div { width: @cw / 4 * 3 - 50;
width: @container-width / 4 * 3 - 50; margin-left: -@cw/4 + 50;
margin-left: -@container-width/4 + 50; }
} }
} }
} }
} & > section {
& > section { width: @cw;
width: @container-width; & > div {
& > div { &:first-child {
&:first-child { width: @cw/2-121;
width: @container-width/2-121; }
} &:last-child {
&:last-child { width: @cw/2+100;
width: @container-width/2+100; }
} }
} }
} }
} .products {
.products { ul {
ul { width: @cw;
width: @container-width; @mr: @cw/33;
li { li {
&:nth-child(1), &:nth-child(1),
&:nth-child(2) { &:nth-child(2) {
& > div { & > div {
&:first-child { &:first-child {
width: (@container-width + 30)/3*2-30; width: (@cw + @mr)/3*2-@mr;
margin-right: 30px; margin-right: @mr;
} }
&:last-child { &:last-child {
width: (@container-width + 30)/3-30; width: (@cw + @mr)/3-@mr;
}
} }
margin-bottom:@mr;
}
&:nth-child(n+3) {
width: (@cw + @mr)/3-@mr;
margin-right: @mr;
} }
}
&:nth-child(n+3) {
width: (@container-width + 30)/3-30;
} }
} }
} }
}
}
} }
body { body {
......
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