|
@@ -9,15 +9,21 @@
|
|
|
:key="item.id" >
|
|
|
<view @click="toDetail(item)">
|
|
|
<image mode="aspectFit" :src="item.productImage+'?x-oss-process=image/resize,p_30'" style="height: 140px;width: 100%;"></image>
|
|
|
- <view class="back-price" v-if="item.promoRuleValue">返<text>{{item.promoRuleValue}}</text>元</view>
|
|
|
<view class="product-code"><text :max-lines="1" overflow="ellipsis">{{item.productCode}}</text></view>
|
|
|
</view>
|
|
|
<view>
|
|
|
<view class="product-name">{{item.productName}}</view>
|
|
|
<view class="product-guige"><text :max-lines="2" overflow="ellipsis">{{item.productOrigCode}}</text></view>
|
|
|
<view class="product-button">
|
|
|
- <view class="price-txt">¥<text>{{item.cost}}</text></view>
|
|
|
- <view>
|
|
|
+ <view class="price-txt">¥<text>{{Number(item.cost).toFixed(2).toString().split('.')[0]}}</text>.{{Number(item.cost).toFixed(2).toString().split('.')[1]}}</view>
|
|
|
+ <view class="flex align_center rebate-tag" v-if="index==1">
|
|
|
+ 返<text>{{item.promoRuleValue}}</text>元
|
|
|
+ </view>
|
|
|
+ <view class="flex align_center rebate-tag" v-if="index==2">
|
|
|
+ 买3赠2
|
|
|
+ </view>
|
|
|
+ <view class="flex align_center tejia-tag" v-if="index==3">
|
|
|
+ 特价<text>¥20</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -63,22 +69,6 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
-/* 显示一行省略号 */
|
|
|
-.ellipsis-one{
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- word-break: break-all;
|
|
|
-}
|
|
|
-/* 显示两行,省略号 */
|
|
|
-.ellipsis-two{
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
-}
|
|
|
.product-list{
|
|
|
display:flex;
|
|
|
flex-wrap: wrap;
|
|
@@ -96,7 +86,8 @@
|
|
|
.price-txt{
|
|
|
color: red;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
+ align-items: baseline;
|
|
|
+ font-size: 12px;
|
|
|
text{
|
|
|
font-size: 36rpx;
|
|
|
}
|
|
@@ -118,11 +109,10 @@
|
|
|
&:last-child{
|
|
|
position: relative;
|
|
|
flex-grow: 1;
|
|
|
- padding: 10px 10px 40px;
|
|
|
+ padding: 10px 10px 35px;
|
|
|
.product-name{
|
|
|
font-size: 28rpx;
|
|
|
- font-weight: 900;
|
|
|
- color: #666;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
.product-guige{
|
|
|
margin: 10rpx 0;
|
|
@@ -136,48 +126,26 @@
|
|
|
width: 90%;
|
|
|
padding: 5px 0 10px;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- button{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- text-align: center;
|
|
|
- justify-content: center;
|
|
|
- min-width:50rpx;
|
|
|
- height: 50rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- border-radius: 25rpx;
|
|
|
- padding: 0 10rpx;
|
|
|
- color: #fff;
|
|
|
- &:active{
|
|
|
- background: #2abcff;
|
|
|
- }
|
|
|
- }
|
|
|
- .bg-0{
|
|
|
- background: #066cff;
|
|
|
+ .rebate-tag{
|
|
|
+ background: #ffe7df;
|
|
|
+ color: #E91E63;
|
|
|
+ padding: 2px 5px;
|
|
|
+ font-size: 10px;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-left: 6px;
|
|
|
}
|
|
|
- .bg-1{
|
|
|
- background: #34aa0a;
|
|
|
+ .tejia-tag{
|
|
|
+ color: #E91E63;
|
|
|
+ margin-left: 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ text{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .back-price{
|
|
|
- padding: 6rpx 65rpx;
|
|
|
- background: rgba(255 ,87 ,34 , 1);
|
|
|
- position: absolute;
|
|
|
- top: 18rpx;
|
|
|
- right: -45rpx;
|
|
|
- color: #fff;
|
|
|
- z-index: 2;
|
|
|
- font-size: 20rpx;
|
|
|
- text-align: center;
|
|
|
- transform: rotate(40deg);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- text{
|
|
|
- font-size: 28rpx;
|
|
|
- margin: 0 5rpx;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
</style>
|