1、米8横向滚动定位遮盖问题

2、安卓6.0“热销商品”flex定位问题

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