From 18520992ea9662bf3a05dd5d768307436cf09529 Mon Sep 17 00:00:00 2001
From: 514335620@qq.com <514335620@qq.com>
Date: Fri, 20 May 2016 14:09:12 +0800
Subject: [PATCH] 打折页面模板
---
apps/product/models/simulation.js | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------
public/scss/product/_detail.css | 43 +++++++++++++++++++++++++++----------------
public/scss/product/_filter-box.css | 12 +++++++-----
public/scss/product/_good.css | 18 +++++++++++-------
public/scss/product/_hot-rank.css | 17 ++++++++---------
public/scss/product/_index.css | 12 ++++++------
public/scss/product/_latest-walk.css | 1 +
public/scss/product/_left-content.css | 248 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------------------------------------------------------
public/scss/product/_list.css | 3 ++-
public/scss/product/_new-sale.css | 16 +++++++++++-----
public/scss/product/_no-result.css | 9 ++++++---
public/scss/product/_search.css | 6 +++---
public/scss/product/_shop-entry.css | 4 ++--
public/scss/product/sale/_index.css | 1 +
public/scss/product/sale/_new-sale.css | 8 +++++---
15 files changed, 277 insertions(+), 212 deletions(-)
diff --git a/apps/product/models/simulation.js b/apps/product/models/simulation.js
index c8aa27e..32d3afd 100644
--- a/apps/product/models/simulation.js
+++ b/apps/product/models/simulation.js
@@ -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: '中内衣',
diff --git a/public/scss/product/_detail.css b/public/scss/product/_detail.css
index f1d7f94..2eb52c2 100644
--- a/public/scss/product/_detail.css
+++ b/public/scss/product/_detail.css
@@ -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;
}
diff --git a/public/scss/product/_filter-box.css b/public/scss/product/_filter-box.css
index 3357642..074ed15 100644
--- a/public/scss/product/_filter-box.css
+++ b/public/scss/product/_filter-box.css
@@ -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
+}
diff --git a/public/scss/product/_good.css b/public/scss/product/_good.css
index c0655c7..dab3851 100644
--- a/public/scss/product/_good.css
+++ b/public/scss/product/_good.css
@@ -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 @@
}
}
-
}
diff --git a/public/scss/product/_hot-rank.css b/public/scss/product/_hot-rank.css
index ca094ed..92f605b 100644
--- a/public/scss/product/_hot-rank.css
+++ b/public/scss/product/_hot-rank.css
@@ -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 {
diff --git a/public/scss/product/_index.css b/public/scss/product/_index.css
index 4b52f00..fab52d9 100644
--- a/public/scss/product/_index.css
+++ b/public/scss/product/_index.css
@@ -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;
diff --git a/public/scss/product/_latest-walk.css b/public/scss/product/_latest-walk.css
index 26f27f3..16a5f87 100644
--- a/public/scss/product/_latest-walk.css
+++ b/public/scss/product/_latest-walk.css
@@ -33,6 +33,7 @@
line-height: 18px;
max-width: 150px;
margin: 5px 0;
+
@mixin ellipsis;
}
diff --git a/public/scss/product/_left-content.css b/public/scss/product/_left-content.css
index 452dd79..6bcf847 100644
--- a/public/scss/product/_left-content.css
+++ b/public/scss/product/_left-content.css
@@ -1,123 +1,125 @@
-.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%;
+ }
+
+}
diff --git a/public/scss/product/_list.css b/public/scss/product/_list.css
index 7733204..5bd9fd7 100644
--- a/public/scss/product/_list.css
+++ b/public/scss/product/_list.css
@@ -27,7 +27,8 @@
text-align: right;
}
- a, span {
+ a,
+ span {
display: inline-block;
height: 20px;
margin-right: 5px;
diff --git a/public/scss/product/_new-sale.css b/public/scss/product/_new-sale.css
index e8b5357..aa30a8b 100644
--- a/public/scss/product/_new-sale.css
+++ b/public/scss/product/_new-sale.css
@@ -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
+}
diff --git a/public/scss/product/_no-result.css b/public/scss/product/_no-result.css
index e42de14..a0c52db 100644
--- a/public/scss/product/_no-result.css
+++ b/public/scss/product/_no-result.css
@@ -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
+
+}
diff --git a/public/scss/product/_search.css b/public/scss/product/_search.css
index 44b6bfd..b8213fa 100644
--- a/public/scss/product/_search.css
+++ b/public/scss/product/_search.css
@@ -1,9 +1,9 @@
.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;
diff --git a/public/scss/product/_shop-entry.css b/public/scss/product/_shop-entry.css
index 8c38e0c..0859064 100644
--- a/public/scss/product/_shop-entry.css
+++ b/public/scss/product/_shop-entry.css
@@ -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;
diff --git a/public/scss/product/sale/_index.css b/public/scss/product/sale/_index.css
index f9c48b1..d63fa62 100644
--- a/public/scss/product/sale/_index.css
+++ b/public/scss/product/sale/_index.css
@@ -1,4 +1,5 @@
@import "_new-sale.css";
+
.center-content {
width: 1150px;
margin-left: auto;
diff --git a/public/scss/product/sale/_new-sale.css b/public/scss/product/sale/_new-sale.css
index 0005c8b..1d26995 100644
--- a/public/scss/product/sale/_new-sale.css
+++ b/public/scss/product/sale/_new-sale.css
@@ -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;
}
--
libgit2 0.24.0