|
|
|
@ -70,21 +70,31 @@ |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="bottom-productImg"> |
|
|
|
<img :src="showImg(sku[productIndex].headimg)" alt=""> |
|
|
|
<image :src="showImg(sku[productIndex].headimg)" alt=""></image> |
|
|
|
<view class="right-content"> |
|
|
|
<view class="bottom-productPrice com-price">{{(sku[productIndex].price||0)/100}}</view> |
|
|
|
<view class="bottom-content">已选择：{{sku[productIndex].sku_name}}</view> |
|
|
|
<view class="buy-num com-flex-tao"> |
|
|
|
<view class="number-btn"> |
|
|
|
<view> |
|
|
|
<text @click="delNumber">-</text> |
|
|
|
</view> |
|
|
|
<view style="flex: 1;">{{ buyNum }}</view> |
|
|
|
<view> |
|
|
|
<text @click="addNumber">+</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view style="max-height: 600rpx;overflow-y: auto;"> |
|
|
|
<view class="sp"> |
|
|
|
规格 |
|
|
|
</view> |
|
|
|
<view style="display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;"> |
|
|
|
<view style="position:relative;" v-for="(botItem,botIndex) in sku" :key="botIndex"> |
|
|
|
</view> |
|
|
|
<view style="max-height: 600rpx;overflow-y: auto;"> |
|
|
|
<view class="sp">规格</view> |
|
|
|
<view class="sp-container"> |
|
|
|
<view style="position:relative;max-width: 100%;" v-for="(botItem,botIndex) in sku" :key="botIndex"> |
|
|
|
<view :class="['botProduct','text-overflow',{'noStore':botItem.store==0},{'botProducts':productIndex==botIndex}]" |
|
|
|
@click="changeProduct(botItem,botIndex)"> |
|
|
|
{{botItem.sku_name}} |
|
|
|
<image :src="showImg(botItem.headimg)"></image> |
|
|
|
<view class="sku-name">{{botItem.sku_name}}</view> |
|
|
|
</view> |
|
|
|
<view class="noStore-text" v-if="botItem.store==0"> |
|
|
|
不可购买 |
|
|
|
@ -92,18 +102,7 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="buy-num com-flex-tao"> |
|
|
|
数量 |
|
|
|
<view class="number-btn"> |
|
|
|
<view> |
|
|
|
<text @click="delNumber">-</text> |
|
|
|
</view> |
|
|
|
<view style="width: 96rpx;height: 69rpx;margin: 0 14rpx;">{{ buyNum }}</view> |
|
|
|
<view> |
|
|
|
<text @click="addNumber">+</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="placeholder-content"> |
|
|
|
<view style="height: 100rpx;"></view> |
|
|
|
@ -423,17 +422,19 @@ |
|
|
|
.bottom-productImg { |
|
|
|
display: flex; |
|
|
|
margin-bottom: 23rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom-productImg img { |
|
|
|
width: 218rpx; |
|
|
|
height: 179rpx; |
|
|
|
image { |
|
|
|
width: 173.33rpx; |
|
|
|
height: 173.33rpx; |
|
|
|
background: #666666; |
|
|
|
border-radius: 13rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.right-content { |
|
|
|
margin: 10rpx 0 0 41rpx; |
|
|
|
padding-left: 14rpx; |
|
|
|
flex: 1; |
|
|
|
width: 1rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom-productPrice { |
|
|
|
@ -447,7 +448,7 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.bottom-content { |
|
|
|
width: 331rpx; |
|
|
|
width: 100%; |
|
|
|
font-size: 27rpx; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
@ -455,20 +456,32 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.botProduct { |
|
|
|
width: 320rpx; |
|
|
|
// height: 78rpx; |
|
|
|
border-radius: 13rpx; |
|
|
|
background-color: #F5F5F5; |
|
|
|
font-size: 29rpx; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
color: #333333; |
|
|
|
line-height: 78rpx; |
|
|
|
text-align: center; |
|
|
|
margin-bottom: 25rpx; |
|
|
|
display: inline-block; |
|
|
|
position: relative; |
|
|
|
padding: 0 40rpx; |
|
|
|
min-height: 67rpx; |
|
|
|
border-radius: 13rpx; |
|
|
|
margin-bottom: 34rpx; |
|
|
|
max-width: 100%; |
|
|
|
padding-right:15rpx; |
|
|
|
min-width: 320rpx; |
|
|
|
background: #EFEFEF; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
box-sizing: border-box; |
|
|
|
color: #333; |
|
|
|
width: fit-content; |
|
|
|
&>image{ |
|
|
|
width: 67rpx; |
|
|
|
height: 67rpx; |
|
|
|
border-radius: 13rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
.sku-name{ |
|
|
|
flex: 1; |
|
|
|
padding-left: 15rpx; |
|
|
|
white-space: normal; |
|
|
|
font-size: 27rpx; |
|
|
|
word-break: break-all; |
|
|
|
} |
|
|
|
} |
|
|
|
.noStore{ |
|
|
|
background-color: rgba(239, 239, 239, 1); |
|
|
|
@ -492,38 +505,35 @@ |
|
|
|
|
|
|
|
|
|
|
|
.botProducts { |
|
|
|
background: #6A8A27; |
|
|
|
color: #FFFFFF; |
|
|
|
color: #6A8A27; |
|
|
|
border: 1px solid #6A8A27; |
|
|
|
} |
|
|
|
|
|
|
|
.buy-num { |
|
|
|
font-size: 29rpx; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 31rpx; |
|
|
|
color: #000000; |
|
|
|
color: #333333; |
|
|
|
// border-top: 1rpx solid #CCCCCC; |
|
|
|
padding: 39rpx 0; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
.buy-num .number-btn { |
|
|
|
width: 233rpx; |
|
|
|
height: 53rpx; |
|
|
|
background: #EFEFEF; |
|
|
|
border-radius: 13rpx; |
|
|
|
margin-top: 25rpx; |
|
|
|
.number-btn { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
.buy-num .number-btn view { |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
view { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: 69rpx; |
|
|
|
height: 69rpx; |
|
|
|
border: 1rpx solid #CCCCCC; |
|
|
|
border-radius: 7rpx; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.buy-num .number-btn>view text { |
|
|
|
font-size: 46rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.buy-btn { |
|
|
|
@ -561,6 +571,16 @@ |
|
|
|
margin: 60rpx 0; |
|
|
|
padding-top: 30rpx; |
|
|
|
} |
|
|
|
.sp-container{ |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
flex-wrap: wrap; |
|
|
|
min-height: 400rpx; |
|
|
|
max-height: 600rpx; |
|
|
|
overflow-y: auto; |
|
|
|
overflow-x: hidden; |
|
|
|
align-content: flex-start |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
jiazhipeng