wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by 毕凯
Commit a0791a938845a577af3c45438bbf1b4c9e1a48c9 1 parent 58ba61b5

分类页 scss => css

Inline Side-by-side
Showing 6 changed files with 452 additions and 3 deletions
.brand-page {
.re-pos-search {
top: 170px !important;
}
.hide-when-loading {
display: none;
}
.genderNav {
display: block;
width: 100%;
height: 80px;
line-height: 80px;
overflow: hidden;
color: #aeaeae;
z-index: 3;
position: fixed;
top: 90px;
border-bottom: 1px solid #e1e1e1;
background-color: #fff;
ul{
width: 100%;
height: 90%;
overflow: hidden;
li{
width: 25%;
height: 100%;
overflow: hidden;
float: left;
text-align: center;
position: relative;
font-size: 28px;
i{
width: 100%;
height: 40%;
overflow: hidden;
display: block;
}
span:not(.split-border){
width: 100%;
height: auto;
overflow: hidden;
display: block;
}
.split-border {
display: inline-block;
width: 2px;
height: 1rem;
background-color: #e1e1e1;
position: absolute;
top: 30%;
right: 0;
}
}
li:last-child {
.split-border {
display: none;
}
}
li.active {
color: #444;
}
}
}
.newbrand-search {
width: 93.75%;
height: 60px;
padding: 14px 3.125%;
background-color: #f8f8f8;
left: 0;
top: 90px;
position: fixed;
z-index: 2;
.search-box {
position: relative;
width: 500px;
height: 60px;
background-color: #FFF;
border-radius: 30px;
padding: 0 32px 0 52px;
a {
width: 100%;
height: 60px;
border: 0;
display: block;
span {
line-height: 60px;
color: #bdbdbd;
font-size: 1.2em;
padding-left: 18px;
}
}
.search-icon {
position: absolute;
font-size: 24px;
top: 0;
left: 24px;
line-height: 60px;
color: #bdbdbd;
}
.search-input {
border: none;
width: 95%;
height: 60px;
font-size: 1.2em;
padding: 0 10px;
}
.search-action {
display: none;
position: absolute;
top: 0;
right: -74px;
font-size: 32px;
line-height: 60px;
color: #666;
}
.cancel-btn {
display: inline;
font-size: 28px;
vertical-align: middle;
color: #666;
}
.clear-text {
margin-right: 20px;
}
}
}
.banner-top {
padding-top: 258px;
background-color:#f8f8f8;
}
.hot-brands {
padding-top: 178px;
.floor-header {
padding: 0;
}
.brands-swiper {
border-top: 0;
}
}
.hot-brand {
margin: (30px) 0 0;
.hot-brand-list {
background: #fff;
li {
float: left;
width: 158px;
height: 158px;
.img-box {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 158px;
height: 158px;
}
img {
max-width: 140px;
max-height: 140px;
}
}
}
}
.brand-list {
width: 100%;
.title-bar {
width: 100%;
background: #eeeeee;
color: #999999;
position: relative;
h2 {
padding: 0 20px;
height: 50px;
line-height: 50px;
font-size: 34px;
border-top: 1px solid #e6e6e6;
background-color: #f4f4f4;
}
}
p {
cursor: pointer;
padding: 0 20px;
a {
display: block;
height: 76px;
line-height: 76px;
font-size: 28px;
border-bottom: 1px solid #f3f3f3;
border-top: 1px solid #f9f9f9;
i {
display: inline-block;
margin-top: -4px;
width: 108px;
height: 42px;
text-align: center;
vertical-align: middle;
font-size: 28px;
line-height: 44px;
color: #fff;
border-radius: 50px;
@include scale(.8)
}
.icon-hot {
background: #ff0000;
}
.icon-new {
background: #86c048;
}
}
}
}
.right-bar {
width: 60px;
height: 75%;
top: 20%;
overflow: auto;
position: fixed;
right: 2px;
border-radius: 12px;
background: rgba(0, 0, 0, .8);
z-index: 2;
display: none;
b {
height: 36px;
line-height: 36px;
text-align: center;
display: block;
color: #999999;
font-weight: bold;
}
}
.right-bar::-webkit-scrollbar {
display: none;
}
.con {
padding-top: 10px;
}
.search-result {
padding-top: 176px;
}
}
... ...
.hot-category {
margin: 30px 0 0;
border-top: 1px solid #e0e0e0;
.category-banner {
height: 198px;
img {
display: block;
width: 100%;
height: 100%;
}
}
.category-list {
background: #fff;
border-top: 1px solid #e0e0e0;
li {
float: left;
width: 158px;
height: 174px;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
.img-box {
width: 100%;
height: 138px;
text-align: center;
vertical-align: middle;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
}
}
}
... ...
@import "brand";
.category-page {
font-size: 30px;
.search-input {
position: relative;
background-color: #f8f8f8;
padding: 13px 20px;
p {
box-sizing: border-box;
width: 100%;
height: 60px;
line-height: 60px;
border: none;
padding-left: 66px;
border-radius: 60px;
font-size: 26px;
background: #fff;
color: #999;
}
}
.search-icon {
position: absolute;
top: 0;
bottom: 0;
left: 43px;
line-height: 86px;
color: #999;
}
.category-nav {
height: 70px;
border-bottom: 1px solid #e6e6e6;
li {
display: block;
box-sizing: border-box;
float: left;
height: 100%;
padding: 20px 0;
width: 25%;
text-align: center;
color: #999;
&:last-child {
border-right: none;
}
&.focus {
color: #000;
}
&.bytouch{
background:#eee;
}
}
span {
display: block;
width: 100%;
height: 30px;
line-height: 30px;
font-size: 30px;
border-right: 1px solid #e6e6e6;
}
li:last-child span {
border-right: 0;
}
}
.content {
background: #f8f8f8;
&.hide {
display: none;
}
}
.primary-level {
float: left;
box-sizing: border-box;
width: 45%;
> li {
height: 89px;
line-height: 89px;
padding-left: 32px;
&.focus {
background-color: #fff;
}
&.highlight {
background-color: #eee;
}
}
}
.sub-level-container {
float: left;
box-sizing: border-box;
background: #fff;
width: 55%;
height: 100%;
}
.sub-level {
width: 100%;
&.hide {
display: none;
}
> li {
box-sizing: border-box;
height: 89px;
line-height: 89px;
border-bottom: 1px solid #e6e6e6;
padding-left: 20px;
&.highlight {
background: #eee;
}
&:last-child {
border-bottom: none;
}
}
a {
display: block;
height: 100%;
width: 100%;
color: #000;
}
}
}
... ...
... ... @@ -41,7 +41,7 @@
a {
display: block;
color: #fff;
font-size: 20px;
font-size: 20PX;
line-height: 90px;
}
}
... ...
... ... @@ -183,8 +183,8 @@ a {
@import "passport/index";
@import "guang/index";
@import "home/index";
/*
@import "category/index";
/*
@import "me/index";
@import "product/index";
... ...
... ... @@ -4,7 +4,7 @@
top: 0;
width: 90px;
height: 90px;
font-size: 20px;
font-size: 20PX;
line-height: 90px;
color: #fff;
text-align: center;
... ...