Commit f304264984880084b1da67e3416b011e73d3066a
1 parent
1a283edd
1、米8横向滚动定位遮盖问题
2、安卓6.0“热销商品”flex定位问题
Showing
4 changed files
with
48 additions
and
40 deletions
src/components/horizList/horizList.less
src/components/horizListFlex/horizListFlex.less
| @@ -5,14 +5,19 @@ | @@ -5,14 +5,19 @@ | ||
| 5 | margin-top: 30px; | 5 | margin-top: 30px; |
| 6 | } | 6 | } |
| 7 | .container-box { | 7 | .container-box { |
| 8 | - display: flex; | ||
| 9 | - justify-content: space-evenly; | ||
| 10 | - align-items: center; | ||
| 11 | background-color: #ffffff; | 8 | background-color: #ffffff; |
| 12 | margin: 0 auto; | 9 | margin: 0 auto; |
| 13 | padding: 25px 0 30px 0; | 10 | padding: 25px 0 30px 0; |
| 14 | width: 690px; | 11 | width: 690px; |
| 15 | height: auto; | 12 | height: auto; |
| 16 | border-radius: 12px; | 13 | border-radius: 12px; |
| 14 | + .container { | ||
| 15 | + display: flex; | ||
| 16 | + justify-content: space-between; | ||
| 17 | + align-items: center; | ||
| 18 | + margin: 0 auto; | ||
| 19 | + width: 640px; | ||
| 20 | + height: 100%; | ||
| 21 | + } | ||
| 17 | } | 22 | } |
| 18 | } | 23 | } |
src/components/horizListFlex/horizListFlex.vue
| @@ -2,47 +2,49 @@ | @@ -2,47 +2,49 @@ | ||
| 2 | <div class="horiz-list-flex-box" v-if="lists && lists.length"> | 2 | <div class="horiz-list-flex-box" v-if="lists && lists.length"> |
| 3 | <slot name="title-box"></slot> | 3 | <slot name="title-box"></slot> |
| 4 | <div class="container-box"> | 4 | <div class="container-box"> |
| 5 | - <div class="item-box" v-for="(item, index) in lists" :key="index"> | 5 | + <div class="container"> |
| 6 | + <div class="item-box" v-for="(item, index) in lists" :key="index"> | ||
| 6 | 7 | ||
| 7 | - <!-- | ||
| 8 | - com=1：goodsItem_1组件，pid：1、3，固定不滚动；2、4，滚动 | ||
| 9 | - 事件： | ||
| 10 | - @jump：整个点击跳转事件 | ||
| 11 | - @addCart：右下角加入购物车按钮事件，已阻止事件冒泡 | 8 | + <!-- |
| 9 | + com=1：goodsItem_1组件，pid：1、3，固定不滚动；2、4，滚动 | ||
| 10 | + 事件： | ||
| 11 | + @jump：整个点击跳转事件 | ||
| 12 | + @addCart：右下角加入购物车按钮事件，已阻止事件冒泡 | ||
| 12 | 13 | ||
| 13 | - com=2：goodsItem_2组件，pid: 1，带标题，不显示附加信息；2、不带标题，显示附加信息 | ||
| 14 | - 事件： | ||
| 15 | - @jump：整个点击跳转事件 | 14 | + com=2：goodsItem_2组件，pid: 1，带标题，不显示附加信息；2、不带标题，显示附加信息 |
| 15 | + 事件： | ||
| 16 | + @jump：整个点击跳转事件 | ||
| 16 | 17 | ||
| 17 | - com=3：goodsItem_3组件，无pid参数 | ||
| 18 | - 事件： | ||
| 19 | - @jump：整个点击跳转事件 | ||
| 20 | - @primary：右下角红色主按钮点击事件，已阻止事件冒泡 | ||
| 21 | - --> | 18 | + com=3：goodsItem_3组件，无pid参数 |
| 19 | + 事件： | ||
| 20 | + @jump：整个点击跳转事件 | ||
| 21 | + @primary：右下角红色主按钮点击事件，已阻止事件冒泡 | ||
| 22 | + --> | ||
| 22 | 23 | ||
| 23 | - <!-- 商品展示样式 1 --> | ||
| 24 | - <goods-item-1 v-if="com == '1'" @jump="jump" @addCart="addCart" | ||
| 25 | - :item="item" | ||
| 26 | - :pid="pid"> | ||
| 27 | - </goods-item-1> | 24 | + <!-- 商品展示样式 1 --> |
| 25 | + <goods-item-1 v-if="com == '1'" @jump="jump" @addCart="addCart" | ||
| 26 | + :item="item" | ||
| 27 | + :pid="pid"> | ||
| 28 | + </goods-item-1> | ||
| 28 | 29 | ||
| 29 | - <!-- 商品展示样式 2 --> | ||
| 30 | - <goods-item-2 v-if="com == '2'" @jump="jump" | ||
| 31 | - :item="item" | ||
| 32 | - :pid="pid"> | 30 | + <!-- 商品展示样式 2 --> |
| 31 | + <goods-item-2 v-if="com == '2'" @jump="jump" | ||
| 32 | + :item="item" | ||
| 33 | + :pid="pid"> | ||
| 33 | 34 | ||
| 34 | - <!-- 添加flag --> | ||
| 35 | - <flag slot="flag" v-if="flags && flags.icon && flags.icon[index]" | ||
| 36 | - :flag="flags.icon[index]" | ||
| 37 | - :position="flags.position" | ||
| 38 | - :width="flags.width"> | ||
| 39 | - </flag> | ||
| 40 | - </goods-item-2> | 35 | + <!-- 添加flag --> |
| 36 | + <flag slot="flag" v-if="flags && flags.icon && flags.icon[index]" | ||
| 37 | + :flag="flags.icon[index]" | ||
| 38 | + :position="flags.position" | ||
| 39 | + :width="flags.width"> | ||
| 40 | + </flag> | ||
| 41 | + </goods-item-2> | ||
| 41 | 42 | ||
| 42 | - <!-- 商品展示样式 3 --> | ||
| 43 | - <goods-item-3 v-if="com == '3'" @jump="jump" @primary="primary" | ||
| 44 | - :item="item"> | ||
| 45 | - </goods-item-3> | 43 | + <!-- 商品展示样式 3 --> |
| 44 | + <goods-item-3 v-if="com == '3'" @jump="jump" @primary="primary" | ||
| 45 | + :item="item"> | ||
| 46 | + </goods-item-3> | ||
| 47 | + </div> | ||
| 46 | </div> | 48 | </div> |
| 47 | </div> | 49 | </div> |
| 48 | </div> | 50 | </div> |
src/pages/optimization/optimization.less
| @@ -4,11 +4,11 @@ | @@ -4,11 +4,11 @@ | ||
| 4 | margin-top: 30px; | 4 | margin-top: 30px; |
| 5 | .goods-list-box { | 5 | .goods-list-box { |
| 6 | background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 10%, rgba(249, 249, 249, 1) 100%); | 6 | background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 10%, rgba(249, 249, 249, 1) 100%); |
| 7 | - padding-top: 50px; | 7 | + padding: 30px 0 50px 0; |
| 8 | .components-box { | 8 | .components-box { |
| 9 | margin-bottom: 50px; | 9 | margin-bottom: 50px; |
| 10 | &:last-child { | 10 | &:last-child { |
| 11 | - // margin-bottom: 0; | 11 | + margin-bottom: 0; |
| 12 | } | 12 | } |
| 13 | } | 13 | } |
| 14 | } | 14 | } |