Commit 4feeca03d6ca9a6ce2e60da4dbc7bcb32c0ed232
1 parent
eab0f03b
“优选”组件细节优化~
Showing
4 changed files
with
35 additions
and
10 deletions
src/components/horizList/horizList.less
| @@ -26,7 +26,7 @@ | @@ -26,7 +26,7 @@ | ||
| 26 | align-items: center; | 26 | align-items: center; |
| 27 | .item-box { | 27 | .item-box { |
| 28 | display: inline-flex; | 28 | display: inline-flex; |
| 29 | - | 29 | + |
| 30 | } | 30 | } |
| 31 | } | 31 | } |
| 32 | } | 32 | } |
| @@ -67,9 +67,9 @@ | @@ -67,9 +67,9 @@ | ||
| 67 | } | 67 | } |
| 68 | &.pid-2 { | 68 | &.pid-2 { |
| 69 | .h-box { | 69 | .h-box { |
| 70 | - height: 360px; | 70 | + height: 312px; |
| 71 | .scroll-box { | 71 | .scroll-box { |
| 72 | - padding-bottom: 30px; | 72 | + padding-bottom: 20px; |
| 73 | > .box { | 73 | > .box { |
| 74 | display: block; | 74 | display: block; |
| 75 | .item-box { | 75 | .item-box { |
| @@ -101,4 +101,4 @@ | @@ -101,4 +101,4 @@ | ||
| 101 | } | 101 | } |
| 102 | } | 102 | } |
| 103 | } | 103 | } |
| 104 | -} | ||
| 105 | \ No newline at end of file | 104 | \ No newline at end of file |
| 105 | +} |
src/components/horizListFlex/horizListFlex.vue
| @@ -65,6 +65,32 @@ | @@ -65,6 +65,32 @@ | ||
| 65 | goodsItem2, | 65 | goodsItem2, |
| 66 | goodsItem3, | 66 | goodsItem3, |
| 67 | flagLeftTop | 67 | flagLeftTop |
| 68 | + }, | ||
| 69 | + methods: { | ||
| 70 | + | ||
| 71 | + /** | ||
| 72 | + * 点击跳转 | ||
| 73 | + * @param {object} item [数据对象] | ||
| 74 | + */ | ||
| 75 | + jump(item) { | ||
| 76 | + this.$emit("jump", item); | ||
| 77 | + }, | ||
| 78 | + | ||
| 79 | + /** | ||
| 80 | + * 加入购物车 | ||
| 81 | + * @param {object} item [数据对象] | ||
| 82 | + */ | ||
| 83 | + addCart(item) { | ||
| 84 | + this.$emit("addCart", item); | ||
| 85 | + }, | ||
| 86 | + | ||
| 87 | + /** | ||
| 88 | + * 主按钮点击事件 | ||
| 89 | + * @param {object} item [数据对象] | ||
| 90 | + */ | ||
| 91 | + primary(item) { | ||
| 92 | + this.$emit("primary", item); | ||
| 93 | + } | ||
| 68 | } | 94 | } |
| 69 | } | 95 | } |
| 70 | </script> | 96 | </script> |
src/pages/com/com.less
| @@ -2,7 +2,6 @@ | @@ -2,7 +2,6 @@ | ||
| 2 | 2 | ||
| 3 | .com { | 3 | .com { |
| 4 | background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 10%, rgba(249, 249, 249, 1) 100%); | 4 | background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 10%, rgba(249, 249, 249, 1) 100%); |
| 5 | - // background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 100%); | ||
| 6 | padding-top: 50px; | 5 | padding-top: 50px; |
| 7 | .components-box { | 6 | .components-box { |
| 8 | margin-bottom: 50px; | 7 | margin-bottom: 50px; |
src/pages/com/com.vue
| @@ -2,7 +2,7 @@ | @@ -2,7 +2,7 @@ | ||
| 2 | <div class="com"> | 2 | <div class="com"> |
| 3 | 3 | ||
| 4 | <!-- 商品样式 2 横排flex --> | 4 | <!-- 商品样式 2 横排flex --> |
| 5 | - <horiz-list-flex class="components-box" | 5 | + <horiz-list-flex class="components-box" @jump="jump" |
| 6 | :lists="lists4" | 6 | :lists="lists4" |
| 7 | com="2" | 7 | com="2" |
| 8 | pid="2" | 8 | pid="2" |
| @@ -17,7 +17,7 @@ | @@ -17,7 +17,7 @@ | ||
| 17 | </horiz-list-flex> | 17 | </horiz-list-flex> |
| 18 | 18 | ||
| 19 | <!-- 商品样式 3 滑动 --> | 19 | <!-- 商品样式 3 滑动 --> |
| 20 | - <horiz-list @jump="jump" @primary="primary" | 20 | + <horiz-list class="components-box" @jump="jump" @primary="primary" |
| 21 | :lists="lists3" | 21 | :lists="lists3" |
| 22 | com="3"> | 22 | com="3"> |
| 23 | 23 | ||
| @@ -30,10 +30,10 @@ | @@ -30,10 +30,10 @@ | ||
| 30 | </horiz-list> | 30 | </horiz-list> |
| 31 | 31 | ||
| 32 | <!-- 商品样式 2 滑动 --> | 32 | <!-- 商品样式 2 滑动 --> |
| 33 | - <horiz-list @jump="jump" | 33 | + <horiz-list class="components-box" @jump="jump" |
| 34 | :lists="lists" | 34 | :lists="lists" |
| 35 | com="2" | 35 | com="2" |
| 36 | - pid="1"> | 36 | + pid="2"> |
| 37 | 37 | ||
| 38 | <!-- 标题 --> | 38 | <!-- 标题 --> |
| 39 | <text-title-box slot="title-box" | 39 | <text-title-box slot="title-box" |
| @@ -44,7 +44,7 @@ | @@ -44,7 +44,7 @@ | ||
| 44 | </horiz-list> | 44 | </horiz-list> |
| 45 | 45 | ||
| 46 | <!-- 商品样式 3 滑动 --> | 46 | <!-- 商品样式 3 滑动 --> |
| 47 | - <horiz-list @jump="jump" @primary="primary" | 47 | + <horiz-list class="components-box" @jump="jump" @primary="primary" |
| 48 | :lists="lists3" | 48 | :lists="lists3" |
| 49 | com="3"> | 49 | com="3"> |
| 50 | 50 |