Commit 7e7e29f1 authored by liaili's avatar liaili

2

parent 71da97ca
This diff is collapsed.
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
.navitation-steps { .navitation-steps {
height: 10rem; height: 10rem;
background: url(https://res.fudou6.com/c/4/20160804/q83YmdfMDI=_750x741.jpg)no-repeat center center; background: url(https://res.fudou6.com/c/4/20160804/q83YmdfMDI=_750x741.jpg)no-repeat center center;
background-size: cover;
& > div { & > div {
background: #fff; background: #fff;
padding:1rem 1.2rem; padding:1rem 1.2rem;
......
...@@ -74,4 +74,5 @@ ...@@ -74,4 +74,5 @@
</body> </body>
<script src="./common.js"></script> <script src="./common.js"></script>
<script src="./navitation-record.js"></script> <script src="./navitation-record.js"></script>
<script src="./flexible.debug.js"></script>
</html> </html>
...@@ -9,28 +9,25 @@ ...@@ -9,28 +9,25 @@
a { a {
text-decoration: none; text-decoration: none;
} }
html {
font-size: 14px;
}
body { body {
color: #fff; color: #fff;
font-family: Microsoft YaHei, simhei, Tahoma, Arial; font-family: Microsoft YaHei, simhei, Tahoma, Arial;
} }
header { header {
height: 60px; height: 2rem;
background: #f00;
} }
.navitation { .navitation {
background: #353950 url(https://res.fudou6.com/c/4/20160804/udmYmctMDFfMDM=_749x66.png)no-repeat center bottom; background: #353950 url(https://res.fudou6.com/c/4/20160804/udmYmctMDFfMDM=_749x66.png)no-repeat center bottom;
padding:40px 0 80px; padding:1rem 0 2rem;
h2 { h2 {
font-size: 1.5rem; font-size: 0.55rem;
margin-bottom: 20px; margin-bottom: 0.5rem;
text-align: center; text-align: center;
} }
& > div { & > div {
width: 80%; width: 8rem;
margin: 0 auto; margin: 0 auto;
&:after { &:after {
content:''; content:'';
...@@ -38,10 +35,10 @@ ...@@ -38,10 +35,10 @@
clear: both; clear: both;
} }
a { a {
font-size: 1rem; font-size: 0.4rem;
background: #494d68; background: #494d68;
padding: 6px 10px; padding: 0.157rem 0.26rem;
border-radius: 4px; border-radius: 0.11rem;
color: #fff; color: #fff;
float: left; float: left;
&:last-child { &:last-child {
...@@ -53,36 +50,36 @@ ...@@ -53,36 +50,36 @@
.users-list { .users-list {
background: #ececec; background: #ececec;
div { div {
width: 90%; width: 9rem;
margin: 0 auto; margin: 0 auto;
border-bottom: 1px solid #969696; border-bottom: 1px solid #969696;
color: #222228; color: #222228;
font-size: 1rem; font-size: 0.4rem;
span { span {
display: block; display: block;
float: left; float: left;
text-align: center; text-align: center;
padding: 10px 0; padding: 0.26rem 0;
&:nth-child(1) { &:nth-child(1) {
width: 10%; width: 1rem;
} }
&:nth-child(2) { &:nth-child(2) {
width: 30%; width: 2rem;
} }
&:nth-child(3) { &:nth-child(3) {
width: 25%; width: 2.5rem;
} }
&:nth-child(4) { &:nth-child(4) {
width: 25%; width: 2.5rem;
} }
&:nth-child(5) { &:nth-child(5) {
width: 10%; width: 1rem;
color: #c3c3c3; color: #c3c3c3;
} }
} }
&:first-child { &:first-child {
font-weight: bold; font-weight: bold;
font-size: 1.2rem; font-size: 0.44rem;
} }
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
...@@ -102,13 +99,13 @@ ...@@ -102,13 +99,13 @@
} }
} }
.explain { .explain {
width: 90%; width: 9rem;
margin: 0 auto; margin: 0 auto;
padding:10px 0; padding:0.26rem 0;
color: #969696; color: #969696;
font-size: 1rem; font-size: 0.4rem;
h3 { h3 {
font-size: 1.3rem; font-size: 0.5rem;
text-align: center; text-align: center;
position: relative; position: relative;
&:before { &:before {
...@@ -118,109 +115,42 @@ ...@@ -118,109 +115,42 @@
height: 0; height: 0;
border-bottom: 1px solid #969696; border-bottom: 1px solid #969696;
position: absolute; position: absolute;
top:10px; top:0.26rem;
left:0; left:0;
z-index: -2; z-index: -2;
} }
&:after { &:after {
content: ''; content: '';
display: block; display: block;
width: 20%; width: 1.8rem;
height: 1px; height: 1px;
background: #fff; background: #fff;
position: absolute; position: absolute;
top:10px; top:0.26rem;
left:40%; left:3.6rem;
z-index: -1; z-index: -1;
} }
} }
h5 { h5 {
font-size: 1.1rem; font-size: 0.5rem;
padding: 6px 0 10px; padding: 0.16rem 0 0.26rem;
} }
p { p {
line-height: 20px; line-height: 0.55rem;
} }
} }
.navitation-friend { .navitation-friend {
a { a {
width: 100%; width: 100%;
display: block; display: block;
padding:20px; padding:0.55rem;
text-align: center; text-align: center;
font-size: 1.3rem; font-size: 0.485rem;
font-weight: bold; font-weight: bold;
background: #ff494b; background: #ff494b;
color: #fff; color: #fff;
} }
} }
/* ipad 手机横屏*/
@media screen and (min-width: 767px) {
.navitation {
padding:40px 0 80px;
h2 {
font-size: 2rem;
margin-bottom: 40px;
text-align: center;
}
& > div {
width: 55%;
a {
font-size: 1.5rem;
padding: 10px 16px;
border-radius: 6px;
}
}
}
.users-list {
background: #ececec;
padding-top: 20px;
padding-bottom: 20px;
div {
width: 85%;
font-size: 1.5rem;
&:first-child {
font-size: 1.7rem;
}
}
}
.explain {
width: 85%;
margin-top: 20px;
font-size: 1.5rem;
h3 {
font-size: 2rem;
&:before {
top:14px;
}
&:after {
width: 22%;
height: 3px;
left:39%;
top:13px;
}
}
h5 {
font-size: 1.7rem;
padding: 10px 0 14px;
}
p {
line-height: 34px;
}
}
.navitation-friend {
a {
width: 100%;
display: block;
padding:20px;
text-align: center;
font-size: 1.3rem;
font-weight: bold;
background: #ff494b;
color: #fff;
}
}
}
} }
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