fe / yohobuywap-node · Commits

Go to a project

Authored by yyq
Commit 8c742a7f24fa11b9ed913ab06a6d7661f41345f3 1 parent ce76de21

layout css

Inline Side-by-side
Showing 3 changed files with 216 additions and 2 deletions
<div class="systemUpdate">
<a href="index/systemUpdate" class="systemHeader">Yoho!Buy有货关于系统升级的公告</a>
<div class="system-update">
<a href="index/systemUpdate" class="system-header">Yoho!Buy有货关于系统升级的公告</a>
<span>X</span>
</div>
... ...
.yoho-footer {
font-size: 24px;
background-color: #fff;
position: relative;
.op-row {
padding: 0 30px;
height: 120px;
line-height: 120px;
span {
display: inline-block;
overflow: hidden;
}
a {
display: inline-block;
overflow: hidden;
}
.user-name {
text-decoration: underline;
margin-left: 0.3em;
margin-right: 1em;
max-width: 200px;
text-overflow: ellipsis;
white-space: nowrap;
}
.back-to-top {
position: absolute;
right: 40px;
}
.sep-line {
margin: 0 0.3em;
}
}
.copyright {
height: 120px;
line-height: 120px;
border-top: 1px solid #ccc;
text-align: center;
color: #666;
background-color: #eee;
}
&.bottom {
position: fixed;
width: 100%;
bottom: 0;
}
}
... ...
@define-extend nav {
display: block;
position: absolute;
top: 0;
width: 90px;
height: 90px;
font-size: 20PX;
line-height: 90px;
color: #fff;
text-align: center;
outline: none;
}
.yoho-header {
position: relative;
background-color: #000;
color: #fff;
width: 100%;
overflow: hidden;
height: 90px;
line-height: 90px;
z-index: 1;
&.boys {
background-image: linear-gradient(#323232, #414141);
}
&.girls {
background: #ff88ae;
}
&.kids {
background: #7ad9f9;
}
&.life-style {
background: #4f4138;
}
a.highlight {
background: rgba(200, 200, 200, 0.1);
}
.nav-back {
@extend nav;
left: 10px;
}
.nav-home {
@extend nav;
right: 10px;
}
.nav-btn {
@extend nav;
right: 10px;
font-size: 14PX;
}
.nav-title {
position: absolute;
margin-left: 100px;
margin-right: 100px;
height: 100%;
font-size: 36px;
color: #fff;
font-weight: bold;
top: 0;
right: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
}
.system-update {
width: 100%;
height: 90px;
overflow: hidden;
line-height: 90px;
display: none;
background-image: linear-gradient(#323232, #414141);
.system-header {
width: 85%;
height: 100%;
overflow: hidden;
font-size: 60px;
color: #fff;
float: left;
text-align: center;
}
span {
width: 14%;
height: 100%;
overflow: hidden;
float: left;
text-align: center;
font-size: 80px;
font-weight: bold;
color: #fff;
}
}
.homebuttom {
width: 100%;
height: 90px;
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
z-index: 2;
position: relative;
&.boys {
background-image: linear-gradient(#323232, #414141);
}
&.girls {
background: #ff88ae;
}
&.kids {
background: #7ad9f9;
}
&.life-style {
background: #4f4138;
}
ul {
width: 100%;
height: 90%;
overflow: hidden;
padding-top: 12px;
li {
width: 25%;
height: 100%;
overflow: hidden;
float: left;
text-align: center;
i {
width: 100%;
height: 40%;
display: block;
color: #fff;
margin-bottom: 8px;
}
span {
width: 100%;
height: auto;
overflow: hidden;
display: block;
line-height: 40px;
color: #fff;
}
}
}
}
... ...