Skip to content

W
www.fudou6.com
Commit 2c60f34b authored by superman's avatar superman
Browse files
Options

2-3

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