deming/components/shop/seckill/item.vue
2020-07-21 21:02:28 +08:00

72 lines
1.6 KiB
Vue

<template>
<view class="item">
<image class="head" :src="item.groupbuy_image1"></image>
<text class="title u-line-2">{{ item.goods_name }}</text>
<view class="price">
<text>{{ item.groupbuy_price }}</text>
<text>{{ item.goods_price }}</text>
</view>
<view class="info">
<text>剩余{{ item.inventory | formatValue }}</text>
<text>立即购买</text>
</view>
</view>
</template>
<script>
export default {
name:"item",
props: ['item'],
filters: {
formatValue(value) {
let temp = Number(value);
if(temp > 999) temp = '999+';
return temp;
}
}
}
</script>
<style lang="scss" scoped>
.item{
width: 220rpx;
.head{
width: 210rpx;
height: 131rpx;
border-radius: 6rpx;
background-color: antiquewhite;
}
.title{
font-size: 26rpx;
color: #333;
margin-top: 16rpx;
}
.price{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 19rpx;
>text:first-child{
font-size: 26rpx;
color: #FF3131;
}
>text:last-child{
font-size: 24rpx;
color: #999;
text-decoration: line-through;
}
}
.info{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 20rpx;
margin-top: 19rpx;
>text:first-child{
color: #666;
}
>text:last-child{
color: #FDD360;
}
}
}
</style>