fe / yohobuy-node · Commits

Go to a project

Authored by 514335620@qq.com
Commit 18520992ea9662bf3a05dd5d768307436cf09529 1 parent 2a87642c

打折页面模板

Inline Side-by-side
Showing 15 changed files with 277 additions and 212 deletions
... ... @@ -256,45 +256,78 @@ exports.discount = () => {
name: '衣服',
number: 20
}
]
],
},
filters: {
checkedConditions: {
conditions: {
price: {
href: 'www.baidu.com',
name: '低价',
customPrice: {
min: '120',
max: '200'
filters: {
checkedConditions: {
conditions: {
price: {
href: 'www.baidu.com',
name: '低价',
customPrice: {
min: '120',
max: '200'
}
}
}
}
}
}
},
},
opts: {
sortType: [
{
href: 'www.baidu.com'
},
{
name: '合适'
},
{
hasSortOrient: {
active: {
desc: {
opts: {
sortType: [
{
href: 'www.baidu.com'
},
{
name: '合适'
},
{
hasSortOrient: {
active: {
desc: {
}
}
}
}
]
},
goods: [
{
tags:
{
isNew: true
},
url: 'www.',
thumb: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/1000/h/500',
name: '123123货物',
brand:
{
url: '123',
name: '1231'
},
marketPrice: '231'
},
{
tags:
{
isNew: true
},
url: 'www.',
thumb: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/1000/h/500',
name: '123123货物',
brand:
{
url: '123',
name: '1231'
},
marketPrice: '231'
}
]
}
],
},
};
};
... ... @@ -360,7 +393,7 @@ exports.other = () => {
{
name: '小内衣',
num: '10',
href: 'www',
href: 'www'
},
{
name: '中内衣',
... ...
... ... @@ -12,7 +12,8 @@
margin-top: 5px;
}
.home, .brand-fav {
.home,
.brand-fav {
display: inline-block;
width: 32px;
height: 32px;
... ... @@ -94,7 +95,9 @@
background: #000;
}
.yep-tag, .ymp-tag, .sale-tag {
.yep-tag,
.ymp-tag,
.sale-tag {
background: #ff565b;
}
... ... @@ -300,7 +303,8 @@
cursor: pointer;
}
.size-warn, .num-warn {
.size-warn,
.num-warn {
float: left;
height: 24px;
line-height: 24px;
... ... @@ -369,7 +373,8 @@
text-align: center;
cursor: default;
&.had-lc, &.lc-sold-out {
&.had-lc,
&.lc-sold-out {
background: #ccc;
}
... ... @@ -388,15 +393,15 @@
.lc-container {
position: absolute;
top: calc(-($arrowTop - 1px));
right: calc(-(width($arrow) + $contentW));
top: calc(0 - ($arrowTop - 1px));
right: calc(0 - (width($arrow) + $contentW));
z-index: 1;
}
.lc-arrow {
position: absolute;
top: $arrowTop;
left: calc(-(width($arrow) - 1px));
left: calc(0 - (width($arrow) -1px));
width: width($arrow);
height: height($arrow);
background: resolve($arrow);
... ... @@ -445,7 +450,7 @@
&.hover {
background: #eb3b19;
background: rgba(233, 38, 1, .8);
background: rgba(233, 38, 1, 0.8);
}
&.dis {
... ... @@ -453,7 +458,8 @@
}
}
.collect-product, .keep-shopping {
.collect-product,
.keep-shopping {
display: inline-block;
width: 127px;
height: 48px;
... ... @@ -471,7 +477,7 @@
font-size: 14px;
}
&.coled .iconfont{
&.coled .iconfont {
color: #fa5252;
}
}
... ... @@ -750,7 +756,7 @@
.cc-content {
background: #f5f7f6;
padding: 20px 20px 0 20px;
padding: 20px 20px 0;
font-size: 12px;
h2 {
... ... @@ -828,7 +834,8 @@
}
}
.comment, .consult {
.comment,
.consult {
margin-top: 10px;
}
... ... @@ -1014,11 +1021,15 @@
.hot-point {
position: absolute;
background: #fff\9;
/*IE8 Hack*/
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
background: #fff;
/*
IE8 Hack
*/
filter: progid:dximagetransform.microsoft.alpha(Opacity=0);
&.hover .pointer{
&.hover .pointer {
background-position: 0 -25px;
}
... ...
... ... @@ -280,7 +280,8 @@
display: block;
}
.multi-select-ok, .multi-select-cancel {
.multi-select-ok,
.multi-select-cancel {
width: 55px;
height: 24px;
border: none;
... ... @@ -416,7 +417,7 @@
background: resolve('product/senior-up.png') no-repeat;
background-position: 50% 0;
top: -1px;
top: 1px\9;
top: 1px/9;
}
.checkbox {
... ... @@ -445,7 +446,8 @@
width: 25%;
}
/*高级选项箭头位置IE11Hack*/
_:-ms-fullscreen, :root .senior-up-icon {
/* 高级选项箭头位置IE11Hack */
_:-ms-fullscreen,
:root .senior-up-icon {
top: 1px;
}
\ No newline at end of file
}
... ...
... ... @@ -9,7 +9,8 @@
height: 300px;
position: relative;
.good-thumb, img.lazy {
.good-thumb,
img.lazy {
display: block;
overflow: hidden;
width: 100%;
... ... @@ -40,6 +41,7 @@
margin-top: 16px;
line-height: 1.5;
display: block;
@mixin ellipsis;
}
... ... @@ -100,10 +102,12 @@
}
.new-festival-tag {
background: #000000;
background: #000;
}
.yep-tag, .ymp-tag, .sale-tag {
.yep-tag,
.ymp-tag,
.sale-tag {
background: #ff565b;
}
... ... @@ -124,7 +128,7 @@
}
.good-item-wrapper {
border: 1px solid #dddddd;
border: 1px solid #ddd;
padding-left: 20px;
padding-top: 18px;
padding-right: 20px;
... ... @@ -132,7 +136,7 @@
background: #fff;
display: none;
.good-info-main{
.good-info-main {
float: left;
}
... ... @@ -160,7 +164,8 @@
width: 50px;
margin-bottom: 15px;
a, img {
a,
img {
display: block;
overflow: hidden;
width: 100%;
... ... @@ -193,5 +198,4 @@
}
}
}
... ...
... ... @@ -43,7 +43,7 @@
.item-content {
width: 100%;
padding: 14px 0 0 0;
padding: 14px 0 0;
height: 77px;
overflow: hidden;
text-align: center;
... ... @@ -61,7 +61,7 @@
p {
display: inline-block;
margin: 3px 0 0 0;
margin: 3px 0 0;
font-size: 12px;
text-align: center;
line-height: 20px;
... ... @@ -131,12 +131,10 @@
}
}
.hot-week-list {
width: 1160px;
.good-info {
width: 280px;
height: 464px;
margin: 10px 10px 0 0;
... ... @@ -174,15 +172,15 @@
p {
display: inline-block;
margin: 3px 0 0 0;
margin: 3px 0 0;
font-size: 12px;
text-align: center;
line-height: 20px;
color: #000;
.sale-price {
margin: 0 10px 0 0;
}
}
.sale-price {
margin: 0 10px 0 0;
}
}
}
... ... @@ -226,7 +224,8 @@
border-top: 1px solid #555;
}
li.current, li:hover {
li.current,
li:hover {
background: #555;
a {
... ...
... ... @@ -13,7 +13,7 @@
@import "sale/_index.css";
.product-page {
/*分页*/
/* 分页 */
.product-pager {
padding: 20px 0;
font-size: 12px;
... ... @@ -24,7 +24,6 @@
float: right;
}
}
/*分页 END*/
.list-left {
width: 160px;
... ... @@ -35,12 +34,13 @@
}
}
.product-list-page, .new-sale-page {
.product-list-page,
.new-sale-page {
.goods-container {
height: auto;
padding-top: 25px;
position: relative;
width: calc(970px + 10px);/*每列增加右边距*/
width: calc(970px + 10px);/* 每列增加右边距 */
.good-info {
width: 235px;
... ... @@ -61,7 +61,7 @@
}
}
/*990px*/
/* 990px */
.min-screen .product-list-page,
.min-screen .new-sale-page {
... ... @@ -73,7 +73,7 @@
height: auto;
padding-top: 25px;
position: relative;
width: calc(810px + 10px);/*每列增加右边距*/
width: calc(810px + 10px);/* 每列增加右边距 */
.good-info {
width: 195px;
... ...
... ... @@ -33,6 +33,7 @@
line-height: 18px;
max-width: 150px;
margin: 5px 0;
@mixin ellipsis;
}
... ...
.product-page {
.sort-container {
width: 100%;
font-size: 12px;
border-bottom: 1px solid #ebebeb;
padding-bottom: 10px;
margin-bottom: 10px;
h2 {
height: 28px;
line-height: 28px;
color: #222;
font-weight: bold;
position: relative;
span {
color: #bbb;
padding-left: 5px;
}
}
}
.product-list-nav {
h3 {
height: 28px;
line-height: 28px;
color: #222;
font-weight: bold;
position: relative;
text-indent: 10px;
cursor: pointer;
span {
color: #bbb;
padding-left: 5px;
&.icon-triangle {
display: inline-block;
padding-left: 0;
width: 0;
height: 0;
border-top: 6px solid #fff;
border-left: 6px solid #000;
border-bottom: 6px solid #fff;
position: absolute;
top: 50%;
margin-top: -6px;
left: 0;
transition: transform .3s;
}
}
}
&.active .icon-triangle {
transform: rotate(90deg);
}
&.active .sort-child-list {
display: block;
}
}
.sort-child-list {
display: none;
&.new-sale {
display: block;
}
li {
color: #bbb;
&.active {
background: #333;
color: #fff;
a {
color: #fff;
}
}
span {
padding-left: 5px;
color: #bbb;
}
}
a {
display: block;
color: #666;
padding-left: 10px;
height: 22px;
line-height: 22px;
}
}
.nav-pic-title {
height: 35px;
line-height: 35px;
color: #000;
font-weight: bold;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
}
.pic-nav {
display: block;
li {
margin-bottom: 10px;
}
li, img {
display: block;
width: 100%;
overflow: hidden;
}
}
.brand-card img,
.brand-ad img {
max-width: 100%;
}
}
\ No newline at end of file
.product-page {
.sort-container {
width: 100%;
font-size: 12px;
border-bottom: 1px solid #ebebeb;
padding-bottom: 10px;
margin-bottom: 10px;
h2 {
height: 28px;
line-height: 28px;
color: #222;
font-weight: bold;
position: relative;
span {
color: #bbb;
padding-left: 5px;
}
}
}
.product-list-nav {
h3 {
height: 28px;
line-height: 28px;
color: #222;
font-weight: bold;
position: relative;
text-indent: 10px;
cursor: pointer;
span {
color: #bbb;
padding-left: 5px;
&.icon-triangle {
display: inline-block;
padding-left: 0;
width: 0;
height: 0;
border-top: 6px solid #fff;
border-left: 6px solid #000;
border-bottom: 6px solid #fff;
position: absolute;
top: 50%;
margin-top: -6px;
left: 0;
transition: transform 0.3s;
}
}
}
&.active .icon-triangle {
transform: rotate(90deg);
}
&.active .sort-child-list {
display: block;
}
}
.sort-child-list {
display: none;
&.new-sale {
display: block;
}
li {
color: #bbb;
&.active {
background: #333;
color: #fff;
a {
color: #fff;
}
}
span {
padding-left: 5px;
color: #bbb;
}
}
a {
display: block;
color: #666;
padding-left: 10px;
height: 22px;
line-height: 22px;
}
}
.nav-pic-title {
height: 35px;
line-height: 35px;
color: #000;
font-weight: bold;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
}
.pic-nav {
display: block;
li {
margin-bottom: 10px;
}
li,
img {
display: block;
width: 100%;
overflow: hidden;
}
}
.brand-card img,
.brand-ad img {
max-width: 100%;
}
}
... ...
... ... @@ -27,7 +27,8 @@
text-align: right;
}
a, span {
a,
span {
display: inline-block;
height: 20px;
margin-right: 5px;
... ...
... ... @@ -13,7 +13,6 @@
width: 100%;
height: 100%;
display: block;
float: left;
position: absolute;
top: 0;
left: 0;
... ... @@ -93,7 +92,8 @@
float: left;
}
.pre, .next {
.pre
.next {
position: absolute;
display: block;
width: 40px;
... ... @@ -140,7 +140,10 @@
margin-left: 14px;
a {
display: block;
/*
display:block;
*/
width: 164px;
height: 76px;
line-height: 76px;
... ... @@ -184,6 +187,9 @@
}
}
.min-screen .new-sale-page .new-brands .brands-wrap {
.min-screen
.new-sale-page
.new-brands
.brands-wrap {
width: 730px;
}
\ No newline at end of file
}
... ...
... ... @@ -9,7 +9,7 @@
}
.keyword {
color: #ee0011;
color: #e01;
}
.search-again {
... ... @@ -33,7 +33,9 @@
height: 68px;
line-height: 68px;
background: #343434;
vertical-align: middle;
/* vertical-align:middle; */
color: #fff;
cursor: pointer;
outline: none;
... ... @@ -48,4 +50,5 @@
font-size: 12px;
color: #999;
}
}
\ No newline at end of file
}
... ...
.product-search-page {
.goods-container {
height: auto;
padding: 25px 0 0 0;
padding: 25px 0 0;
position: relative;
width: calc(1150px + 10px);/*每列增加右边距*/
width: calc(1150px + 10px);/* 每列增加右边距 */
.good-info {
width: 222px;
... ... @@ -24,7 +24,7 @@
height: auto;
padding-top: 25px;
position: relative;
width: calc(990px + 10px); /*每列增加右边距*/
width: calc(990px + 10px); /* 每列增加右边距 */
.good-info {
width: 190px;
... ...
... ... @@ -51,9 +51,9 @@
.goods-container {
height: auto;
padding: 25px 0 0 0;
padding: 25px 0 0;
position: relative;
width: calc(970px + 10px);/*每列增加右边距*/
width: calc(970px + 10px);/* 每列增加右边距 */
.good-info {
width: 235px;
... ...
@import "_new-sale.css";
.center-content {
width: 1150px;
margin-left: auto;
... ...
... ... @@ -13,7 +13,6 @@
width: 100%;
height: 100%;
display: block;
float: left;
position: absolute;
top: 0;
left: 0;
... ... @@ -93,7 +92,8 @@
float: left;
}
.pre, .next {
.pre,
.next {
position: absolute;
display: block;
width: 40px;
... ... @@ -144,7 +144,9 @@
width: 164px;
height: 76px;
line-height: 76px;
vertical-align: middle;
/* vertical-align: middle; */
text-align: center;
}
... ...