fe / YOHOBUYPC · Commits

Go to a project

Authored by 毕凯
Commit 2c6de3975c2d8253b2b91e8360c0789de40620d2 1 parent 2c5eeb84

频道选择页面 SCSS to css

Inline Side-by-side
Showing 5 changed files with 386 additions and 4 deletions
... ... @@ -179,11 +179,13 @@ a {
@import "lazy-failure";
@import "filter";
@import "loading";
/*@import "passport/index";
@import "index/index";
/*
@import "passport/index";
@import "guang/index";
@import "home/index";
@import "category/index";
@import "me/index";
@import "product/index";
@import "index/index";
@import "cart/index";
@import "me/index";*/
@import "cart/index";*/
... ...
.err-page .err-bg {
position: fixed;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
background: resolve('404.png') no-repeat;
background-size: 100% 100%;
}
... ...
.float-layer {
height: 44px;
background: rgba(68, 68, 68, 0.95);
position: fixed;
width: 100%;
bottom: 0;
left: 0;
z-index: 9999;
padding: 10px 0;
.float-layer-left {
padding-left: 22px;
overflow: hidden;
float: left;
img {
height: 44px;
float: left;
margin-right: 10px;
}
p {
float: left;
font-size: 16px;
height: 44px;
line-height: 44px;
color: white;
}
.yoho-icon {
float: left;
margin-right: 10px;
font-size: 22px;
line-height: 44px;
width: 44px;
height: 44px;
text-align: center;
color: #fff;
border-radius: 10px;
background-image: linear-gradient(#323232, #0f0f0f);
}
}
}
#float-layer-close {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
.close-icon {
position: absolute;
left: 0;
top: 0;
color: #C0C0C0;
z-index: 2;
}
}
#float-layer-btn {
position: absolute;
top: 50%;
right: 15px;
font-size: 16px;
padding: 0 10px;
height: 27px;
line-height: 27px;
background: white;
border-radius: 5px;
margin-top: -13px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.5);
&:link,
&:visited,
&:hover,
&:actived {
color: #000;
}
}
.circle-rightbottom {
position: absolute;
width: 25px;
height: 0px;
border:0 solid #323232;
border-bottom:25px solid #323232;
-moz-border-radius:0 0 25px 0;
-webkit-border-radius:0 0 25px 0;
border-radius:0 0 25px 0;
}
... ...
.index-page {
width: 100%;
overflow: hidden;
margin: 0 auto;
#yohood {
background-color: transparent;
background-image: resolve('yohood.png');
background-size: 40%;
background-repeat: no-repeat;
background-position-x: 26%;
background-position-y: 36%;
border: none;
border-bottom: 4px solid #fff;
}
#yohood:active {
background-image: resolve('yohood-tapped.png');
background-color: rgba(255,255,255,.4);
border-bottom-color: #000;
.right-icon {
color: #000;
}
}
.index-header {
box-sizing: border-box;
padding: 0 20px;
width: 100%;
height: 96px;
line-height: 96px;
.index-logo {
float: left;
width: 216px;
height: 96px;
background: resolve("yohologo.png") left center no-repeat;
background-size: 104px 25px;
opacity: 1;
transition: all 400ms;
img {
display: inline;
vertical-align: middle;
width: 207px;
height: 49px;
}
&.action {
opacity: 0;
width: 0;
}
}
.box {
position: relative;
overflow: hidden;
z-index: 1;
&.action {
.no-search, .clear-text {
display: block;
}
.search-box {
/* margin-left: 80px;*/
}
}
}
.index-search {
height: 96px;
background: #fff;
overflow: hidden;
transition: width .4s;
.search-box {
position: relative;
top: 20px;
height: 56px;
padding-right: 80px;
transition: width 400ms;
box-sizing: border-box;
border: 1px solid #ccc;
overflow: hidden;
transition: margin-left 0.4s;
}
input {
float: left;
width: 96%;
font-size: 28px;
padding: 10px;
color: #999;
overflow: hidden;
border: none;
-webkit-appearance: none;
}
.iconfont {
position: absolute;
top: 8px;
width: 40px;
font-size: 28px;
z-index: 1;
line-height: 40px;
}
.clear-text {
display: none;
right: 50px;
color: #ccc;
}
.search-icon {
right: 10px;
color: #666;
&.empty {
color: #e6e6e6;
}
}
}
.no-search {
display: none;
float: left;
margin-right: 10px;
color: #999;
font-size: 28px;
}
}
.index-container {
position: relative;
transition: transform 0.5s;
background-color: white;
.index_header {
height: 80px;
line-height: 80px;
overflow: hidden;
padding: 0 10px;;
}
.index-channel {
color: #FFF;
text-align: center;
position:relative;
background-color: #000000;
min-height: 800px;
.index-channel-list {
margin-top: -300px;
width: 100%;
position: absolute;
top: 50%;
.list-item {
display: block;
position: relative;
margin: 0 auto 40px;
width: 432px;
height: 104px;
text-align: center;
font-size: 32px;
line-height: 104px;
color: #fff;
background-color: #000;
border: 4px solid #fff;
font-weight: bold;
&:last-child {
margin-bottom: 0;
}
}
.lighter {
font-weight: lighter;
}
.right-icon {
position: absolute;
right: 10px;
top: 0;
font-weight: bold;
}
.homestyle {
margin-bottom: 50px;
width: 287.3px;
}
}
}
}
}
@import "search";
@import "footer";
@import "error";
... ...
.search-page {
.search-input {
position: relative;
padding: 14px 22px;
background: #f8f8f8;
form {
width: 100%;
}
.search-icon {
position: absolute;
font-size: 24px;
top: 26px;
left: 36px;
color: #b2b2b2;
}
input {
height: 56px;
width: 378px;
border-radius: 28px;
padding: 0 52px;
font-size: 24px;
background: #fff;
border: none;
}
.clear-input {
position: absolute;
top: 20px;
right: 145px;
font-size: 32px;
color: #666;
}
.search {
position: absolute;
top: 18px;
right: 40px;
border: none;
background: transparent;
color: #666;
font-size: 30px;
line-height: 56px;
}
}
.search-items {
padding: 40px 20px;
h3 {
font-size: 24px;
margin-bottom: 20px;
}
li {
float: left;
margin-right: 20px;
margin-bottom: 20px;
max-width: 100%;
overflow: hidden;
}
a {
display: block;
height: 68px;
line-height: 68px;
padding: 0 20px;
font-size: 28px;
background: #f8f8f8;
color: #000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.clear-history {
height: 64px;
line-height: 64px;
border: 1px solid #e6e6e6;
background: #fff;
font-size: 28px;
}
}
}
... ...