Commit 58ba58b7 by 侯体倬

商品列表布局样式优化(高度一致)

parent 303302ae
<!-- 商品列表item --> <!-- 商品列表item -->
<view <view
class="goodsItem {{datas.componentData.style==='rowList'?'goodsRowList':''}} {{datas.componentData.style==='heap'?'goodsRowList goodsHeapItem':''}}" class="goodsItem {{datas.componentData.style==='rowList'?'goodsRowList':''}} {{datas.componentData.style==='heap'?'goodsRowList goodsHeapItem':''}}"
style="--proGap2:{{datas.componentData.proGap*2}}rpx;" style="--proGap2:{{datas.componentData.proGap*2}}rpx;width: 100%;"
bindtap="onclickProduct" bindtap="onclickProduct"
> >
<view class="goods-item-child {{datas.componentData['borderColorShow']?'goods-item-child-bd':''}}" style="border-radius:{{datas.componentData.borderRadius*2}}rpx;--border_color:{{datas.componentData['borderColor']}};box-shadow:{{datas.componentData['cardShadow']?'0rpx 0rpx 10rpx '+datas.componentData['cardShadowSize']*2+'rpx #ccc':''}};"> <view class="goods-item-child {{datas.componentData['borderColorShow']?'goods-item-child-bd':''}}" style="border-radius:{{datas.componentData.borderRadius*2}}rpx;--border_color:{{datas.componentData['borderColor']}};box-shadow:{{datas.componentData['cardShadow']?'0rpx 0rpx 10rpx '+datas.componentData['cardShadowSize']*2+'rpx #ccc':''}};">
......
...@@ -17,6 +17,7 @@ image{ ...@@ -17,6 +17,7 @@ image{
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
height: 100%;
} }
.goodsRowList .goods-item-child{ .goodsRowList .goods-item-child{
display: flex; display: flex;
......
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
wx:for="{{pageGoodsList[datasIndex]}}" wx:for="{{pageGoodsList[datasIndex]}}"
wx:key="index" wx:key="index"
class="goods-item {{'goodsItemIndex'+index}}" class="goods-item {{'goodsItemIndex'+index}}"
style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx" style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx;display:flex;"
> >
<!-- <goods-item <!-- <goods-item
datas="{{datas}}" datas="{{datas}}"
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
wx:for="{{datas.componentData.goodsList}}" wx:for="{{datas.componentData.goodsList}}"
wx:key="index" wx:key="index"
class="goods-item" class="goods-item"
style="width:{{100/datas.componentData.columnNum}}%;margin-right:{{datas.componentData.proGap*2}}rpx" style="width:{{100/datas.componentData.columnNum}}%;margin-right:{{datas.componentData.proGap*2}}rpx;display:flex;"
> >
<goods-item <goods-item
datas="{{datas}}" datas="{{datas}}"
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
wx:for="{{pageGoodsList[datasIndex]}}" wx:for="{{pageGoodsList[datasIndex]}}"
wx:key="index" wx:key="index"
class="goods-item" class="goods-item"
style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx" style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx;display:flex;"
> >
<goods-item <goods-item
datas="{{datas}}" datas="{{datas}}"
...@@ -155,7 +155,7 @@ ...@@ -155,7 +155,7 @@
<block wx:for="{{swipeInfo}}"> <block wx:for="{{swipeInfo}}">
<swiper-item> <swiper-item>
<view class="goods-item" style="display: grid;gap:{{datas.componentData.proGap*2}}rpx;grid-template-columns:repeat({{datas.componentData.columnNum}}, 1fr)"> <view class="goods-item" style="display: grid;gap:{{datas.componentData.proGap*2}}rpx;grid-template-columns:repeat({{datas.componentData.columnNum}}, 1fr)">
<view wx:for="{{item}}" wx:for-index="indey"> <view wx:for="{{item}}" wx:for-index="indey" style="display:flex;">
<goods-item <goods-item
datas="{{datas}}" datas="{{datas}}"
items="{{datas.componentData.goodsList[index * datas.componentData.columnNum + indey]}}" items="{{datas.componentData.goodsList[index * datas.componentData.columnNum + indey]}}"
......
...@@ -5,6 +5,10 @@ ...@@ -5,6 +5,10 @@
image{ image{
width: 100%; width: 100%;
} }
goods-item {
display: flex;
flex: 1;
}
.goodsList{ .goodsList{
font-size: 32rpx; font-size: 32rpx;
position: relative; position: relative;
...@@ -169,7 +173,6 @@ image{ ...@@ -169,7 +173,6 @@ image{
white-space: nowrap; white-space: nowrap;
padding-bottom: 10rpx; padding-bottom: 10rpx;
display: flex; display: flex;
align-items: flex-start;
} }
.goods-across .prev-btn,.goods-across .next-btn{ .goods-across .prev-btn,.goods-across .next-btn{
position: absolute; position: absolute;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment