fe / YOHOBUYWAP · Commits

Go to a project

Authored by biao
Commit 8f9f8cfdfaf093c4d8a570b1a329a7447bc66f70 1 parent 37cf33b8

优化sale页面sass代码，code review by bikai

Inline Side-by-side
Showing 1 changed file with 133 additions and 148 deletions
... ... @@ -161,187 +161,172 @@
background-color: #f5f5f5;
color: #6d6d6d;
margin-bottom: 10px;
}
.sale-nav li.active {
color: #fff;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.sale-nav li.green.active {
color: #fff;
background-image: image-url('sale/navactive-green-middle.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.sale-nav li.green.first.active {
background-image: image-url('sale/navactive-green-first.png');
}
.sale-nav li.green.last.active {
background-image: image-url('sale/navactive-green-last.png');
}
.sale-nav li.yellow.active {
color: #fff;
background-image: image-url('sale/navactive-yellow-middle.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.sale-nav li.yellow.first.active {
background-image: image-url('sale/navactive-yellow-first.png');
}
.sale-nav li.yellow.last.active {
background-image: image-url('sale/navactive-yellow-last.png');
}
.sale-nav li.red.active {
color: #fff;
background-image: image-url('sale/navactive-red-middle.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.sale-nav li.red.first.active {
background-image: image-url('sale/navactive-red-first.png');
}
.sale-nav li.red.last.active {
background-image: image-url('sale/navactive-red-last.png');
&.active {
color: #fff;
background-repeat: no-repeat;
background-size: 100% 100%;
}
&.green {
&.active {
color: #fff;
background-image: image-url("sale/navactive-green-middle.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
&.first.active {
background-image: image-url("sale/navactive-green-first.png");
}
&.last.active {
background-image: image-url("sale/navactive-green-last.png");
}
}
&.yellow {
&.active {
color: #fff;
background-image: image-url("sale/navactive-yellow-middle.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
&.first.active {
background-image: image-url("sale/navactive-yellow-first.png");
}
&.last.active {
background-image: image-url("sale/navactive-yellow-last.png");
}
}
&.red {
&.active {
color: #fff;
background-image: image-url("sale/navactive-red-middle.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
&.first.active {
background-image: image-url("sale/navactive-red-first.png");
}
&.last.active {
background-image: image-url("sale/navactive-red-last.png");
}
}
}
@media screen and (min-width: 1150px) {
.floor-header {
margin:80px 0 40px
}
.floor-header .header-navs li {
padding: 1px 15px
margin: 80px 0 40px;
.header-navs li {
padding: 1px 15px;
}
}
}
.commodity-list ul {
width: 1004px
width: 1004px;
}
.commodity-item {
float: left;
width: 241px;
margin: 0 10px 0 0
margin: 0 10px 0 0;
}
.commodity-img {
position: relative;
height: 323px;
text-align: center
}
.commodity-img img {
width: 100%;
height: 100%;
vertical-align: middle
}
.commodity-img .top-tag {
position: absolute;
width: 60px;
height: 60px;
top: 10px;
right: 10px;
line-height: 60px;
background: url('../assets/images/furniture/top-tag-bg.png?1450667948');
font-size: 20px;
color: #fff
}
.commodity-img .few-tag {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background: #ffac5b;
color: #fff;
line-height: 20px;
text-align: center;
font-size: 12px
img {
width: 100%;
height: 100%;
vertical-align: middle;
}
.top-tag {
position: absolute;
width: 60px;
height: 60px;
top: 10px;
right: 10px;
line-height: 60px;
background: url('../assets/images/furniture/top-tag-bg.png?1450667948');
font-size: 20px;
color: #fff;
}
.few-tag {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background: #ffac5b;
color: #fff;
line-height: 20px;
text-align: center;
font-size: 12px;
}
}
.commodity-content {
padding: 10px 0 0 0;
height: 69px;
overflow: hidden
}
.commodity-content .commodity-name {
font-size: 12px;
color: #000;
line-height: 18px;
text-align: center
}
.commodity-content .commodity-price {
position: relative;
margin: 3px 0 0 0;
text-align: center;
line-height: 20px;
color: #000
}
.commodity-content .commodity-price span {
display: inline-block;
*display: inline;
*zoom: 1;
font-size: 12px;
padding: 0 15px;
}
.commodity-content .commodity-price span.origin {
text-decoration: line-through;
}
.commodity-content .commodity-price strong {
font-weight: normal;
color: #565656;
font-size: 13px;
}
.commodity-content .commodity-price span.vip-tag {
background-image: image-url('sale/vip.png');
background-repeat: no-repeat;
background-size: 100% 90%;
color: #fff;
font-style: italic;
margin-right: 5px;
}
.commodity-content .commodity-price .price-sale {
margin-left: 10px;
padding-left: 10px;
width: 36px;
height: 20px;
line-height: 20px;
background: url('../assets/images/furniture/sale-tag-bg.png?1450667948');
color: #fff
overflow: hidden;
.commodity-name {
font-size: 12px;
color: #000;
line-height: 18px;
text-align: center;
}
.commodity-price {
position: relative;
margin: 3px 0 0 0;
text-align: center;
line-height: 20px;
color: #000;
span {
display: inline-block;
*display: inline;
*zoom: 1;
font-size: 12px;
padding: 0 15px;
&.origin {
text-decoration: line-through;
}
}
strong {
font-weight: normal;
color: #565656;
font-size: 13px;
}
span.vip-tag {
background-image: image-url("sale/vip.png");
background-repeat: no-repeat;
background-size: 100% 90%;
color: #fff;
font-style: italic;
margin-right: 5px;
}
.price-sale {
margin-left: 10px;
padding-left: 10px;
width: 36px;
height: 20px;
line-height: 20px;
background: url('../assets/images/furniture/sale-tag-bg.png?1450667948');
color: #fff;
}
}
}
@media screen and (min-width: 1150px) {
.commodity-list ul {
width:1160px
width: 1160px;
}
.commodity-item {
width: 280px
width: 280px;
}
.commodity-img {
height: 374px
height: 374px;
}
.commodity-content {
padding: 14px 0 0 0;
height: 77px
padding: 14px 0 0 0;
height: 77px;
}
}
}
... ...