shop-applet/components/WaterfallsFlowItemSupply/WaterfallsFlowItemo.vue

219 lines
3.9 KiB
Vue

<template>
<view class="wf-item-page" @click="gogogo(item)">
<view class='pictrue'>
<!-- <image :src="item.image[0]" mode="widthFix" class="item-img" /> -->
<image :src="item.image" mode="aspectFill" class="item-img"></image>
<!-- <easy-loadimage mode="widthFix" :image-src="item.image[0]"></easy-loadimage> -->
</view>
<view class="title">{{item.store_name}}</view>
<!-- <view class="tag">
<view class="tag-one">
自营商品
</view>
<view class="tag-two">
<text class="tag-twoa"></text>
<text class="tag-twob">满20包邮</text>
</view>
</view> -->
<view class="relase">
<view class="relase-one">
{{item.rate}}
</view>
<view class="relase-two">
{{item.reply_count}}评论
</view>
</view>
<view class="price">
<span></span>{{item.price.split('.')[0]}}.<text>{{item.price.split('.')[1]}}</text>
</view>
<view class="item-info">
<view class="info-title" style="margin-right: 10rpx;">
{{item.merchant.mer_name}}
</view>
<view class="info-img">
<image src="@/static/images/you.png" mode="aspectFit"></image>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
item: {
type: Object,
require: true
}
},
methods: {
gogogo(item) {
uni.navigateTo({
url: '/pages/goods_details/index?id=' + item.product_id
})
},
}
}
</script>
<style lang="scss" scoped>
.wf-item-page {
background: #fff;
overflow: hidden;
border-radius: 5px;
}
.pictrue {
width: 100% !important;
height: 345rpx;
image {
width: 100%;
height: 345rpx;
}
}
.item-info {}
.title {
font-size: 30rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
margin: 12px 0;
padding-right: 12rpx;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-left: 21rpx;
}
.tag {
display: flex;
margin-left: 21rpx;
.tag-one {
text-align: center;
padding: 2rpx 9rpx;
border-radius: 11rpx 11rpx 11rpx 11rpx;
border: 1px solid #3274F9;
font-size: 19rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
margin-right: 15rpx;
}
.tag-two {
.tag-twoa {
width: 130rpx;
text-align: center;
padding-left: 15rpx;
padding-right: 7rpx;
border-radius: 11rpx 0px 0px 0rpx;
border: 1px solid #F84221;
font-size: 19rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
}
.tag-twob {
width: 130rpx;
text-align: center;
padding: 2rpx 9rpx;
border-radius: 0px 11rpx 11rpx 0px;
border: 1px solid #F84221;
font-size: 19rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
}
}
}
.relase {
display: flex;
margin-left: 21rpx;
margin-top: 12rpx;
height: 26rpx;
line-height: 26rpx;
.relase-one {
// font-style: italic;
transform: skewX(-15deg);
font-size: 26rpx;
font-family: SF Pro Display-Regular Italic, SF Pro Display;
font-weight: 600;
color: #FF6D20;
}
.relase-two {
font-size: 23rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 500;
color: #B3B3B3;
margin-left: 13rpx;
}
}
.price {
margin-left: 21rpx;
margin-bottom: 10rpx;
color: #F84221;
font-size: 44rpx;
font-weight: 600;
span {
color: #F84221;
font-size: 30rpx;
font-weight: 500;
}
text {
color: #F84221;
font-size: 37rpx;
font-weight: 400;
}
}
.item-info {
margin-left: 21rpx;
margin-bottom: 25rpx;
display: flex;
width: 280rpx;
height: 39rpx;
line-height: 39rpx;
background: #F4F7FE;
border-radius: 19rpx 19rpx;
opacity: 1;
font-size: 23rpx;
padding-left: 11rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #737373;
.info-img {
width: 21rpx;
height: 21rpx;
margin-top: 5rpx;
image {
width: 100%;
height: 100%;
}
}
}
</style>